使用dat.gui 控制threejs(一）

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'    
import gsap from 'gsap'
import * as dat from 'dat.gui'
// Canvas
const canvas = document.querySelector('canvas.webgl')

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


// Object
const geometry = new THREE.BoxBufferGeometry(1, 1, 1, 2,2,2)
// buffer  geometry  集合体是性能最佳，最gpu最友好的 geometry。  
// BoxGeometry 后面三个参数设置为1， 每一面就划分为2个三角形 triangle, 2 就得到八个

// 自定义一个geometry
// const geometry = new THREE.BufferGeometry();
// const vertices = new Float32Array([
//     0,0,0,
//     0,1,0,
//     1,0,0
// ])
// geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))
const material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe:false })
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

// define a color object
const obj = {
 color:0xff0000,
 spin:() => {
    gsap.to(mesh.rotation, {duration:1, y:mesh.rotation.y + 5})
 }
} 

/* debug gui panel*/
const gui = new dat.GUI({
    closed: true, 
    // 表示一开始 panel 先处于关闭状态
   // width:400  设置panel width
})
//gui.hide() // 隐藏gui  panel
  
gui.add(mesh.position, 'y', -3, 3, 0.01).name('positon-y') // 使用name() 重命名panel item title 
gui.add(mesh.position, 'x').min(-3).max(3).step(0.01)// 用链式调用的方式也可以！ 
//设置控制mesh y坐标的panel Item,并且规定控制的最大值3，最小值-1， 移动步长为0.01

//控制 mesh 的属性 ，比如 visible:mesh 是否可见
gui.add(mesh, 'visible')
gui.add(material,'wireframe')
 // dat.gui 改变obj的颜色时，将材质的颜色一并替换
gui.addColor(obj, 'color').onChange(() => {
    material.color.set(obj.color)
})
gui.add(obj, 'spin')
// animation
const animations = () => {
    gsap.to(mesh.position, { duration: 1, delay: 1, x: 2 })
    gsap.to(mesh.position, { duration: 1, delay: 2, x: 0 })
}
animations()
// Sizes
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

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

// controls

const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true
//开启阻尼，也就是惯性， 然后需要在每一帧进行controls.update()
//
// controls.target.y = 2 //controls target 指向的是对象围绕的焦点
// controls.update()

// Renderer
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
const tick = () => {
    controls.update()
    renderer.render(scene, camera)
    window.requestAnimationFrame(tick)
    // 动画一定需要配合帧动画请求！！！
}
tick()
let cursor = {  
    x:0,
    y:0
}
// 绑定鼠标事件
window.addEventListener('mousemove', (event) => {
    // 这样子会使得x,y 坐标值会归于（-0.5-0.5 这个区间）,
    cursor.x = event.clientX / sizes.width - 0.5
    cursor.y = -(event.clientY / sizes.height - 0.5)
    // 不加符号，会使得鼠标上下移动的时候，mesh看起来是跟随鼠标方向的，但是其实移动相机，mesh最终效果是要跟鼠标反向运动(相机向右，以相机为参照物，其实mesh向左)。
    //camera.position.x = cursor.x
    //camera.position.y = cursor.y

    // 让相机围绕着mesh 旋转（首先要清楚 这里实现旋转，改变位置的话，是 x和z方向旋转）
    // camera.position.x = Math.sin(cursor.x * Math.PI * 2) * 3
    // camera.position.z = Math.cos(cursor.x * Math.PI * 2) * 3
    // camera.position.y = cursor.y * 6
    // camera.lookAt(mesh.position)
})

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

    camera.aspect = sizes.width / sizes.height
    camera.updateProjectionMatrix()
    //修改相机参数后，需要统计threejs 去更改 projectMatrix, 项目矩阵？

    //renderer 修改画布的size
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

// 绑定全屏事件
window.addEventListener('dblclick', () => {
    // 注意，这个特性，对于 safari 浏览器无效
    // if(!document.fullscreenElement) {
    //     canvas.requestFullscreen()
    // }else {
    //     document.exitFullscreen()
    // }

    //最终兼容写法
    const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement
    if(!fullscreenElement) {
        if(canvas.requestFullscreen) {
            canvas.requestFullscreen()
        }else if(canvas.webkitRequestFullscreen) {
            canvas.webkitRequestFullscreen()
        }
    }else {
        if(document.exitFullscreen) {
            document.exitFullscreen()
        }else if(document.webkitExitFullscreen) {
            document.webkitExitFullscreen()
        }
    }
})

renderer.setSize(sizes.width, sizes.height)
// 规定渲染器，设定像素比 为1 or 2  有益于性能!!!
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))