你知道 three.js 吗
这段时间，开发的项目从数据表格，跨越到 echarts 图表，两种不同的展现形式，都可以直观的分析数据之间的相互关系，但是 echarts 图表看起来会更形象一点，并且页面展现也很好看。当时想如果在页面中添加一些3D的图形，会不会变得不同，比如 github 首页的地球展示，怀揣一些好奇心，尝试着先看看这些图形及动效是怎么做的，是通过什么实现的？
这时 threejs 出现在眼前，three.js 是 JavaScript 编写的 WebGL 第三方库，可以用它创建各种三维场景，其中包括了摄影机、光影、材质等各种对象。直接对 WebGL 中的原生 Api 进行研究，还是有一定难度的，会涉及图形处理等。对于传统 js 的开发人员，threejs 中涉及的一些概念也是很新颖的，比如什么是几何体、材质、场景、相机、渲染器、控制器等。
实际上创建 3D 图形的过程可以想象成拍照，在一个大场景中，首先准备一个相机，设置相机参数，调整窗口的大小或远近，让物体尽可能呈现在视野中，再添加光源，使物体产生不同的阴影效果。
场景
这时必须创建的，接下来的物体、坐标系等需要调用 add 方法添加到场景中去。 ``` import * as THREE from "three";
this.scene = new THREE.Scene(); ```
相机
相机就像人的眼睛，在视角内的物体，都可以被捕捉到，这里有近端面和远端面的配置，就好比能人能看到最近的位置以及最远的位置。
// width、height为画布宽高
setCamera() {
this.camera = new THREE.PerspectiveCamera(
75, // 相机视角
this.width / this.height, // 长宽比例
0.1, // 近端面位置
1000 // 远端面位置
);
// 设置相机位置
this.camera.position.set(0, 0, 10);
}
物体
添加一个球体，可以内置对象通过 SphereGeometry 实例直接生成。
setSphere() {
const geometry = new THREE.SphereGeometry(1, 20, 20);
const material = new THREE.MeshBasicMaterial();
const sphere = new THREE.Mesh(geometry, material);
this.scene.add(sphere);
}
添加完这三个要素，要在页面上呈现 3D 物体，则需要关键一步，通过 WebGLRenderer 函数进行渲染处理，将生成的canvas，及 domElement 属性，添加到创建的 dom 容器中，this.container。
setRender() {
this.renderer = new THREE.WebGLRenderer({
antialias: true, // 抗锯齿
});
// 设置渲染的尺寸大小
this.renderer.setSize(this.width, this.height);
// 投射阴影
this.renderer.shadowMap.enabled = true;
this.container?.appendChild(this.renderer.domElement);
}
控制器
为了更方便的查看物体，及判断物体坐标位置，我们还需要添加辅助坐标系及轨道控制器，实现鼠标拖动360度旋转查看，如上图，坐标系中红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴。
这里我们先了解一下三维坐标系，分为左手坐标系和右手坐标系。
WebGL 和 Three.js 使用的坐标系是右手坐标系，即右手伸开，拇指为 X 轴，食指为 Y 轴，手心为 Z 轴。
``` import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
setControls() { // 创建轨道控制器 this.controls = new OrbitControls(this.camera, this.renderer.domElement); // 设置控制器阻尼，让控制器更有真实效果,必须在动画循环里调用.update()。 this.controls.enableDamping = true;
// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
this.scene.add(axesHelper);
}
每次旋转或放大操作都需要重新渲染，因此需要重复函数调用不断的更新物体，用到 `requestAnimationFrame` 函数。
animate() {
this.controls.update();
this.renderer.render(this.scene, this.camera);
// 渲染下一帧的时候就会调用render函数
requestAnimationFrame(this.animate.bind(this));
}
```
平行光和点光源
threejs 还可以模拟物体在光照下的阴影效果，但是需要满足几点条件：
- 材质满足能够对光照有反应，例如使用 MeshStandardMaterial 创建物体材料，而不是MeshBasicMaterial。
const material = new THREE.MeshBasicMaterial(); - 渲染器开启阴影计算
this.renderer.shadowMap.enabled = true; - 光照投射阴影
- 球投射阴影
- 平面接受阴影
首先添加光源，两者选择一个即可
- 平行光
setLight() {
const light = new THREE.AmbientLight(0xffffff, 0.5);
this.scene.add(light);
// 平行光投射阴影
const directLight = new THREE.DirectionalLight(0xffffff, 0.5);
directLight.position.set(10, 10, 10);
directLight.castShadow = true; // 投射阴影
directLight.shadow.radius = 5;
this.scene.add(directLight);
}
- 点光源
setLight() {
// 点光源投射阴影
const pointLight = new THREE.PointLight(0xffffff, 1);
const smallPoint = new THREE.Mesh(
new THREE.SphereGeometry(0.2, 20, 20),
new THREE.MeshStandardMaterial()
);
smallPoint.position.set(2, 2, 2);
smallPoint.add(pointLight);
this.scene.add(smallPoint);
}
有平行光和物体，还需新增一个面板接受阴影，便于观察阴影效果
setPlane() {
const geometry = new THREE.PlaneGeometry(10, 10);
const material = new THREE.MeshStandardMaterial();
const plane = new THREE.Mesh(geometry, material);
// 修改面板位置
plane.position.set(0, -1, 0);
plane.rotation.x = -Math.PI / 2;
// 接收阴影
plane.receiveShadow = true;
this.scene.add(plane);
}
我们看下：
总结
去学习和使用 threejs 的过程还是挺有趣的，可以了解一下 WebGL 的知识及坐标系等，接下来可以继续把地球再创建出来，给它添加贴图、纹理等，使其更加细腻。