专栏首页前端之攻略threejs 场景切换 优化性能

threejs 场景切换 优化性能

一、实现目标

是实现2个场景的定时切换,由于是用在大屏系统,需要浏览器一直能正常运行,不能运行一段时间卡死

二、遇到的问题

首先遇到的是发现切换几次场景GPU越来越高,然后就慢慢卡死,并且随着运行时间越来越长,cpu也越来越高,最终浏览器崩溃

三、解决方法

由于使用的是vue,在组件销毁之前,把场景中的物体销毁,定时器清空,定时器、场景、控制器、渲染器等都赋值为null ,便于垃圾回收,切换场景的时候定时器设置的时间不能太短,不能及时回收释放内存,最后浏览器崩溃。发现加载的图片纹理是比较影响GPU的,一定要把物体的 geometry 和 material 销毁,下面是立方体的销毁的例子,6个面的材质都要销毁

    clearCache(obj){
      let mesh = obj
      mesh.geometry.dispose()
      mesh.material[0].dispose()
      mesh.material[1].dispose()
      mesh.material[2].dispose()
      mesh.material[3].dispose()
      mesh.material[4].dispose()
      mesh.material[5].dispose()
    },
  beforeDestroy() {
    console.log("leave scene")
    this.clearCache(this.cube)    
    this.cube = null
    window.removeEventListener("click",this.clickHandle,false)
    cancelAnimationFrame(this.myReq);
    clearInterval(this.timer);
    this.timer = null
    this.scene = null;   
    this.camera = null;    
    this.labelRenderer = null;
    this.controls = null;

    this.renderer.dispose();
    this.renderer.forceContextLoss();
    this.renderer.context = null;
    this.renderer.domElement = null;
    this.renderer = null;
  },

场景切换的代码,定时器要设置长一些,最少一分钟,因为每个场景都有定时器,并且使用了 cancelAnimationFrame 比较耗性能,切换场景的时候不是立即垃圾回收,定时器时间太短的话,还没有回收,又有新的场景需要耗性能

  mounted() {
    // this.currentView = ()=> import("./scene1.vue")
    this.currentView = scene2;
    let scenes = [scene1, scene2];
    let i = 0;
    let changeSceneTimer = null;
    let that = this;
    function autoChangeScene() {
      console.log(i);
      if(changeSceneTimer){
       clearTimeout(changeSceneTimer);
       changeSceneTimer=null
      }
      changeSceneTimer = setTimeout(() => {
        i++;
        if ((i == scenes.length)) {
          i = 0;
        }
        that.currentView = scenes[i];
        that.currentLiIndex = i;
        autoChangeScene();
      }, 100000);
    }
    autoChangeScene()
  },

场景的主要代码

    <div ref="container" id="container"></div>
<template>
  <div class="wrap">
    <div ref="container" id="container"></div>
    <div class="label" style="display:none" id="test-Wrap">
    <div><span class="text-Num">测试</span>bar</div>
    </div>    
  </div>
</template>

