Three.js第四课-响应式画布&GUI调试

响应式画布

• 背景：考虑到当改变窗口时，会出现画布的部分白屏现象。
• 解决：因此通过动态的监听resize事件，来实时更新画布，来达到相应式画布的目的。
• 原理：当页面的大小改变时，会触发window的resize事件，从而重新设置渲染器和相机的相关宽高属性
• 代码：

// 响应式窗口
window.addEventListener('resize',()=>{
    // 重置渲染器宽高比
    render.setSize(window.innerWidth,window.innerHeight)
    // 重置相机宽高比
    camera.aspect=window.innerWidth/window.innerHeight
    // 更新相机投影
    camera.updateProjectionMatrix();
})

自定义事件

• 需求：实现当点击了键盘某个按键时，就开启全屏
• 代码：

// 自定义按钮/事件
window.addEventListener('keyup',(event)=>{
    if(event.key==='q'){
        // 全屏
        document.body.requestFullscreen()
    }
    if(event.key==='w'){
        // 退出全屏
        document.exitFullscreen()
    }
})

GUI调试工具

引入

导入GUI lil.gui，前身是dat.gui

// 导入lil.gui
import {GUI} from 'three/examples/jsm/libs/lil-gui.module.min.js'

使用

创建GUI面板

const gui=new GUI()

全屏按钮

let eventObj={
    Fullscreen:()=>{document.body.requestFullscreen()},
    Exitscreen:()=>{document.exitFullscreen()}
}
// 添加按钮
gui.add(eventObj,"Fullscreen").name("开启全屏")
gui.add(eventObj,"Exitscreen").name("退出全屏")

修改位置

// 创建组面板
let positionFolder=gui.addFolder("物体位置")
// 添加对应的位置选项
positionFolder.add(good.position,"x").min(-5).max(5).step(1).name("X轴位置")
positionFolder.add(good.position,"y").min(-5).max(5).step(1).name("Y轴位置")
positionFolder.add(good.position,"z").min(-5).max(5).step(1).name("Z轴位置")
.onChange((val)=>{
    // 当值变化时，就会触发这个onChange事件，可以拿到对应的val
})
.onFinishChange((val)=>{
    // 当值变化完成后，才会触发这个onFinishChange事件，可以拿到对应的val
})

修改线框

// 修改线框
gui.add(parentmaterial,'wireframe').name("父元素线框")

修改颜色

// 修改颜色
let colorParams={
    //设置初始色
    color:'#ffffff'
}
gui.addColor(colorParams,"color").name("颜色").onChange((val)=>{
    // val为选择的色值
    good.material.color.set(val)
})

修改转动

// 转动功能
let rotationFolder=gui.addFolder("物体旋转")
// 创建一个对象来存储控制旋转变量
let rotationControls = {
    rotationX: 0,
    rotationY: 0,
    rotationZ: 0
};
// 将旋转角度添加到gui中
rotationFolder.add(rotationControls, 'rotationX', 0, Math.PI).name('X轴旋转').onChange(function(value) {
    good.rotation.x = value;
});
rotationFolder.add(rotationControls, 'rotationY', 0, Math.PI).name('Y轴旋转').onChange(function(value) {
    good.rotation.y = value;
});
rotationFolder.add(rotationControls, 'rotationZ', 0, Math.PI).name('Z轴旋转').onChange(function(value) {
    good.rotation.z = value;
});

效果一览