文章目录

• 1.基本配置
• 2.基本概念
• 3.Api
• 4.实现一个旋转动画

1.基本配置

（1）安装

​ npm install three

（2）引入

import * as THREE from 'three'

2.基本概念

Three.js是基于原生WebGL封装运行的三维引擎。

（1）一个简单的小实例

​ 运行项目之后，可以在浏览器中看到一个立体正方体的效果。

3.Api

（1）几何体GeoMetry

// 创建一个几何对象GeoMetry
const geometry = new THREE.BoxGeometry(100,100,100); // 可以创建出一个正方体

​ 当然可以以将第一个参数改为50，然后会显示一个长方体的形状。

// 创建一个几何对象GeoMetry
const geometry = new THREE.BoxGeometry(50,100,100); // 可以创建出一个长方体

​ 又或者改为new THREE.SphereGeometry(60,40,40)，则会渲染成一个球体形状。

// 创建一个几何对象GeoMetry
const geometry = new THREE.SphereGeometry(60,40,40); // 创建一个球体

（2）材质Material

const material = new THREE.MeshLambertMaterial({color: 0x0000ff
}); // 材质对象material

​ 设置用于几何体的材质对象，通常包含颜色、透明度等属性。

（3）光源Light

const point = new THREE.PointLight(0xffffff);

​ 其中，参数0xffffff是光照强度

（4）相机Camera

const camera = new THREE.OrthographicCamera(-s*k, s*k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); // 相机位置设置
camera.lookAt(scene.position); // 设置相机方向（指向的场景对象）

​ 创建了一个正射投影的摄像机。

4.实现一个旋转动画

​ 这里主要用到了mesh的rotateY()方法，这个方法可以使模型对象沿Y轴旋转。然后动画依托setInterva实现每20ms执行一次渲染，也就是1秒钟进行50次渲染，最后可以获得一个平滑的旋转效果。

const render = () => {// 执行渲染操作，指定场景和摄像机renderer.render(scene,camera); mesh.rotateY(0.01);
}setInterval(render,20);

（1）渲染频率

​ 使用.render()方法进行渲染，渲染的频率不能太低，否则会感觉到明显的卡顿，比如setInterval(render,200)，动画会有不流畅的感觉；也不能设置的太高，否则硬件设备的性能会跟不上。通常设置为30~60的频率，可以兼顾性能和视觉体验。

（2）使用requestAnimationFrame()函数实现动画

​ 除了使用setInterval实现动画之外，还可以使用requestAnimationFrame()函数，它同样是window对象的方法。requestAnimationFrame()不会立即调用函数而是向浏览器发起一个执行某函数的请求，什么时候执行由浏览器决定，一般默认会保持60FPS的频率，大约每16.7ms调用一次。

const render = () => {// 执行渲染操作，指定场景和摄像机renderer.render(scene,camera); mesh.rotateY(0.01);requestAnimationFrame(render);//请求再次执行渲染函数render
}

（3）均匀旋转

​ 在实际运行的时候，requestAnimationFrame()可能并不会按照我们实际期望的60FPS执行，两次执行渲染函数的时间也不一定相同，如果执行旋转命令的时间间隔不同，旋转运动就会不均匀。因此需要记录上一次的执行时间，来进行调整。

let t0 = new Date();
const render = ()=> {const t1 = new Date();const t = t1 - t0;t0 = t1;requestAnimationFrame(render);//请求再次执行渲染函数render// 执行渲染操作，指定场景和摄像机renderer.render(scene,camera); mesh.rotateY(0.001);
}render();