ThreeJS —— 机房Demo(五)
上一节我们基本完成了我们Demo所需要的所有功能,离成功只差最后一步 —— 性能优化!
目录结构
├── font // 字体文件
|├──── font.ttf // 字体源文件
|└──── font.json // 转换后的字体文件
├── img // 素材图片
|├──── xx.png
|├──── xxx.jpg
|└──── …
├── js // 自己编写的js文件
|├──── common_fn.js // 公共部分
|├──── composer_fn.js // 后期处理
|├──── create_fn.js // 创建各种几何
|├──── init_fn.js // 初始化项目
|└──── util_fn.js // 工具函数
├── lib // 需要引入的js文件
|├──── three.js
|├──── OrbitControls.js
|├──── RenderPass.js
|└──── …
├── model // 建模工具导出的模型
|├──── computer.gltf
|└──── …
└── index.html // 入口文件
性能优化
ThreeJS常用性能优化方法
提取公共部分
在构建Demo的过程,我们需要创建很多几何体 Geometry 和材质 Material,以及一些 Loader 等等,这些资源都是可以单独提取成公共部分的
// 创建一个common_fn.js,放在js目录下
// common_fn.js
// MeshBasicMaterial 这个材质经常使用,并且该黑色材质被多次使用
const blackBasicMaterial = window.blackBasicMaterial = new THREE.MeshBasicMaterial({
color: "black" });
// TextureLoader 也是一个常用的 Loader,先创建一个实例出来供后面共用(这里也是参考了享元模式)
const textureLoader = window.textureLoader = new THREE.TextureLoader();
// 后续代码中如要使用,直接用变量名即可,因为放入了全局变量
利用 clone 方法复用
Demo中有很多几何体都是同一种类型,只是他们的位置不一样,所以我们可以通过 Mesh 的 clone 方法实现复用的目的,复用后修改位置即可
// 在 create_fn.js 中构建一个 createClone 方法
// create_fn.js
function createClone(mesh, conf) {
const newMesh = mesh.clone();
initConfig(newMesh, conf);
return newMesh;
}
在入口文件 index.html 中使用
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<div id="canvas-frame"></div>
<script>...</script>
<script>
// ...
(async function () {
// scene场景的公共内容,用于后面 createClone 公用
const earth = createEarth({
position: {
x: -15, y: -1 } });
const machine = createMachine("./img/move.png", {
position: {
x: 15, z: -20, y: -5 },
});
// scene场景的第一组内容
let group1, group1Animate;
{
const earth2 = createClone(earth, {
position: {
x: 15, y: -1 } });
const machine2 = createClone(machine, {
position: {
x: -15 },
});
// ...
}
// scene场景的第二组内容
{
const earth1 = createClone(earth, {
position: {
x: 0, z: -10, y: -1.1 },
});
const machine1 = createClone(machine, {
position: {
x: 0, y: -5, z: 10 },
});
// ...
}
// ...
})();
</script>
</body>
</html>
减少 animate 内容
之前我们的 animate 方法中有如下内容: