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 ...
随机推荐
- Linux服务器定时器
网络程序需要处理的第三类事件是定时事件,比如定期检测一个客户连接的活动状态.服务器程序通常管理着众多定时事件,因此有效地组织这些定时事件,使之能在预期的时间点被触发且不影响服务器的主要逻辑,对于服务器 ...
- SQL 递归核心思想（递归思维）
目前很缺递归思维,主要是算法代码写得少,本篇记录下以 PostgreSQL 代码举例(主要是非常喜欢这款性能小钢炮数据库). 树状查询不多说,很简单大家基本都会,主要讲 cte 代码递归实现不同需求. ...
- 新前言with留言板
旧博客也是会用的,但是现在只用博客园写博客,平时csdn的东西也会凑凑热闹 欢迎各位julao来留言板留言 /* ID:lemondi1 LANG:C++ TASK:test */ #include ...
- JDK12的新特性:teeing collectors
目录 简介 talk is cheap, show me the code Teeing方法深度剖析 Characteristics 总结 简介 JDK12为java.util.stream.Coll ...
- C++ Break、Continue 和 数组操作详解
C++ Break 和 Continue break 语句还可以用来跳出循环. 在以下示例中,当 i 等于 4 时跳出循环: for (int i = 0; i < 10; i++) { if ...
- 深入理解 Spring IoC 和 DI：掌握控制反转和依赖注入的精髓
在本文中,我们将介绍 IoC(控制反转)和 DI(依赖注入)的概念,以及如何在 Spring 框架中实现它们. 什么是控制反转? 控制反转是软件工程中的一个原则,它将对象或程序的某些部分的控制权转移给 ...
- 爱奇艺携手HMS Core，为用户打造更流畅的沉浸式观影体验
本文分享于HMS Core开发者论坛<[开发者说]爱奇艺携手HMS Core,为用户打造更流畅.更沉浸的观影体验>采访稿整理. 爱奇艺是国内领先的视频播放平台,通过接入HMS Core H ...
- MogDB SQLdiag 使用指南
MogDB SQLdiag 使用指南 本文出处:https://www.modb.pro/db/411957 前提条件 需要保证用户提供训练数据. 如果用户通过提供的工具收集训练数据,则需要启用 WD ...
- DevEco Device Tool 3.1 Release新版本发布，新增资源管理器、SFTP、HDC
原文链接:https://mp.weixin.qq.com/s/UGBirjf8nBjnfKck9TlyWg,点击链接查看更多技术内容: DevEco Device Tool是面向智能设备开发者 ...
- DevEco Studio 3.1差异化构建打包，提升多版本应用开发效率
原文:https://mp.weixin.qq.com/s/8XtgZ-k0mGXCjKHfSXFoOg,点击链接查看更多技术内容. HUAWEI DevEco Studio是开发Harmo ...