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 ...
随机推荐
- 12 JavaScript 关于eval函数
12 eval函数 eval本身在js里面正常情况下使用的并不多. 但是很多网站会利用eval的特性来完成反爬操作. 我们来看看eval是个什么鬼? 从功能上讲, eval非常简单. 它和python ...
- #组合计数，卢卡斯定理#D 三元组
题目 当\(z=0\)时,\(f(x,y,z)=1\), 否则 \[f(x,y,z)=\sum_{x1=1}^x\sum_{y1=1}^y(x-x1+1)(y-y1+1)f(x1,y1,z-1) \] ...
- JDK12的新特性:teeing collectors
目录 简介 talk is cheap, show me the code Teeing方法深度剖析 Characteristics 总结 简介 JDK12为java.util.stream.Coll ...
- OpenHarmony 分布式硬件关键技术
本文转载自 OpenHarmony TSC 官方微信公众号<峰会回顾第8期 | OpenHarmony 分布式硬件关键技术> 演讲嘉宾 | 李 刚 回顾整理 | 廖 涛 排版校对 ...
- Numpy广播功能
广播(Broadcast)是对不同形状(shape)的数组进行数值计算的方式. 广播规则: 如果两个数组的维度数不相同,那么小维度数组的形状将会在最左边补1: 如果两个数组的形状在任何一个维度都不匹配 ...
- C# Dev GridControl小结
1. 如何解决单击记录整行选中的问题 View->OptionsBehavior->EditorShowMode 设置为:Click 2. 如何新增一条记录 (1).gridView.Ad ...
- 【FAQ】获取Push Token失败，如何进行排查？
一. 获取Push Token的方式 获取Push Token有两种方式:一种是调用getToken方法向Push服务端请求Token,当getToken方法返回为空时,Token可通过onNewTo ...
- HDC 2022 开发者主题演讲与技术分论坛干货分享（附课件）
原文:https://mp.weixin.qq.com/s/axm6HyX0PqKCKksFxIfehg,点击链接查看更多技术内容. 11月4日-11月6日,HDC 2022在东莞成功举办,这是 ...
- 获取电脑真实的IP地址，忽略虚拟机等IP地址的干扰
/** * @author yins * @date 2018年8月12日下午9:53:58 */ import java.net.Inet4Address; import java.net.Inet ...
- gitee基于webhooks实现前端简单自动化部署
1.为什么采用自动化部署 简而言之,程序员优秀传统:懒 =>高级生产力. 基于gitee进行的自动化部署,服务器环境为Ubuntu 基于webhooks进行的自动化部署更加轻快便捷 2.部署步骤 ...