ThreeJS —— 机房Demo（五）_threejs智慧库区demo

作者：很楠不爱3 | 2024-05-01 20:40:35

踩

threejs智慧库区demo

ThreeJS —— 机房Demo（五）

目录结构
性能优化
重构为 CommonJS 规范

上一节我们基本完成了我们Demo所需要的所有功能，离成功只差最后一步 —— 性能优化！

目录结构

性能优化

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();

// 后续代码中如要使用，直接用变量名即可，因为放入了全局变量
1
2
3
4
5
6
7
8
9
10
11

利用 clone 方法复用

Demo中有很多几何体都是同一种类型，只是他们的位置不一样，所以我们可以通过 Mesh 的 clone 方法实现复用的目的，复用后修改位置即可

// 在 create_fn.js 中构建一个 createClone 方法
// create_fn.js
function createClone(mesh, conf) {
   
  const newMesh = mesh.clone();
  initConfig(newMesh, conf);
  return newMesh;
}
1
2
3
4
5
6
7
8

在入口文件 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 },
          });
          // ...
        }

        // ...
      })(
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/520667