threejs - js库 gui 的使用 调试开发3D效果

// 导入 threejs
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
// 引入dat.gui.js的一个类GUI
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
// 创建场景 scene
const scene = new THREE.Scene();
// console.log(scene,'scene');
// 创建相机 -- 观看物体的不同视角
const camera = new THREE.PerspectiveCamera(
    45, // 视角
    window.innerWidth / window.innerHeight,  // 宽高比
    0.1,  // 近平面
    1000 // 远平面
);
// const camera1 = new THREE.OrthographicCamera();
// console.log('透视投影相机',camera); // 和人的眼睛看的东西一样 近大远小
// console.log('正投影相机',camera1);

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
// console.log('渲染器',renderer);
// 置canvas画设布的尺寸  -- 设置threejs渲染区域的尺寸 像素 px
renderer.setSize(window.innerWidth,window.innerHeight);
// domElement 就是一个 canvas 标签  结果 -- 把 canvas 渲染到了页面上
document.body.appendChild(renderer.domElement);

// 添加坐标轴
const axesHelper = new THREE.AxesHelper(5); // 参数为轴的长度
scene.add(axesHelper);

// 创建一个集合体 -- 正方体
const gemetry = new THREE.BoxGeometry(1,1,1);
// 创建材质 material  --- 网格基础材质
const material = new THREE.MeshBasicMaterial({
    color: 0x9ac833,  // # 使用 0x 替代  十六进制
});
/// 材质设置成线框模式
material.wireframe = true;
const material1 = new THREE.MeshBasicMaterial({
    color: 0xee502d,  // # 使用 0x 替代  十六进制
});

// 创建网格模型 -- 就是 3D 物体了 -- 由几何体 gemetry 和 材质 material 构成
const mesh = new THREE.Mesh(gemetry,material);
const meshParent = new THREE.Mesh(gemetry,material1);
// console.log('网格',mesh);

// 缩放 scale 设置立方体的放大效果  父元素放大子元素也会随着放大
// 子元素放大是按照父元素的位置放大的
// meshParent.scale.set(2,2,2);
mesh.scale.set(2,2,2);
// 创建了父元素  把子元素放到 父元素中  ps：position 位置是相对与父元素的位置来说的 即相对位置
meshParent.position.set(-3,0,0);
mesh.position.set(1,0,0);  // 设置物体的位置 x y z  y 轴就是垂直的  （-3，0，0） 才是原点

// 旋转 按照某个坐标轴旋转o3d  -- 欧拉角  -- 指定了顺序和坐标轴
// 绕着x轴旋转  父元素的旋转会使子元素跟随旋转
console.log(Math.PI);
mesh.rotation.x = Math.PI / 4;   // 180 / 4 = 45 度

// 把物体放到场景中间
scene.add(mesh);
// meshParent.add(mesh);
scene.add(meshParent);

// 设置相机的位置 position
camera.position.set(10,10,10);  // 远距离和近距离
// camera.position.y = 50;  // 远距离和近距离
camera.lookAt(0,0,0);
// camera.lookAt(mesh.position);// 指向mesh对应的位置

// 引入相机控件  -- 轨道控制器
const controls = new OrbitControls(camera,renderer.domElement);

// 浏览器大小调整事件监听  -- 监听窗口的变化
window.addEventListener("resize", () => {
    // console.log('test');
    renderer.setSize(window.innerWidth,innerHeight);  // 根据缩放的窗口重新设置画布的大小
    // 垂直相机宽高比
    camera.aspect = window.innerWidth / window.innerHeight;
    // 更新相机投影矩阵
    camera.updateProjectionMatrix();
});

// 使用 GUI 放入全屏和退出全屏功能
const objFun = {
    requestFullscreen:function(){
        document.body.requestFullscreen();
    },
    exitFullscreen:function(){
        document.exitFullscreen();
    },
};
// 创建  GUI 对象
const gui = new GUI();
// 参数 ： 目标对象，对象的属性 .name() 重新命名
gui.add(objFun,'requestFullscreen').name("全屏");
gui.add(objFun,'exitFullscreen').name("退出全屏");

let folder = gui.addFolder("立方体的位置");
// 网格对象的xyz轴移动
folder.add(mesh.position,"x",0,10).name("网格对象X轴");
folder.add(mesh.position,"y",0,10).name("网格对象X轴");
// folder.add(mesh.position,"z",-10,10,2).name("网格对象X轴");
folder.add(mesh.position,"z").min(0).max(10).step(2).onChange((val) => {
    console.log('事件触发',val);  // val 是 z 值
});

// 材质的修改 -- 线框模式切换
gui.add(material,"wireframe");

// 颜色修改
let colorParams = {
    cubeColor: "#ff0000"
};
gui.addColor(colorParams,"cubeColor").name('材质颜色修改').onChange((val) => {
    console.log(val);
    mesh.material.color.set(val);
});

// 添加带阻尼的惯性
controls.enableDamping = true;   //  设置后会有滑动的效果
controls.dampingFactor = 0.2011;   // 时间越小 滑动的时间越小

controls.autoRotate = false;  // 自动旋转

// 动态的渲染函数
function animate() {
    controls.update(); // 如果使用了 autoRotate 属性等 需要在动画中执行 update 方法
    requestAnimationFrame(animate);  // 逐帧渲染
    // 旋转
    // mesh.rotation.x += 0.01;
    // mesh.rotation.y += 0.01;
    renderer.render(scene,camera);
}
animate()

菜单下拉：-- 使用参数为数组即可。

// 参数3数据类型：数组(下拉菜单)

gui.add(obj, 'scale', [-100, 0, 100]).name('y坐标').onChange(function (value) {

    mesh.position.y.set(value);

});