three.js教程1补充-gui.js库使用
gui.js是一个前端js库，对HTML、CSS和JavaScript进行了封装，学习开发的时候，借助dat.gui.js可以快速创建可手动控制三维场景的UI交互界面，打开API文档中案例体验一下就能感受到。
（1）引入gui.js
gihtub地址：https://github.com/dataarts/dat.gui
npm地址：https://www.npmjs.com/package/dat.gui
你可以通过npm或github方式获得dat.gui.js库，当然为了学习方便，threejs官方案例扩展库中也提供了gui.js，你可以直接使用。
// 引入dat.gui.js的一个类GUI import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
（2）gui对象使用
// 实例化一个gui对象 const gui = new GUI(); //改变交互界面style属性 gui.domElement.style.right = '0px'; gui.domElement.style.width = '300px';
（3）add()方法
创建一个UI交互界面，比如一个拖动条
格式：.add(控制对象，对象具体属性，其他参数)
// 光照强度属性.intensity // 通过GUI改变光照强度，范围是0到2 gui.add(ambient, 'intensity', 0, 2.0);
(4) name()方法
让gui界面显示的中文名称。
gui.add(ambient, 'intensity', 0, 2.0).name('环境光强度');
gui.add(directionalLight, 'intensity', 0, 2.0).name('平行光强度');
（5）步长.step()方法
设置每次改变属性值间隔是多少。
gui.add(ambient, 'intensity', 0, 2.0).name('环境光强度').step(0.1);
(6) onChange()方法
// 当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; });
（7）.addColor()颜色值改变
// .addColor()生成颜色值改变的交互界面 gui.addColor(mesh.material, 'color')
（8）add()其他应用-拖动条、下拉框、单选框
// 1. 参数3、参数4数据类型：2个数字(拖动条) gui.add(mesh.position, 'x', 0, 180).name('x坐标') // 2. 参数3数据类型：数组(下拉菜单) gui.add(mesh.position, 'y', [-100, 0, 100]).name('y坐标') // 3. 参数3数据类型：对象(下拉菜单) gui.add(mesh.position, 'x', {left: -100,center: 0,right: 100}).name('x位置选择') // 3. 参数3数据类型：布尔值(单选框) gui.add(obj, 'bool').name('是否旋转');
（9）addFolder()方法分组
// 创建材质分组 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); });
（10）关闭.close()和展开.open()交互界面
下面演示一个完整示例：
源码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js中文网：www.webgl3d.cn</title>
<style>
body{
overflow: hidden;
margin: 0px;
}
</style>
</head>
<body>
<!-- type="importmap"功能：.html文件中也能和nodejs开发环境中一样方式，引入npm安装的js库 -->
<script type="importmap">
{
"imports": {
"three": "../../../three.js/build/three.module.js",
"three/addons/": "../../../three.js/examples/jsm/"
}
}
</script>
<script type="module">
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库创建的交互界面改变
const obj = {
color: 0x00ffff,// 材质颜色
specular: 0x111111,// 材质高光颜色
};
// 创建材质子菜单
const matFolder = gui.addFolder('材质');
// 材质颜色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);
// 平行光子菜单
const dirFolder = gui.addFolder('平行光');
// 平行光强度
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 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();
};
</script>
</body>
</html>
文章中部分素材选取自Threejs中文网：http://www.webgl3d.cn/
浙公网安备 33010602011771号