上一章节实现了圆环结的绘制，这节来绘制胶囊体，胶囊体就是胶囊的形状，上下是一个半球，中间是一个圆柱体，如上文一样，先要创建出基础的组件，包括场景，相机，灯光，渲染器。代码如下：
initScene() {
this.scene = new THREE.Scene();//创建一个Scene场景
},
initLight(){
const light = new THREE.DirectionalLight(0xffffff, 1);//创建一个灯光
this.scene.add(light)
},
initCamera(){
//创建一个透视相机，视角为45度，宽高比为window窗口的宽高比，0.1为近面，10000为远面
this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
this.camera.position.set(50,50,50);//设置相机位置
this.camera.lookAt(0,0,0);//设置相机位置
},
initRenderer(){//初始化渲染器
this.renderer = new THREE.WebGLRenderer({ antialias: true });
this.container = document.getElementById("container");//获取容器
this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);//设置渲染器的大小
this.container.appendChild(this.renderer.domElement);//将渲染器添加到容器中
this.renderer.setClearColor('#FFFFFF', 1.0);//设置背景颜色
},
initOrbitControls(){ //创建鼠标控制工具
this.orbitControls = new OrbitControls(this.camera, this.renderer.domElement);//创建控制器
},
initAnimate() { //循环渲染
requestAnimationFrame(this.initAnimate);
this.renderer.render(this.scene, this.camera);
},
胶囊形状由一个圆柱体和两个半球组成。它在三维空间中呈现出一种流畅且具有一定实用性的形状。
- 圆柱体部分提供了主体的长度和粗细，可以通过参数调整其高度和半径。
- 两端的半球使得整体形状更加平滑，减少了尖锐的边角。
CapsuleGeometry的构造函数参数如下：
radius：胶囊圆柱体部分的半径。决定了胶囊的粗细程度。height：胶囊的总高度，包括圆柱体部分的高度和两个半球的直径之和。这个参数可以控制胶囊的整体长度。
代码如下：
//胶囊模型
initCapsuleGeometry(){
const geometry = new THREE.CapsuleGeometry( 1, 1, 4, 8 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
const capsule = new THREE.Mesh( geometry, material );
this.scene.add( capsule );
},
但是因为颜色会纯色，看不出立体效果，我们将材质修改为只显示框架，只需要将材质修改为：
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00, wireframe:true} );
