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. CSP2019-S2总结

    目录 前言 洛谷 5657 格雷码 代码(找规律) 洛谷 5658 括号树 分析 代码 洛谷 5659 树上的数 洛谷 5664 Emiya 家今天的饭 洛谷 5665 划分 分析 代码 洛谷 566 ...

  2. 【直播回顾】OpenHarmony知识赋能第五期第一课——精益开源

    4月26日晚上19点,知识赋能第五期第一节课<精益开源--理解设计思维.精益创业.敏捷开发是如何应用到开源项目中>,在OpenHarmony开发者成长计划社群内成功举行. 本期课程,由开源 ...

  3. OpenHarmony开发之MQTT讲解

      相信MQTT这个名称大家都不陌生,物联网的开发必然会遇到MQTT相关知识的应用.那么什么是MQTT?它有什么特点?它能解决什么问题?它是如何工作的?OpenAtom OpenHarmony(以下简 ...

  4. Pandas统计计算

    基本的统计方法 Method Description count Number of non-NA values describe Compute set of summary statistics ...

  5. C# Dictionary（数据字典）的基本用法

    C# Dictionary(数据字典)的基本用法 - Mr.Cat~ - 博客园 (cnblogs.com)   通常情况下,我们可以通过 int 类型的索引来从数组或者 List 集合中查询所需的数 ...

  6. 日调用量超600亿次，HMS Core HiAI Foundation助力AI应用高效开发

    随着新技术的不断演进,人工智能已经广泛地应用到教育.金融.物流.零售.交通.医疗等各个领域.而在AI高速发展的当下,高效开发变得更为重要,如何将创意想法与AI技术深度融合,迅速转化为可落地的AI应用, ...

  7. 实时 3D 深度多摄像头跟踪 Real-time 3D Deep Multi-Camera Tracking

    实时 3D 深度多摄像头跟踪 Real-time 3D Deep Multi-Camera Tracking 论文url https://arxiv.org/abs/2003.11753 论文简述: ...

  8. 第二十一篇：信号、缓存、中间件、Form操作

    一.CSRF 二.中间件 三.缓存 四.信号 五.Form操作

  9. Scratch3之AI集成 - flappy bird AI版本

    AI神秘且有趣,我们一个经典的游戏flappy bird集成AI,实现自训练成长的聪明的笨鸟.先上效果: 初始化的笨鸟拥有分身,每个分身都有自我学习功能,根据自己的移动轨迹和得分情况进行汇总,进行新一 ...

  10. 在windows电脑中安装redis

    1,github下载地址:https://github.com/MSOpenTech/redis/tags 2,下载完成后,解压到对应文件夹 3,打开redis.windows.conf,在#requ ...