<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import {CSS3DRenderer,CSS3DObject} from "three/examples/jsm/renderers/CSS3DRenderer.js";
import { objectEach } from 'highcharts';
export default {
  name: "ThreeTest",
  data() {
    return {
      state:1,
      preloadIimgs:[]
    };
  },
  mounted() {
    this.preloadImgs()
    this.getData();
    this.timer = null;
    this.myReq = null;
    this.container;
    this.scene;
    this.camera;
    this.renderer;
    this.labelRenderer;
    this.controls;
    this.initScene();
    this.initCamera();
    this.initRender();
    this.initModel();
    this.initControls();   
    this.animate();
    window.onresize = this.onWindowResize;   
    window.addEventListener("click",this.clickHandle,false)
  },


  methods: {
    preloadImgs(){
       let imgsArr = ["/static/lng/right1.jpg","/static/lng/left1.jpg","/static/lng/top1.jpg","/static/lng/bottom1.jpg","/static/lng/front1.jpg","/static/lng/bottom1.jpg"]
        for(let i=0;i<imgsArr.length;i++){
          let img = new Image()
          img.src = imgsArr[i]
          this.preloadIimgs.push(img)
          console.log(this.preloadIimgs)
          // img.onload = function(){
          //   cube.material[i].map.image = img
          //   cube.material[i].map.needsUpdate = true
          // }
      }
   },
    clickHandle(){     
      this.state = this.state ==0 ? 1:0
    },
    selectScene(){
	   let sceneWrap = document.getElementById("sceneWrap")
	   if(sceneWrap.style.display == "none"){
	     sceneWrap.style.display = "flex"
	   }else{
	     sceneWrap.style.display = "none"
	   }
  	},
    getData() {
      // 循环获取数据
      clearTimeout(this.timer);
      var element = document.getElementById("enter_text_Num");
      if (element) {
        element.innerHTML = Math.round(Math.random() * (70 - 60) + 60);
      }
      this.timer = setTimeout(this.getData, 2000);
    },
    initScene() {
      this.scene = new THREE.Scene();
    },
    initCamera() {
      this.container = document.getElementById("container");
      this.camera = new THREE.PerspectiveCamera(
        70,
        this.container.clientWidth / this.container.clientHeight,
        1,
        1000
      );
      console.log(this.camera);
      this.camera.position.z = 1; //z设置小写会使图像变形小
    },
    initRender: function () {
      this.renderer = new THREE.WebGLRenderer({ antialias: true });
      this.renderer.setSize(
        this.container.clientWidth,
        this.container.clientHeight
      );
      this.container.appendChild(this.renderer.domElement);

      this.labelRenderer = new CSS3DRenderer();
      this.labelRenderer.setSize(
        this.container.clientWidth,
        this.container.clientHeight
      );
      this.labelRenderer.domElement.style.position = "absolute";
      this.labelRenderer.domElement.style.top = 0;
      this.container.appendChild(this.labelRenderer.domElement);
      console.log(this.labelRenderer);
    },

    initLight() {
      this.scene.add(new THREE.AmbientLight(0xffffff));
      this.light = new THREE.DirectionalLight(0xffffff);
      //light.position.set(1,1,1);
      this.light.position.set(0, 0, 50);
      this.scene.add(this.light);
    },
    initModel() {
      var texture1 = new THREE.TextureLoader().load("/static/posxx.jpg");
      console.log(texture1);
      var texture2 = new THREE.TextureLoader().load("/static/negxx.jpg");
      var texture3 = new THREE.TextureLoader().load("/static/posyy.jpg");
      var texture4 = new THREE.TextureLoader().load("/static/negyy.jpg");
      var texture5 = new THREE.TextureLoader().load("/static/tiaoyaxiang.jpg"); //前面与后面的图片反着放
      // var texture5 = new THREE.TextureLoader().load("/static/lng/front1.jpg"); //前面与后面的图片反着放
      var texture6 = new THREE.TextureLoader().load("/static/negzz.jpg");

      var materialArr = [
        //纹理对象赋值给6个材质对象
        new THREE.MeshBasicMaterial({ map: texture1 }),
        new THREE.MeshBasicMaterial({ map: texture2 }),
        new THREE.MeshBasicMaterial({ map: texture3 }),
        new THREE.MeshBasicMaterial({ map: texture4 }),
        new THREE.MeshBasicMaterial({ map: texture5 }),
        new THREE.MeshBasicMaterial({ map: texture6 }),
      ];
      var boxGeometry = new THREE.BoxGeometry(200, 200, 200, 100, 100, 100);
      boxGeometry.scale(1, 1, -1);
      this.cube = new THREE.Mesh(boxGeometry, materialArr);
      console.log(this.cube);
      this.scene.add(this.cube);

      //获取随机数
      function getRandomNum(elementId, max, min) {
        var element = document.getElementById(elementId);
        element.innerHTML = Math.round(Math.random() * (max - min) + min);
      }
      // 测试text
      let testElement = document.getElementById("test-Wrap")
      testElement.style.display = "block"
      let testLabel = new CSS3DObject(testElement)
      testLabel.position.set(-150,-150, -380)
      this.scene.add(testLabel)
      var that = this
      var labelClickHandle = function(){
      
      let imgsArr = ["/static/lng/right1.jpg","/static/lng/left1.jpg","/static/lng/top1.jpg","/static/lng/bottom1.jpg","/static/lng/front1.jpg","/static/lng/bottom1.jpg"]
      for(let i=0;i<imgsArr.length;i++){
          // console.log(this)
          // cube.material[i].map.image = that.preloadIimgs[i]
          // cube.material[i].map.needsUpdate = true

          let img = new Image()
          img.src = imgsArr[i]
          img.onload = function(){
            cube.material[i].map.image = img
            cube.material[i].map.needsUpdate = true
          }
      }
      // let img = new Image()
      // img.src = "/static/lng/right1.jpg"
      // img.onload = function(){
      //   cube.material[0].map.image = img
      //   cube.material[0].map.needsUpdate = true
      // }
      }
      // 进口压力:
      var enterPressure = 0;
      var enterPressureDiv = document.createElement("div");
      enterPressureDiv.className = "label";
      enterPressureDiv.innerHTML =
        "<div class='pressure'>进口压力:<span class='text_Num' id='enter_text_Num'>" +
        enterPressure +
        "</span> kpa</div>";
      let enterPressureLabel = new CSS3DObject(enterPressureDiv);
      enterPressureLabel.position.set(-150, -50, -380);
      // enterPressureLabel.scale.set(0.5,0.5,0.5)
      this.scene.add(enterPressureLabel);
      enterPressureDiv.onclick = labelClickHandle

    },
    initControls() {
      //controls = new THREE.OrbitControls( camera, renderer.domElement );
      this.controls = new OrbitControls(
        this.camera,
        this.labelRenderer.domElement
      );

      // 如果使用animate方法时,将此函数删除

      //controls.addEventListener( 'change', render );

      // 使动画循环使用时阻尼或自转 意思是否有惯性

      this.controls.enableDamping = false;

      //动态阻尼系数 就是鼠标拖拽旋转灵敏度

      //controls.dampingFactor = 0.25;

      //是否可以缩放

      this.controls.enableZoom = false;

      //是否自动旋转

      this.controls.autoRotate = false;

      //设置相机距离原点的最远距离

      this.controls.minDistance = 1;

      //设置相机距离原点的最远距离

      this.controls.maxDistance = 10;

      //是否开启右键拖拽

      this.controls.enablePan = false;
    },
    render() {
      this.renderer.render(this.scene, this.camera);
      this.labelRenderer.render(this.scene, this.camera);
    },
    clearCache(obj){
      let mesh = obj
      mesh.geometry.dispose()
      mesh.material[0].dispose()
      mesh.material[1].dispose()
      mesh.material[2].dispose()
      mesh.material[3].dispose()
      mesh.material[4].dispose()
      mesh.material[5].dispose()
    },
    onWindowResize() {
      this.camera.aspect = window.innerWidth / window.innerHeight;

      this.camera.updateProjectionMatrix();

      this.render();

      this.renderer.setSize(window.innerWidth, window.innerHeight);
      this.labelRenderer.setSize(window.innerWidth, window.innerHeight);
    },
    animate() {
      // this.clearCache(this.cube)

      cancelAnimationFrame(this.myReq);
      this.render();
      if(this.state == 1) {
         this.scene.rotation.y += 0.001
      }
      this.myReq = requestAnimationFrame(this.animate);
    },
  },
  beforeDestroy() {
    console.log("leave scene")
    this.clearCache(this.cube)
    // this.cube.dispose()
    this.cube = null
   window.removeEventListener("click",this.clickHandle,false)
    cancelAnimationFrame(this.myReq);
    clearInterval(this.timer);
    this.timer = null
    this.scene = null;
    // this.scene.remove()
    this.camera = null;
    // this.renderer = null;
    this.labelRenderer = null;
    this.controls = null;
    

    this.renderer.dispose();
    this.renderer.forceContextLoss();
    this.renderer.context = null;
    this.renderer.domElement = null;
    this.renderer = null;
  },
  watch: {},
  filters: {},
};
</script>

