可视化库-gui

gui通俗来说就是一个可视化工具，在做threejs的时候，我们有一些属性数字不太好知道准确的效果，可以通过可视化工具来调整，他的原理就是传入一个对象，和想要改变的属性，以及范围动态的去拖动进度条从来改变某个效果

使用方法

比如我们想要改变光照强度简单点就可以这样实现

// 光照强度属性.intensity
console.log('ambient.intensity',ambient.intensity);
// 通过GUI改变mesh.position对象的xyz属性
gui.add(ambient, 'intensity', 0, 2.0);

当然这样的话默认展示的是intensity 对开发者不友好我们也可以指定name让用户知道这是调整的什么

const gui = new GUI();//创建GUI对象 
gui.add(ambient, 'intensity', 0, 2.0).name('环境光强度');
gui.add(directionalLight, 'intensity', 0, 2.0).name('平行光强度');

同样每次也有一个步长概念，每次拖动改变多少，这一点和众多的前端进度条很相似

gui.add(ambient, 'intensity', 0, 2.0).name('环境光强度').step(0.1);

我们能够监听到这些属性的一个改变吗当然是可以的，我们可以通过onChange监听属性的改变

const obj = {
    x: 30,
};
// 当obj的x属性变化的时候，就把此时obj.x的值value赋值给mesh的x坐标
gui.add(obj, 'x', 0, 180).onChange(function(value){
    mesh.position.x = value;
	// 你可以写任何你想跟着obj.x同步变化的代码
	// 比如mesh.position.y = value;
});

另外 gui不光是支持数字，也支持颜色

gui.addColor(ambient, 'color').name('环境光颜色');

同样他也可以有下拉菜单、单选框等功能

下拉菜单

const obj = {
    scale: 0,
};
// 参数3数据类型：数组(下拉菜单)
gui.add(obj, 'scale', [-100, 0, 100]).name('y坐标').onChange(function (value) {
    mesh.position.y = value;
});

const obj = {
    scale: 0,
};
// 参数3数据类型：对象(下拉菜单)
gui.add(obj, 'scale', {
    left: -100,
    center: 0,
    right: 100
    // 左: -100,//可以用中文
    // 中: 0,
    // 右: 100
}).name('位置选择').onChange(function (value) {
    mesh.position.x = value;
});

单选

const obj = {
    bool: false,
};
// 改变的obj属性数据类型是布尔值，交互界面是单选框
gui.add(obj, 'bool').name('是否旋转');

是否旋转控制

gui.add(obj, 'bool').name('旋转动画');

// 渲染循环
function render() {
    // 当gui界面设置obj.bool为true,mesh执行旋转动画
    if (obj.bool) mesh.rotateY(0.01);
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
render();

说了这么多一大堆一股脑的往上方是不是不好看呢，这一点gui也想到了，他支持分组功能，把同类的属性放在一起

addFolder

当你通过GUI控制的属性比较多的时候，可以使用.addFolder()进行分组 .addFolder()返回的子文件夹对象，同样具有gui对象的.add()、.onChange()、.addColor()等等属性。

const gui = new GUI(); //创建GUI对象 
const obj = {
    color: 0x00ffff,// 材质颜色
};
// 创建材质子菜单
const matFolder = gui.addFolder('材质');
matFolder.close();
// 材质颜色color
matFolder.addColor(obj, 'color').onChange(function(value){
    material.color.set(value);
});
// 材质高光颜色specular
matFolder.addColor(obj, 'specular').onChange(function(value){
    material.specular.set(value);
});

// 环境光子菜单
const ambientFolder = gui.addFolder('环境光');
// 环境光强度
ambientFolder.add(ambient, 'intensity',0,2);

// 平行光强度
dirFolder.add(directionalLight, 'intensity',0,2);
// 平行光位置
dirFolder.add(directionalLight.position, 'x',-400,400);
dirFolder.add(directionalLight.position, 'y',-400,400);
dirFolder.add(directionalLight.position, 'z',-400,400);

以上几个分组就是一个简单的展示情况

我们也可以控制每一个分组的展开收起情况

const gui = new GUI(); //创建GUI对象 
gui.close();//关闭菜单
gui.open();//打开菜单

// 创建材质子菜单
const matFolder = gui.addFolder('材质');
matFolder.close();//关闭菜单
matFolder.open();//打开菜单

套娃

.addFolder()创建的对象，同样也具有.addFolder()属性，可以继续嵌套子菜单。

// 平行光子菜单
const dirFolder = gui.addFolder('平行光');
dirFolder.close();//关闭菜单
// 平行光强度
dirFolder.add(directionalLight, 'intensity',0,2);
const dirFolder2 = dirFolder.addFolder('位置');//子菜单的子菜单
dirFolder2.close();//关闭菜单
// 平行光位置
dirFolder2.add(directionalLight.position, 'x',-400,400);
dirFolder2.add(directionalLight.position, 'y',-400,400);
dirFolder2.add(directionalLight.position, 'z',-400,400);

通过上面那么多的介绍，我们可以简单看一下效果是不是很方便

效果

代码

import * as THREE from 'three';
import {
    OrbitControls
} from 'three/addons/controls/OrbitControls.js';

import {
    GUI
} from 'three/addons/libs/lil-gui.module.min.js';

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


// 一个网格模型
const geometry = new THREE.SphereGeometry(50, 25, 25);
const material = new THREE.MeshPhongMaterial({
    color: 0x00ffff,
    specular: 0x111111,
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh); //模型对象添加到场景中

//光源设置
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(400, 200, 300);
scene.add(directionalLight);
const ambient = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambient);

//辅助观察的坐标系
const axesHelper = new THREE.AxesHelper(100);
scene.add(axesHelper);

const gui = new GUI(); //创建GUI对象 
// gui.close();//关闭菜单
//创建一个对象，对象属性的值可以被GUI库创建的交互界面改变
const obj = {
    color: 0x00ffff,// 材质颜色
    specular: 0x111111,// 材质高光颜色
};
// 创建材质子菜单
const matFolder = gui.addFolder('材质');
matFolder.close();//关闭菜单
// 材质颜色color
matFolder.addColor(obj, 'color').onChange(function(value){
    material.color.set(value);
});
// 材质高光颜色specular
matFolder.addColor(obj, 'specular').onChange(function(value){
    material.specular.set(value);
});
// 环境光子菜单
const ambientFolder = gui.addFolder('环境光');
ambientFolder.close();//关闭菜单
// 环境光强度  
ambientFolder.add(ambient, 'intensity',0,2);
// 平行光子菜单
const dirFolder = gui.addFolder('平行光');
dirFolder.close();//关闭菜单
// 平行光强度
dirFolder.add(directionalLight, 'intensity',0,2);
const dirFolder2 = dirFolder.addFolder('位置');//子菜单的子菜单
dirFolder2.close();//关闭菜单
// 平行光位置
dirFolder2.add(directionalLight.position, 'x',-400,400);
dirFolder2.add(directionalLight.position, 'y',-400,400);
dirFolder2.add(directionalLight.position, 'z',-400,400);

//渲染器和相机
const width = window.innerWidth;
const height = window.innerHeight;
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
camera.position.set(292, 223, 185);
camera.lookAt(0, 0, 0);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);



// 渲染循环
function render() {
    // 当gui界面设置obj.bool为true,mesh执行旋转动画
    if (obj.bool) mesh.rotateY(0.01);
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
render();


const controls = new OrbitControls(camera, renderer.domElement);

// 画布跟随窗口变化
window.onresize = function () {
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
};

可视化库-gui

使用方法 ​

效果 ​

代码 ​

使用方法

效果

代码