渲染三维对象

1.初始化画布

初始化画布分为以下几个步骤

1. 创建一个场景Scene
2. 创建一个相机Camera
   1. 设置相机的位置
3. 创建一个渲染器WebGLRenderer
   1. 设置渲染尺寸
4. 将渲染元素也就是canvas元素添加到body元素内

const scene = new THREE.Scene();   			// 创建一个场景

const camera = new THREE.PerspectiveCamera(  // 创建一个相机
    45,
    innerWidth / innerHeight,
    1,
    1000
);
camera.position.set(0, 0, 20); 				// 设置相机的位置

const renderer = new THREE.WebGLRenderer();	// 创建一个渲染器
renderer.setSize(innerWidth, innerHeight);	// 设置渲染尺寸
document.body.append(renderer.domElement);	// 将渲染元素也就是canvas元素添加到body元素内，

1.1 创建场景

场景scene也就是一个舞台，threejs中所有的物体都要在这个场景中呈现

const scene = new THREE.Scene();

若需要向场景中添加元素，需要使用add()方法

const scene = new THREE.Scene(); 

/*
 	假装创建了一个名为Box的物体
*/

scene.add(Box)

1.2 透视投影相机

想要在场景中看到我们添加的元素，需要一双”眼睛“，相机就是模拟我们的眼睛，透视投影相机（PerspectiveCamera）是比较常用的相机，除此之外还有正投影相机（OrthographicCamera）

// 实例化一个透视投影相机对象
const camera = new THREE.PerspectiveCamera( fov, aspect, near, far);

参数：

• fov：相机视锥体竖直方向视野角度，默认值50
• aspect：相机视锥体水平方向和竖直方向长度比，一般设置为Canvas画布宽高比width / height，默认值1
• near：相机视锥体近裁截面相对相机距离，默认值0.1
• far：相机视锥体远裁截面相对相机距离，far-near构成了视锥体高度方向，默认值2000

透视投影相机的四个参数fov, aspect, near, far构成一个四棱台3D空间，被称为视锥体，只有视锥体之内的物体，才会渲染出来，视锥体范围之外的物体不会显示在Canvas画布上。

1.2.1 设置相机位置

想要观察一个物体，肯定不能在一个位置不动，相机对象Camera具有位置属性.position，通过位置属性.position可以设置相机的位置。

camera.position.set(200, 200, 200);

set的三个参数分别代表在三维坐标系中的三个方向，x、y、z

1.2.2 观察特定方向

若想让相机固定观察一个点，或者物体，可以使用lookAt()方法

//相机观察目标指向Threejs 3D空间中某个位置
camera.lookAt(0, 0, 0); //坐标原点
camera.lookAt(0, 10, 0);  //y轴上位置10
camera.lookAt(mesh.position);//指向mesh对应的位置

1.3 渲染器

有了场景和相机，还需要有个渲染器，把物体不停的往场景中渲染，这样我们才能看到3D的效果

通过WebGL渲染器WebGLRenderer可以实例化一个WebGL渲染器对象。

const rendeer = new THREE.WebGLRenderer();

我们的canvas元素就存在于渲染器中，可以使用setSize()方法设置canvas的尺寸

renderer.setSize(800, 500); //设置three.js渲染区域的尺寸(像素px)

canvas元素可通过renderer.domElement获取，我们需要把canvas添加到我们需要的位置，若是全屏项目可以添加到body元素中

document.body.appendChild(renderer.domElement);

也可以单独添加到别的HTML元素中

<div class="box"></div>

<script>
document.querySelecter('.box').appendChild(renderer.domElement);
</script>

最后需要使用render()方法把内容渲染到canvas元素中，并且传入上面的场景和相机作为参数

renderer.render(scene, camera)

若我们设置了动画，则需要使用requestAnimationFrame()函数，在每一帧都调用render()函数

const animation = () => {
    requestAnimationFrame(animation)
    cube.rotation.x -= 0.01
    cube.rotation.y -= 0.01
    renderer.render(scene, camera)
}
animation()

2.创建并添加几何体

创建并添加几何体分为以下几个步骤

1. 创建几何体对象
2. 创建几何体材质
3. 创建几何体物体，把几何体和材质关联起来
4. 把几何体物体添加到场景中

const cubeGeometry = new THREE.BoxGeometry(2, 2, 2);		// 添加一个立方体几何对象
const cubeMaterial = new THREE.MeshBasicMaterial({			// 创建材质
    color: 0xff0000,
    wireframe: true,
});
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);	// 创建物体
scene.add(cube);// 把物体添加到场景中

以上代码添加了一个立方体（BoxGeometry），并且使用网格基础材质（MeshBasicMaterial），最终使用网格模型（Mesh），调用场景的add()方法添加到场景中

Three.js提供了各种各样的几何体以及材质，可详细查看几何体、材质、物体

3.创建动画

根据不同需求，我们可以给几何体添加动画，使用requestAnimationFrame()函数

const animation = () => {// 创建动画
    requestAnimationFrame(animation);
    cube.rotation.x -= 0.01;
    cube.rotation.y -= 0.01;
    renderer.render(scene, camera);
};
animation();

4.总结

const scene = new THREE.Scene();   			// 创建一个场景

const camera = new THREE.PerspectiveCamera(  // 创建一个相机
    45,
    innerWidth / innerHeight,
    1,
    1000
);
camera.position.set(0, 0, 20); 				// 设置相机的位置

const renderer = new THREE.WebGLRenderer();	// 创建一个渲染器
renderer.setSize(innerWidth, innerHeight);	// 设置渲染尺寸
document.body.append(renderer.domElement);	// 将渲染元素也就是canvas元素添加到body元素内，


const cubeGeometry = new THREE.BoxGeometry(2, 2, 2);		// 添加一个立方体几何对象
const cubeMaterial = new THREE.MeshBasicMaterial({			// 创建材质
    color: 0xff0000,
    wireframe: true,
});
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);	// 创建物体
scene.add(cube);// 把物体添加到场景中


const animation = () => {// 创建动画
    requestAnimationFrame(animation);
    cube.rotation.x -= 0.01;
    cube.rotation.y -= 0.01;
    renderer.render(scene, camera);
};
animation();

效果如下