<style scoped>

</style>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Element Tabs 标签页 展示Echart 并随窗口变化自适应

    1、如何在一个div中展示不同的图表  (点击tab时为Chart组件赋值,并传给子组件,子组件监听数据变化并在 $nextTick 中重新绘制表格)

    tianyawhl
  • .glb格式的模型怎么在three.js中展示

    3D软件中导出的格式一般有.obj 和.glb ,下面是blender 2.8.2 生成模型并在three.js中展示的流程

    tianyawhl
  • vue 中使用threejs

    tianyawhl
  • 干货 | 用uni-app制作迷你PS小程序

    ? ? 该文章主要讲解最近基于 uni-app 框架编写的集图文拖拽等多方位编辑、油墨电子签名、开放式海报于一体的小程序的制作思路和实现代码。 1、完整源码链...

    腾讯NEXT学位
  • 寿司开卖:实现寿司制作特效和音响特效

    本节我们将继续上一节完成若干个小功能。首先要完成的是,当客户动画在主页面出现时,它左上角会冒泡,显示它想购买何种寿司,此时玩家可以点击左下角面板中各种元素,组合...

    望月从良
  • Java基础:五、this关键字、static含义(4)

    如果只有一个peel()方法,如何知道是被a还是b所调用的呢?因为编译器会把“所操作对象的引用”作为第一次参数传递给peel()。所以上述两个方法的调用就变成了...

    桑鱼
  • 闪屏还可以这样玩

    对于多数应用来说,在进入APP的时候使用短暂的闪屏广告来吸引用户是很常见的一个场景。但随着这种模式的频繁应用,越来越多的用户会感到审美疲劳,甚至不看就跳过闪屏了...

    林焕彬
  • HTML5 Canvas炫酷的火焰风暴动画

    越陌度阡
  • .glb格式的模型怎么在three.js中展示

    3D软件中导出的格式一般有.obj 和.glb ,下面是blender 2.8.2 生成模型并在three.js中展示的流程

    tianyawhl
  • 云终端系列(一)—— 实时音视频Web端接入体验(Vue基础音视频通话篇)

    这个系列呢,主要给各位观众老爷看看目前有较大趋势的SaaS应用的SDK在各种主流Web终端的使用姿势和异常分析,如果想要纯粹了解开发的或者云原生,云开发的可以去...

    楚歌

扫码关注云+社区

领取腾讯云代金券