pnpm i dat.gui

import * as Dat from "dat.gui";

/// 創(chuàng)建 dat
const dat = new Dat.GUI();

/// 添加菜單
function addMenuItem () {
    // x 軸坐標(biāo)
    dat
    .add(cube.position, 'x')
    .max(10)
    .min(0)
    .step(0.01)
    .name('移動(dòng)x軸')
    .onChange(value => {
        console.log('我是當(dāng)前正在移動(dòng)的x軸', value);
    })
    .onFinishChange(value => {
        console.log('我是當(dāng)前移動(dòng)結(jié)束的x軸', value);
    })
}
// 添加菜單
addMenuItem ()

import * as THREE from "three"
// 目標(biāo)：使用 dat.gui 進(jìn)行 可視化調(diào)試
import * as Dat from "dat.gui";
/// 創(chuàng)建場(chǎng)景
const scene = new THREE.Scene()
/// 創(chuàng)建 dat
const dat = new Dat.GUI();
/// 創(chuàng)建相機(jī)
/*
    PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
        fov — 攝像機(jī)視錐體垂直視野角度
        aspect — 攝像機(jī)視錐體長(zhǎng)寬比
        near — 攝像機(jī)視錐體近端面
        far — 攝像機(jī)視錐體遠(yuǎn)端面
*/
/// 透視相機(jī)
const camera = new THREE.PerspectiveCamera(
    75, // 攝像機(jī)視錐體垂直視野角度，從視圖的底部到頂部，以角度來(lái)表示。默認(rèn)值是50。
    window.innerWidth / window.innerHeight, // 攝像機(jī)視錐體的長(zhǎng)寬比，通常是使用畫(huà)布的寬/畫(huà)布的高。默認(rèn)值是1（正方形畫(huà)布）。
    0.1, // 攝像機(jī)的近端面，默認(rèn)值是0.1。
    1000 // 攝像機(jī)的遠(yuǎn)端面，默認(rèn)值 2000
)
/// 創(chuàng)建渲染器
const renderer = new THREE.WebGLRenderer();
/// 設(shè)置大小
renderer.setSize(
    1000, // 寬度
    500 // 高度
);
/// 掛載到頁(yè)面
document.body.appendChild(renderer.domElement)
/// 添加物體
/*
    width:立方體x軸的長(zhǎng)度,
    height:立方體y軸的長(zhǎng)度,
    depth:立方體z軸的長(zhǎng)度也是深度
*/
let geometry = new THREE.BoxGeometry(10, 10, 10);
/// 添加材質(zhì)
// const material = new THREE.MeshBasicMaterial({ color: 0xffff0000 });
/// 添加材質(zhì)
const materials = []
for(let i = 0; i < 6; i++){
    materials.push(new THREE.MeshBasicMaterial({ color: Math.random() * 0x00ff0000 }))
}
/// 添加網(wǎng)格
const cube = new THREE.Mesh( geometry, materials );
scene.add( cube );
// 設(shè)置相機(jī)位置
camera.position.z = 50;
// 修改場(chǎng)景背景顏色
scene.background = new THREE.Color(0xffffcc99)
/// 添加 三色坐標(biāo)軸
const axesHelper = new THREE.AxesHelper(20)
scene.add( axesHelper )
/// 渲染
function animate() {
    // 使用 requestAnimationFrame 執(zhí)行動(dòng)畫(huà)
    requestAnimationFrame(animate)
    // 修改其旋轉(zhuǎn)的度數(shù)，讓其每次渲染增加0.01的弧段進(jìn)行渲染
    cube.rotation.x += 0.01;
	cube.rotation.y += 0.01;
    //scene:前面定義的場(chǎng)景,camera:前面定義的相機(jī)
    //renderTarget:渲染的目標(biāo)默認(rèn)是是渲染到前面定義的render變量中
    //forceClear:每次繪制之前都將畫(huà)布的內(nèi)容給清除,即使自動(dòng)清除標(biāo)志autoClear為false,也會(huì)清除
    renderer.render(scene, camera)
}    
/// 添加菜單
function addMenuItem () {
    // x 軸坐標(biāo)
    dat
    .add(cube.position, 'x')
    .max(10)
    .min(0)
    .step(0.01)
    .name('移動(dòng)x軸')
    .onChange(value => {
        console.log('我是當(dāng)前正在移動(dòng)的x軸', value);
    })
    .onFinishChange(value => {
        console.log('我是當(dāng)前移動(dòng)結(jié)束的x軸', value);
    })
}
// 渲染
animate()
// 添加菜單
addMenuItem ()