ThreeJs模拟工厂生产过程三

baker_zhuang

已于 2024-11-19 09:27:39 修改

阅读量491

点赞数 5

分类专栏： ThreeJs 文章标签：前端 javascript html Threejs

于 2024-04-25 16:56:35 首次发布

本文链接：https://blog.youkuaiyun.com/qq_26881073/article/details/138192680

版权

本文介绍了在Three.js中如何处理大量车间模型导致的浏览器卡顿问题，通过模型合并技术，如使用`mergeGeometries`函数，将传送带圆柱体合并为单个模型，从而显著减少渲染时的性能负担，确保更好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上节课绘制了车间模型，但是车间里只有一条产线，这节把产线多铺设几条，放满整个车间，但是随着放满车间吗，也就意味着要创建更多的模型，而更多的模型会导致浏览器卡顿，所以这个节讲如何做模型合并，模型合并不是简单的创建group，把模型放到group中，这样只是把模型分组，但还不是给模型合并，模型合并是吧多个模型合并成一个模型。

首先接着上面的代码，首先打开性能检测功能：需要引入stats，在创建场景中加到页面body中，并在initAnimate中实时更新stats的FPS的值，

import Stats from 'three/addons/libs/stats.module.js';
initScene(){//初始化场景
      this.scene = new THREE.Scene();//创建场景
      //创建坐标辅助
      const axesHelper = new THREE.AxesHelper( 100 );
      axesHelper.position.set(0,0,0)
      this.scene.add( axesHelper );
      //创建性能监控
      this.stats = new Stats();
      document.body.appendChild(this.stats.domElement);
    },



initAnimate() {//创建动画
      this.stats.update();
      requestAnimationFrame(this.initAnimate);
      this.renderer.render(this.scene, this.camera);
      if(this.boxList.length>0){
        this.boxLis