Threejs创建圆环结

baker_zhuang

已于 2024-11-18 09:07:29 修改

阅读量327

点赞数 10

分类专栏： ThreeJs 文章标签： Threejs 数字孪生 web3D

于 2024-09-14 10:18:17 首次发布

本文链接：https://blog.youkuaiyun.com/qq_26881073/article/details/142251183

版权

上一章节实现了圆环的绘制，这节来绘制一个和圆环很相近的立体模型：圆环结，圆环结在真实数字孪生场景应用不多，但会常用于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.