three.js几何体之圆柱缓冲几何体
圆柱缓冲几何体（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>
前一篇: three.js : 独立控制图形对象
下一篇: three.js几何体之十二面体
发表评论:
评论列表 [0条]
