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/
分类:
three.js
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)