上一章节实现了圆环的绘制，这节来绘制一个和圆环很相近的立体模型：圆环结，圆环结在真实数字孪生场景应用不多，但会常用于AR宣传，广告，建筑设计等领域，使得看起来更有立体和科技感，如上文一样，先要创建出基础的组件，包括场景，相机，灯光，渲染器。代码如下：
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);
},
圆环结是由多个相互交织的圆环组成的复杂 3D 结构。我们可以将其看作是多个圆环在特定的位置和角度上进行组合和缠绕而成。Three.js 中的 TorusKnotGeometry 类专门用于创建圆环结。它接受一些参数来控制圆环结的形状和大小。参数列表如下：
- radius - 圆环的半径。默认值为
1。 - tube — 管道的半径。默认值为
0.4。 - tubeSegments — 默认值为
64。 - radiusSegments — 默认值为
8。 - p — 该值决定几何体绕其旋转对称轴旋转的次数。默认值为
2。 - q — 此值决定几何体在圆环内部绕一圈的次数。默认值为
3。
代码如下：
//创建环形纽结
initTorusKnotGeometry(){
// 创建环形纽结，圆环的半径为10，环的半径为3，分段数100，环的分段数16
const geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const torusKnot = new THREE.Mesh( geometry, material );
this.scene.add( torusKnot );
},
最终效果显示如下：
但是因为颜色会纯色，看不出立体效果，我们将材质修改为只显示框架，只需要将材质修改为：
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 ,wireframe:true} ); //材质
