本文在前节的基础上，介绍three.js其它的内置几何体。
一、准备代码// 引入Three.js库的全部功能，并将其命名为THREE
import * as THREE from 'three';
// 引入交互控制器
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
// 创建一个场景
const scene = new THREE.Scene();
// 创建一个透视相机，参数分别为视野角度、视口宽高比、近端距离、远端距离
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 创建一个WebGL渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器的大小为窗口的宽度和高度
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器的canvas元素添加到HTML文档中的body标签中
document.body.appendChild(renderer.domElement);
//------------- 下面放创建几何体的代码 -----------------------
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const myGeometry = new THREE.Mesh(geometry, material);
scene.add(myGeometry);
//--------------- 创建几何体代码结束 --------------------------
// 创建一个平行光源
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1).normalize(); // 设置光源的方向
scene.add(directionalLight);
const controls = new OrbitControls(camera, renderer.domElement);
camera.position.z = 5;
// 创建一个动画函数
function animate() {
// 请求下一帧动画
requestAnimationFrame(animate);
// 更新 OrbitControls
controls.update();
myGeometry.rotation.x = 0.01;
myGeometry.rotation.y = 0.01;
// 渲染场景
renderer.render(scene, camera);
}
animate()
在上面的示例代码里，注释部分 下面放创建几何体的代码到 创建几何体代码结束之间是放后续示例代码的位置。
示例中使用了一个平行光源，关于光源的使用方法在后续章节详细介绍。
二、 three.js 更多几何体的介绍1. 胶囊几何体（CapsuleGeometry）2.1.1 胶囊几何体说明胶囊几何体是一种有球形顶端和圆柱形部分组合的几何体。
其构造函数：
THREE.CapsuleGeometry(radiusTop, radiusBottom, height, radialSegments, heightSegments, cappedTop, cappedBottom, thetaStart, thetaLength)
参数说明：
- radiusTop： 胶囊体顶部的半径；
- radiusBottom： 胶囊体底部的半径；
- height： 胶囊体的总高度；
- radialSegments（径向分段数）： 胶囊体周围的圆柱部分的分段数；
- heightSegments（高度分段数）： 胶囊体的高度上的分段数；
- cappedTop（是否有顶部）： 一个布尔值，指示是否有胶囊体的顶部；
- cappedBottom（是否有底部）： 一个布尔值，指示是否有胶囊体的底部；
- thetaStart（起始角度）： 胶囊体的起始角度，用弧度表示；
- thetaLength（角度范围）： 胶囊体的角度范围，用弧度表示。
const geometry = new THREE.CapsuleGeometry( 1, 1, 4, 8 );
const material = new THREE.MeshPhongMaterial( {color: 0x00ff00} );
const myGeometry = new THREE.Mesh( geometry, material ); scene.add( myGeometry );
运行效果：
本示例中使用了一个新的材质 ： MeshPhongMaterial，这种材质基于 Phong 反射模型，用于模拟物体表面的光照和阴影。 关于材质的具体使用方式也在后续章节详细介绍。
通过增加 radialSegments 分段数，可以看到球体变得更圆滑：
圆锥体是一种具有尖顶和圆锥底部的几何体。 构造函数如下：
THREE.ConeGeometry(radius, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength)
其参数说明：
- radius： 圆锥体底部的半径；
- height： 圆锥体的总高度；
- radialSegments（径向分段数）： 圆锥体周围的圆环部分的分段数；
- heightSegments（高度分段数）： 圆锥体的高度上的分段数；
- openEnded（是否开口）： 一个布尔值，指示圆锥体是否是开口的，如果为 true，则表示开口；
- thetaStart（起始角度）： 圆锥体的起始角度，用弧度表示；
- thetaLength（角度范围）： 圆锥体的角度范围，用弧度表示。
const geometry = new THREE.ConeGeometry( 1, 1, 20, 40 );
const material = new THREE.MeshPhongMaterial( {color: 0x00ff00} );
const myGeometry = new THREE.Mesh( geometry, material ); scene.add( myGeometry );
运行效果：
十二面体是一种具有 12 个面的多面体。DodecahedronGeometry 的构造函数的参数如下：
THREE.DodecahedronGeometry(radius, detail)
参数说明：
- radius（半径）： 十二面体的外接球的半径；
- detail（细分层级）： 控制几何体的细分层级，可以是整数值，表示将每个三角面细分为更小的三角形的次数。默认值为 0。
当detail值非0时，几何体每个面会被分成更多的三角形，以致于detail比较大的时候，展现出来的几何体会像个球体。
2.3.2 示例代码const radius = 2;
const detail = 0;
const dodecahedronGeometry = new THREE.DodecahedronGeometry(radius, detail);
const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
const myGeometry = new THREE.Mesh(dodecahedronGeometry, material);
scene.add(myGeometry);
运行效果：
