threejs代码封装3-辅助工具

继续threejs代码封装的讲解。

前面讲解过，平时开发的时候，会通过辅助坐标系AxesHelper观察xyz轴，stats查看渲染帧率，gui可视化调节参数。

下面就把前面写过的代码，封装成一个类。

封装辅助工具Helper.js

在src/twin目录下创建一个文件Helper.js。

把原来代码复制过来修改下即可。

import * as THREE from 'three';
import Stats from 'three/examples/jsm/libs/stats.module.js'
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'

export default class Helper {
    constructor(scene,directionalLight) {
        scene.add(new THREE.AxesHelper(200));

        // 查看帧率
        this.stats = new Stats();
        document.body.appendChild(this.stats.domElement)
        // 辅助调试
        this.gui = new GUI()
        this.gui.domElement.style.right = '0px';
        this.gui.domElement.style.width = '500px';
        this.gui.domElement.style.fontSize = '16px';
        // 平行光调试
        const dirFolder = this.gui.addFolder('平行光');//创建一个子菜单
        dirFolder.add(directionalLight, 'intensity', 0, 5)
        const R = 100;
        dirFolder.add({ angle: 45 }, 'angle', 0, 360).onChange(function (v) {
            const rad = THREE.MathUtils.degToRad(v);
            directionalLight.position.x = R * Math.cos(rad);
            directionalLight.position.z = R * Math.sin(rad);
        }).name('旋转角度')

        dirFolder.add({ angle: 45 }, 'angle', 0, 89).onChange(function (v) {
            const rad = THREE.MathUtils.degToRad(v);
            directionalLight.position.y = R * Math.tan(rad);
        }).name('照射角度');

        dirFolder.close();
    }
}

Helper.js引入CreateTwin.js

import Helper from './Helper';

class CreateTwin {
  constructor(params = {}) {
    const { 
      logPosTargetBool = false,
      helperBool = true,//默认创建辅助开发工具
    } = params;
    if(helperBool){
      this.helper = new Helper(this.scene, this.directionalLight);
      this.gui = this.helper.gui;       
    }
  }
}
// 渲染循环
this.renderer.setAnimationLoop(() => {
    if (helperBool) this.helper.stats.update();
    this.renderer.render(this.scene, this.camera);
})

类CreateTwin实例化时候，可以配置参数，是否生成坐标轴、帧率界面、gui界面

const twin = new CreateTwin({
    helperBool:false,//不添加调试辅助工具
    //logPosTargetBool:true,//打印相机参数
});

在其他vue组建中获取gui对象，进行设置。

<script setup>
import twin from './twin';

twin.loader.load('./收费站.glb', (gltf) => {
  ...
  if (twin.gui) {
    twin.gui.add({ envMapIntensity: 2.0 }, 'envMapIntensity', 0, 5).onChange(function (v) {
      gltf.scene.traverse(function (obj) {
        if (obj.isMesh) {
            obj.material.envMapIntensity = v
        }
      })
    })
  }
})
</script>