threejs代码封装2

紧接着上节课threejs代码封装讲解。

环境贴图影响系数.envMapIntensity设置

<!-- HelloWorld.vue文件 -->
<script setup>
import twin from './twin';
twin.loader.load('./收费站.glb',(gltf)=>{
    ...
    // 设置环境贴图影响系数
    gltf.scene.traverse(function (obj) {
        if (obj.isMesh) {
            obj.material.envMapIntensity = 2.0
        }
    })
})
</script>

Cavnas画布尺寸变化

export default class CreateTwin {
    constructor() {
        ...
        // 画布尺寸随着窗口变化
        window.addEventListener('resize',()=>{
            this.renderer.setSize(window.innerWidth, window.innerHeight);
            this.camera.aspect = window.innerWidth / window.innerHeight;
            this.camera.updateProjectionMatrix();
        });
    }
}

相机控件辅助选择视角

前面给大家演示过，加载gltf模型的时候，通过相机控件OrbitControls。

左键旋转、中间缩放改变相机位置

右键平移，改变相机目标观察点

this.controls.addEventListener('change',()=>{
    console.log('camera.position',this.camera.position);
    console.log('controls.target',this.controls.target);
})

类CreateTwin的设置参数

开发时候，一般选择视角时候才会打印相机相关参数，可以考虑通过类CreateTwin的参数设置，鼠标旋转缩放是否触发相机控件打印相机相关参数。

class CreateTwin {
  constructor(logPosTargetBool) {
    if(logPosTargetBool){
      this.controls.addEventListener('change',()=>{
        console.log('camera.position',this.camera.position);
        console.log('controls.target',this.controls.target);
      })        
    }
  }
}
const twin = new CreateTwin(true);

对象作为类参数

class CreateTwin {
  constructor(params) {
    if(params.logPosTargetBool){
      this.controls.addEventListener('change',()=>{
        console.log('camera.position',this.camera.position);
        console.log('controls.target',this.controls.target);
      })        
    }
  }
}
const twin = new CreateTwin({
    logPosTargetBool:true,// 触发打印相机参数
    // logPosTargetBool:false,// 不触发打印相机参数
});

换个写法，es6解构赋值。

class CreateTwin {
  constructor(params) {
    const { logPosTargetBool } = params;
    if(logPosTargetBool){
      ...       
    }
  }
}

对象参数完善

当调用类的时候，不输入任何参数，给一个对象默认值，logPosTargetBool默认设置false。

class CreateTwin {
  //调用CreateTwin，有可能不设置任何参数，可以设置params={},以免报错
  constructor(params = {}) {
    // 调用CreateTwin，参数没有配置logPosTargetBool,默认值false
    const { logPosTargetBool = false } = params;
    if(logPosTargetBool){
      this.controls.addEventListener('change',()=>{
        console.log('camera.position',this.camera.position);
        console.log('controls.target',this.controls.target);
      })        
    }
  }
}
const twin = new CreateTwin();