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库使用的更多相关文章

  1. svg.js教程及使用手册详解（一）

    做毕设的时候,因为要使用到画图和自定义动画,所以接触到了SVG.网上关于SVG和Canvas的对比很多,具体的辨析这里就不赘言.网上关于SVG的所谓教程基本上都是SVG本身,但是却没有一个针对svg. ...

  2. js基础到精通全面教程--JS教程

    适合阅读范围:对JavaScript一无所知-离精通只差一步之遥的人 基础知识:HTML JavaScript就这么回事1:基础知识 1 创建脚本块 1: <script language=”J ...

  3. 封装常用的js（Base.js）——【01】理解库，获取节点，连缀，

    封装常用的js(Base.js)——[01]理解库,获取节点,连缀,  youjobit07 2014-10-10 15:32:59 前言:       现如今有太多优秀的开源javascript库, ...

  4. 专门针对初学者的Node.js教程

    转载原文:http://www.csdn.net/article/2013-08-28/2816731-absolute-beginners-guide-to-nodejs Node.js的教程并不缺 ...

  5. riot.js教程【四】Mixins、HTML内嵌表达式

    前文回顾 riot.js教程[三]访问DOM元素.使用jquery.mount输入参数.riotjs标签的生命周期: riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法: riot.j ...

  6. [转载]Node入门 » 一本全面的Node.js教程

    http://www.nodebeginner.org/index-zh-cn.html 作者: Manuel Kiessling 翻译: goddyzhao & GrayZhang & ...

  7. 【js】【读书笔记】廖雪峰的js教程读书笔记

    最近在看廖雪峰的js教程,重温了下js基础,记下一些笔记,好记性不如烂笔头嘛 编写代码尽量使用严格模式 use strict JavaScript引擎是一个事件驱动的执行引擎,代码总是以单线程执行 执 ...

  8. Three.js 中的参数调试控制插件dat.GUI.JS - [Three.js] - [dat.GUI]

    不论是处于特殊功能的需要,还是处于效果调试方便,我们可能都需要修改模型中的参数值.在Three.js中,谷歌提供了一个js库,即dat.GUI.js用于处理这种需求. 通过该库,我们就不需要通过手动修 ...

  9. Vue.js教程 1.前端框架学习介绍

    Vue.js教程 1.前端框架学习介绍 什么是Vue.js 为什么要学习流行框架 什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站, ...

  10. Node.js 教程 01 - 简介、安装及配置

    系列目录: Node.js 教程 01 - 简介.安装及配置 Node.js 教程 02 - 经典的Hello World Node.js 教程 03 - 创建HTTP服务器 Node.js 教程 0 ...

随机推荐

  1. 正则表达式 (?<= 与 (?= 的区别

    (?=pattern) 正向肯定预查,在任何匹配pattern的字符串开始处匹配查找字符串.这是一个非获取匹配, 也就是说,该匹配不需要获取供以后使用.例如,"Windows(?=95|98 ...

  2. #树形dp，二分#UVA1407 Caves 洛谷 3698 [CQOI2017]小Q的棋盘

    题目 给定一棵树,现在需要找到一条由节点1出发长度为\(x\)的路径, 问最多经过的节点数,重复经过只计算一次(不一定是简单路径) UVA的那道题多组数据多组询问,边权还不一定是1,\(n\leq 5 ...

  3. 巴延兴：从主导多个SIG组到OpenHarmony“代码贡献之星”，我是如何做到的？

    编者按:在 OpenHarmony 生态发展过程中,涌现了大批优秀的代码贡献者,本专题旨在表彰贡献.分享经验,文中内容来自嘉宾访谈,不代表 OpenHarmony 工作委员会观点. 巴延兴 深圳开鸿数 ...

  4. Python 安装与快速入门

    Python安装 许多PC和Mac已经预装了Python. 要检查在Windows PC上是否安装了Python,请在开始菜单中搜索Python,或在命令行(cmd.exe)上运行以下命令: C:\U ...

  5. openGauss内存引擎中的索引

    一.索引 索引是一种用于快速查询和检索数据的数据结构.常见的索引结构有: B 树, B+树和 Hash. 索引的作用就相当于目录的作用.打个比方: 我们在查字典的时候,如果没有目录,那我们就只能一页一 ...

  6. 开发指导—利用CSS动画实现HarmonyOS动效（一）

     注:本文内容分享转载自HarmonyOS Developer官网文档 一. CSS语法参考 CSS是描述HML页面结构的样式语言.所有组件均存在系统默认样式,也可在页面CSS样式文件中对组件.页面自 ...

  7. hive窗口分析函数使用详解系列二之分组排序窗口函数

    1.综述 我们讨论面试中各大厂的SQL算法面试题,往往核心考点就在于窗口函数,所以掌握好了窗口函数,面对SQL算法面试往往事半功倍. 已更新第一类聚合函数类,点击这里阅读 hive窗口函数聚合函数类 ...

  8. 抓包整理————ip 协议二[十三]

    前言 介绍一下什么是nat协议和napt协议,和简单带一下LVS. 正文 什么是nat(Network Address Translation) 协议呢? 比如现在你家分配了一个ip,但是你家有10个 ...

  9. c# MCV 实现跨域

    前言 core跨域严格来说是要分为两步的,因为分为简单跨域和复杂跨域,第一种为直接允许跨域,第二种因为存在某些框架本身不允许put,delete这两个,那么这就是一个问题了.对的,那么mvc这种重量级 ...

  10. task 如何终止线程

    前言 这个直接上代码. 代码逻辑是使用var tokenSource = new CancellationTokenSource(); 让tokenSource 去取消.值得注意的是取消线程后,线程会 ...