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教程1补充-gui.js库使用的更多相关文章
- svg.js教程及使用手册详解（一）
做毕设的时候,因为要使用到画图和自定义动画,所以接触到了SVG.网上关于SVG和Canvas的对比很多,具体的辨析这里就不赘言.网上关于SVG的所谓教程基本上都是SVG本身,但是却没有一个针对svg. ...
- js基础到精通全面教程--JS教程
适合阅读范围:对JavaScript一无所知-离精通只差一步之遥的人 基础知识:HTML JavaScript就这么回事1:基础知识 1 创建脚本块 1: <script language=”J ...
- 封装常用的js（Base.js）——【01】理解库，获取节点，连缀，
封装常用的js(Base.js)——[01]理解库,获取节点,连缀, youjobit07 2014-10-10 15:32:59 前言: 现如今有太多优秀的开源javascript库, ...
- 专门针对初学者的Node.js教程
转载原文:http://www.csdn.net/article/2013-08-28/2816731-absolute-beginners-guide-to-nodejs Node.js的教程并不缺 ...
- riot.js教程【四】Mixins、HTML内嵌表达式
前文回顾 riot.js教程[三]访问DOM元素.使用jquery.mount输入参数.riotjs标签的生命周期: riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法: riot.j ...
- [转载]Node入门 » 一本全面的Node.js教程
http://www.nodebeginner.org/index-zh-cn.html 作者: Manuel Kiessling 翻译: goddyzhao & GrayZhang & ...
- 【js】【读书笔记】廖雪峰的js教程读书笔记
最近在看廖雪峰的js教程,重温了下js基础,记下一些笔记,好记性不如烂笔头嘛 编写代码尽量使用严格模式 use strict JavaScript引擎是一个事件驱动的执行引擎,代码总是以单线程执行 执 ...
- Three.js 中的参数调试控制插件dat.GUI.JS - [Three.js] - [dat.GUI]
不论是处于特殊功能的需要,还是处于效果调试方便,我们可能都需要修改模型中的参数值.在Three.js中,谷歌提供了一个js库,即dat.GUI.js用于处理这种需求. 通过该库,我们就不需要通过手动修 ...
- Vue.js教程 1.前端框架学习介绍
Vue.js教程 1.前端框架学习介绍 什么是Vue.js 为什么要学习流行框架 什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站, ...
- Node.js 教程 01 - 简介、安装及配置
系列目录: Node.js 教程 01 - 简介.安装及配置 Node.js 教程 02 - 经典的Hello World Node.js 教程 03 - 创建HTTP服务器 Node.js 教程 0 ...
随机推荐
- 详解SSL证书系列(8)了解HTTPS及和HTTP的区别
上一篇我们介绍了HTTP协议的三大缺点,那么怎么避免和解决HTTP的缺点呢,是时候请出我们的HTTPS了,那HTTPS和HTTP有什么区别呢? HTTP加上加密处理和认证以及完整性保护后即是HTTPS ...
- CH395的FTP Server(主动模式)简单应用参考
FTP(File Transfer Protocol,文件传输协议) 是 TCP/IP 协议组中的协议之一.FTP协议包括两个组成部分,其一为FTP服务器,其二为FTP客户端.本篇文章将基于FTP协议 ...
- #dp，二项式反演，容斥#CF285E Positions in Permutations
题目 问有多少个长度为 \(n\) 的排列 \(P\) 满足 \(|P_i-i|=1\) 的 \(i\) 的个数恰好为 \(k\) 个 分析 设 \(dp_{i,j,k}\) 表示前 \(i\) 个数 ...
- #笛卡尔树，构造#洛谷 7726 天体探测仪（Astral Detector）
题目传送门 分析 考虑每个数字一定会影响一定的范围, 那么可以记录每个数影响的最长区间和产生的个数, 那么通过这个可以解方程求出对于这个最长区间这个数的所在位置, 可以发现它可以满足一个树形结构,直接 ...
- #期望dp#51nod 2015 诺德街
题目传送门 分析 禁不住 QuantAsk 的诱惑(bushi) 考虑一条路线可以由若干段 \(1-2-\dots-n-\dots-2\) 以及 最后一段 \(1-\dots-x\) 组成. 对于最后 ...
- 我把分布式音乐播放器适配了Stage模型
OpenAtom OpenHarmony(以下简称"OpenHarmony")应用开发自API 8及其更早版本一直使用的是FA模型进行开发.FA模型是Feature Abilit ...
- 内容分发策略与 SEO 优化指南
内容分发 内容分发是指通过各种媒介分享.发布或传播内容给受众的过程.这些媒介可以包括不同的渠道,例如社交媒体平台(Facebook.Twitter.LinkedIn.朋友圈.微博.小红书.B 站.抖音 ...
- Windows wsl2安装Ubuntu
wsl(Windows Subsystem for Linux)即适用于Windows的Linux子系统,是一个实现在Windows 10 / 11上运行原生Linux的技术. wsl2 为其迭代版本 ...
- Luogu P3007 奶牛议会
观前须知 本题解使用 CC BY-NC-SA 4.0 许可. 同步发布于 Luogu 题解区. 更好的观看体验 请点这里. 笔者的博客主页 正文 Luogu P3007 [USACO11JAN] Th ...
- mongodb基础整理篇————索引[四]
前言 简单介绍一些索引. 正文 索引的术语: index 索引 key 键 DataPage 数据页 covered Query: ixscan/collscan: big O Natation: q ...