three.js几何体之胶囊图形几何体
胶囊图形几何体（CapsuleGeometry）CapsuleGeometry是一个胶囊图形类，通过半径和高度来进行构造。构造器：
CapsuleGeometry(radius : Float, height : Float, capSegments : Integer, radialSegments : Integer, heightSegments : Integer)
其中：
radius — 胶囊半径。可选的; 默认值为1
height — 中间区域的高度。可选的; 默认值为1
capSegments — 构造盖子的曲线部分的个数。可选的; 默认值为4
radialSegments — 覆盖胶囊圆周的分离的面的个数。可选的; 默认值为8
heightSegments — 胶囊侧面沿其高度的段数，默认值为 1
下面的示例，我们用胶囊几何体+基础材质画一个线框立体图案：
<div style="position: absolute;color: #eee;margin: 10px;">可以使用鼠标操作图像</div>
<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; // 场景
scene.background = new THREE.Color('rgba(40,40,40,0.5)'); // 场景背景色
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); // 实例化轨道控制器
const geometry = new THREE.CapsuleGeometry(1, 1, 4, 8);; // 胶囊图形几何体
// 基础材质 ：颜色+线框
const material = new THREE.MeshBasicMaterial({
color: 'cyan',
wireframe: true
});
const capsule = new THREE.Mesh(geometry, material); // 创建胶囊对象 : 几何体+材质
scene.add(capsule); // 胶囊对象加入到场景
// renderer.render(scene, camera); // 至此已经可以将效果渲染出来
// 动画函数
const render = () => {
requestAnimationFrame(render); // 请求关键帧动画递归调用函数自身
controller.update(); // 更新控制器
renderer.render(scene, camera); // 渲染效果
};
render(); // 运行动画
window.onresize = () => renderer.setSize(window.innerWidth, window.innerHeight);
</script>
前一篇: three.js几何体之圆形缓冲几何体
下一篇: three.js几何体之圆锥缓冲几何体
发表评论:
评论列表 [0条]
