请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
圆柱缓冲几何体(CylinderGeometry)是一个用于生成圆柱几何体的类。构造器:
CylinderGeometry(radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)
其中:
radiusTop — 圆柱的顶部半径,默认值是 1
radiusBottom — 圆柱的底部半径,默认值是 1
height — 圆柱的高度,默认值是 1
radialSegments — 圆柱侧面周围的分段数,默认为 32
heightSegments — 圆柱侧面沿着其高度的分段数,默认值为 1
openEnded — 一个Boolean值,指明该圆锥的底面是开放的还是封顶的。默认值为false,即其底面默认是封顶的
thetaStart — 第一个分段的起始角度,默认为 0(三点钟方向)
thetaLength — 圆柱底面圆扇区的中心角,通常被称为“θ”(西塔)。默认值是2*Pi,这使其成为一个完整的圆柱
在下面的代码中,我们用圆柱几何体+颜色+纹理贴图创建一个圆柱立体图案:
<script type="module">
import * as THREE from 'https://esm.sh/three'; // three主库
import { OrbitControls } from "https://esm.sh/three/examples/jsm/controls/OrbitControls"; // 轨道控制库
const scene = new THREE.Scene; // 场景
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); // 相机
camera.position.set(0, 0, 5); // 相机位置
const renderer = new THREE.WebGLRenderer({ antialias: true }); // 渲染器
renderer.setSize(window.innerWidth, window.innerHeight); // 渲染器范围
document.body.appendChild(renderer.domElement); // 渲染器加入到body标签
const controller = new OrbitControls(camera, renderer.domElement); // 实例化轨道控制器
controller.autoRotate = true; // 开启自动旋转
const geometry = new THREE.CylinderGeometry(1, 1, 3); // 创建圆柱形几何体 : 顶、底、高
// 用图片做纹理贴图(要求图片与页面同源或异域图片支持跨域)
const texture = new THREE.TextureLoader().load('https://638183.freep.cn/638183/Pic/xuehua.jpg', () => {
renderer.render(scene, camera); // 立即渲染,否则一开始是黑色效果
});
// 创建材质
const material = new THREE.MeshBasicMaterial({
color: 'gold', // 颜色(会改变影响纹理贴图)
map: texture, // 使用上面创建的纹理贴图
transparent: true, // 开启透明度
opacity: 0.5 // 不透明度(透明度 = 1 - opacity)
});
const cylinder = new THREE.Mesh(geometry, material); // 创建圆柱网格对象
scene.add(cylinder); // 圆柱网格对象加入到场景
//renderer.render(scene, camera); // 至此已经可以将静态效果渲染出来
// 动画函数
const animate = () => {
requestAnimationFrame(animate); // 请求关键帧动画递归调用函数自身
controller.update(); // 更新轨道控制器令其自转
renderer.render(scene, camera); // 渲染效果
};
animate(); // 运行动画
window.onresize = () => renderer.setSize(window.innerWidth, window.innerHeight);
</script>
|