ThreeJS —— 机房Demo（五）

最新推荐文章于 2024-07-11 11:22:46 发布

Gvonte

最新推荐文章于 2024-07-11 11:22:46 发布

阅读量1.7k

点赞数 1

分类专栏：学习ThreeJS 文章标签： javascript 前端 3d 可视化 webgl

本文链接：https://blog.csdn.net/weixin_41998030/article/details/106621732

版权

本文详细介绍了ThreeJS机房Demo的性能优化策略，包括提取公共部分、利用clone方法复用资源、减少animate内容、模型优化、字体优化、减少请求次数以及重构为CommonJS规范。通过这些方法，提高了Demo的运行效率和加载速度。

摘要由CSDN通过智能技术生成

上一节我们基本完成了我们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();

// 后续代码中如要使用，直接用变量名即可，因为放入了全局变量

利用 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 方法中有如下内容：

最低0.47元/天解锁文章

Gvonte

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ThreeJS —— 机房Demo（五）

ThreeJS —— 机房Demo（五）目录结构性能优化提取公共部分利用 clone 方法复用减少 animate 内容引入模型优化上一节我们基本完成了我们Demo所需要的所有功能，离成功只差最后一步 —— 性能优化！目录结构├── font // 字体文件 |├──── font.ttf // 字体源文件 |└──── font.json // 转换后的字体文件├── img // 素材图片 |├──── xx.png |├──── xxx.jpg
复制链接

扫一扫