【Three.js基础学习】5.Debug-ui

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

    课程要点:

    调试用户界面

    我们可以在界面中 通过面板去控制,不需要通过代码一点点修改,只需要在面板中

    事先添加所需要的控制

    1. lil-gui   其中dat-gui很长时间不维护,有bug

    npm i --save lil-gui

一、代码

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import gsap from 'gsap' // npm
import * as lil from 'lil-gui'


/**
  *  Debug
  */
const gui = new lil.GUI()

function spin(){

}

const colorFormats = {
	string: '#ff0000',
	int: 0xff0000,
	object: { r: 1, g: 1, b: 1 },
	array: [ 1, 1, 1 ],
    spin:()=>{
        console.log('spin look')

        gsap.to(mesh.rotation,{duration:1,y:mesh.rotation.y + 10})
    }
};


/**
 * Base
 */
// Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const scene = new THREE.Scene()

/**
 * Object
 */
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: colorFormats.string })
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)


// Debug 
//  参数1:对象,对象属性 , 参数2: 控制的属性名

gui
    .add(mesh.position,'y')
    .min(-3)
    .max(3)
    .step(0.01)
    .name('可以更改姓名!')

gui
    .add(mesh,'visible')

gui
    .add(material,'wireframe')

gui
    .addColor(colorFormats,'string')
    .onChange(()=>{
        material.color.set(colorFormats.string)
    })
 
gui
    .add(colorFormats,'spin') // 这里将对象中colorFormats,的spin函数添加到调试框中

/**
 * Sizes
 */
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

window.addEventListener('resize', () =>
{
    // Update sizes
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    // Update camera
    camera.aspect = sizes.width / sizes.height
    camera.updateProjectionMatrix()

    // Update renderer
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

/**
 * Camera
 */
// Base camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.z = 3
scene.add(camera)

// Controls
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

/**
 * Animate
 */
const clock = new THREE.Clock()

const tick = () =>
{
    const elapsedTime = clock.getElapsedTime()

    // Update controls
    controls.update()

    // Render
    renderer.render(scene, camera)

    // Call tick again on the next frame
    window.requestAnimationFrame(tick)
}

tick()

二、知识点

1.gui

 可以在npm官网中找到lil-gui

方法

add()  // 参数1 ： 放对象，或对象属性 ； 参数2 ：定义调试面板的属性名

min() // 

max() // 

step() // 步长

name() //  可以通过这个方法去自定义面板中的名字

addColor() // 定义颜色  参数1:对象 参数2：属性

onChange() // 面板中修改颜色，更新到立方体上面

其中

const colorFormats = {
	string: '#ff0000',
	int: 0xff0000,
	object: { r: 1, g: 1, b: 1 },
	array: [ 1, 1, 1 ],
    spin:()=>{
        console.log('spin look')

        gsap.to(mesh.rotation,{duration:1,y:mesh.rotation.y + 10})
    }
};


gui
    .add(colorFormats,'spin') // 这里将对象中colorFormats,的spin函数添加到调试框中

在colorFormats中定义了一个函数，添加到用户调试界面中，那么就会形成一个按钮，在点击时候会调用函数中的内容 ，上面效果是一个旋转

---

总结

回顾以下之前知识点

window.devicePixelRatio // 获取当前设备的像素比

updateProjectionMatrix() // 更新相机

setPixelRatio //  设置当前设备像素比，能获得更好的画质，但是会有性能问题

双击全屏 和 取消全屏

requestFullscreen , exitFullscreen

面板能帮助我们更快的调试内容，更好的开发！