ThreeJs除了创建基本的长方体,球形,圆柱等几何体,也可以创建一些特殊的几何体,比如圆环,多边体,这节就来讲怎么用Threejs绘制出圆环。首先依然是要创建出基础的组件,包括场景,相机,灯光,渲染器。代码如下:
这里还加上了鼠标控制,方便创建圆环之后更直观的观察它。
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, t