文章目录
- 1.基本配置
- 2.基本概念
- 3.Api
- 4.实现一个旋转动画
1.基本配置
（1）安装
npm install three
（2）引入
import * as THREE from 'three'
2.基本概念
Three.js是基于原生WebGL封装运行的三维引擎。
（1）一个简单的小实例
<script setup>
import * as THREE from 'three'
/**
* 创建场景对象
*/
const scene = new THREE.Scene();
/**
* 创建网格模型
*/
// const geometry = new THREE.SphereGeometry(60,40,40); 创建一个球体几何对象
const geometry = new THREE.BoxGeometry(100,100,100); // 创建一个立方体几何对象
const material = new THREE.MeshLambertMaterial({
color: 0x0000ff
}); // 材质对象material
const mesh = new THREE.Mesh(geometry,material); // 网格模型对象Mesh
scene.add(mesh);
/**
* 光源设置
*/
// 点光源
const point = new THREE.PointLight(0xffffff);
point.position.set(400,200,300); // 点光源位置
scene.add(point); // 将点光源添加到场景中
// 环境光
const ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
/**
* 相机设置
*/
let width = window.innerWidth; // 窗口宽度
let height = window.innerHeight; // 窗口高度
let k = width/height; // 窗口宽高比
let s = 200; // 三维场景显示范围控制系数，系数越大，显示的范围越大
//创建相机对象
const camera = new THREE.OrthographicCamera(-s*k, s*k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); // 相机位置设置
camera.lookAt(scene.position); // 设置相机方向（指向的场景对象）
/**
* 创建渲染器对象
*/
const renderer = new THREE.WebGL1Renderer();
renderer.setSize(width,height); // 设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff,1); // 设置背景颜色
document.body.appendChild(renderer.domElement); // body元素中插入canvas对象
// 执行渲染操作，指定场景和摄像机
renderer.render(scene,camera);
</script>
<template>
</template>
<style scoped>
</style>
运行项目之后，可以在浏览器中看到一个立体正方体的效果。
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();
