WEB 3D技术 three.js 通过lil-gui 控制x y z轴数值操作分组设置布尔值控制颜色材质控制

news2024/10/2 14:31:27

上文 WEB 3D技术 three.js 通过lil-gui管理公共事件中我们用 lil-gui 处理了一下基础事件和按钮的管理
那么本文我们来具体说说它能做的其他事

我们先将基础代码改成这样

import './style.css'
import * as THREE from "three";
//引入lil-gui
import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";

//创建场景
const scene = new THREE.Scene();

//创建相机
const camera = new THREE.PerspectiveCamera(
    45, //视角 视角越大  能看到的范围就越大
    window.innerWidth / window.innerHeight,//相机的宽高比  一般和画布一样大最好
    0.1,  //近平面  相机能看到最近的距离
    1000  //远平面  相机能看到最远的距离
);

//c创建一个canvas容器  并追加到 body上
const renderer = new THREE.WebGLRenderer(0);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

//创建一个几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color:0x08ffe });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);


//设置相机位置   这里 我们设置Z轴  大家可以试试  S Y 和 Z  都是可以的
camera.position.z = 5;
camera.position.y = 5;
camera.position.x = 5;
//设置相机默认看向哪里   三个 0  代表 默认看向原点
camera.lookAt(0, 0, 0);


function animate() {
    requestAnimationFrame(animate);
    //cube.rotation.x += 0.01;
    //cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();
//将内容渲染到元素上
renderer.render(scene, camera);

const Igui = new GUI();

运行效果如下图就是创建了一个画布然后中间放了一个立方体
在这里插入图片描述
我们可以通过lil-gui 控制元素的 x轴单位
我们在代码最后面加上

Igui.add(cube.position,"x",-5,5);

在这里插入图片描述
我们通过new 出来的 GUI对象调用add函数
第一个参数我们传入cube.position。cube:是我们的立方体元素对象 position用于控制它的 x y z三个轴然后第二个参数设置字符串 x 告诉他们我们要操作对象的x轴后面两个参数用来控制范围我们设置最小负5 最大正5
运行代码右上角就会出现这个x轴的操作元素
在这里插入图片描述
我们可以通过拖动下图指向元素控制数值的大小

我们可以将这行代码改成

Igui.add(cube.position,"x").min(-5).max(5).step(1).name("设置立方体x轴距离");

在这里插入图片描述
依旧是通过new出来的 gui对象调用add函数第一个参数 cube.position 第二个参数 x
然后 min设置最小值负5 max设置最大值5 然后 step 设置每次拖动只会改变1 就是之前你从4拖到5可能拖到 4.3 4.5类有小数的位置但是我们现在每次必定前进1 那么从4一拖就到 5了
然后 name 就是操作的代理名不写他就是x
代码运行后也是没有任何问题
在这里插入图片描述
这里像我们元素的 x y z轴都是可以设置的

然后我们这里还可以监听数值改变

Igui.add(cube.position,"x").min(-5).max(5).step(1).name("设置立方体x轴距离").onChange((value)=>{
    console.log("数值被改变为",value);
});

这样我们运行代码然后拖动x轴
当我们处理的数值发生改变后 onChange 的监听事件就会触发里面行参可以拿到当前改变的值是多少
在这里插入图片描述
然后我们这里可以将元素材质设置为线框模式 wireframe字段设置为true即可

然后我们在最下面这样邪恶

Igui.add(material,"wireframe").name("控制元素为线框模式");

在这里插入图片描述
我们通过 gui对象调用add函数第一个参数 material 这是元素材质对象第二个字符串类型的 wireframe 告诉它要操作的字段名
然后 name 设置代理名
我们进来之后会发现元素是线框模式的然后这里 gui判断到操作的是布尔值之后他会成为一个单选框
在这里插入图片描述
我们取消它的勾选wireframe 就成了false 这样就取消了线框模式

当然材质对象都能操作线框了那么颜色自然元素可以的
我们可以最下面这样写

let colorParams = {
    cubeColor: 0x08ffe
}
Igui.addColor(colorParams,"cubeColor").name("颜色设置").onChange((value)=>{
    cube.material.color.set(value);
});

在这里插入图片描述
声明一个对象叫 colorParams 里面有一个字段 cubeColor 这两个名字都是随便取的
然后里面对应一个颜色代码 0x08ffe
gui操作颜色不再是add 而是 addColor
第一个参数传我们写的 colorParams颜色对象第二个蚕食告诉它操作哪个字段我们传cubeColor
然后 name设置名称
监听颜色器发生变化我们将新得到的颜色值赋值给 material.color 就是我们这个元素材质的颜色
运行代码
在这里插入图片描述
我们点击右上角的颜色设置选择自己喜欢的颜色

然后这么多操作我们可以分个组
将代码改成这样

const Igui = new GUI();
let folder = Igui.addFolder("第一组");
folder.add(cube.position,"x").min(-5).max(5).step(1).name("设置立方体x轴距离").onChange((value)=>{
    console.log("数值被改变为",value);
});
folder.add(material,"wireframe").name("控制元素为线框模式");

let colorParams = {
    cubeColor: 0x08ffe
}
let folder1 = Igui.addFolder("第二组");
folder1.addColor(colorParams,"cubeColor").name("颜色设置").onChange((value)=>{
    cube.material.color.set(value);
});