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. sql语句TRUNCATE 清空表数据

    清空表数据 TRUNCATE TABLE zzsfp_hwmx;

  2. 财务人提高竞争力必备的技能，怎么能少了ta！

    从近年来大数据技术的发展趋势和相关产业飞速发展的状态,可以看出当前"数据分析"的热度可以说是有增无减,而且从市场上对数据分析人才的需求缺口也可以看出企业对数据分析的重视程度.未来随 ...

  3. cas登录成功后跳转地址和退出后跳转首页

    cas登录成功后跳转地址和退出后跳转首页 CAS版本5.3 1.登录页面 的登录链接地址为 login.html ...<span v-if="username == ''" ...

  4. 如何在HarmonyOS对数据库进行备份，恢复与加密

    数据库备份与恢复 场景介绍 当应用在处理一项重要的操作,显然是不能被打断的.例如:写入多个表关联的事务.此时,每个表的写入都是单独的,但是表与表之间的事务关联性不能被分割. 如果操作的过程中出现问题, ...

  5. 全局模型可解释之部分依赖图:Partial Dependence Plot

    本部分是来自大纲 模型可解释的一个子分支. 部分依赖图可以表示1个或者2个特征对模型的预测结果所能产生的边际效应.同时也能展示1个特征和label直接是否具有:线性相关性.单调性等. 当我们把pdp应 ...

  6. 整理k8s————k8s prod相关[三]

    前言 简单整理k8s prod. 正文 prod 有两种: 自主式prod 控制器管理的prod 在Kubernetes中,最小的管理元素不是一个个独立的容器,而是Pod,Pod是最小的,管理,创建, ...

  7. Mac 修改版本号

    修改版本号 在安装某些软件(XCode)的过程中, 系统会提示版本低,需要升级到高版本, 而很多人不想升级而需要安装这些软件, 此时只需将版本号修改成软件安装要求的版本号就可以了. 由于SystemV ...

  8. 错误 内存溢出 vendor/composer/autoload_real.php on line 66

    前言 首先声明我没怎么写过php,只是当时室友做php的时候跟他一起学了几分钟. 有时候部署一些php项目的时候,发生一些错误,但是百度一下五花八门的. 这个错误的完整版是: Fatal error: ...

  9. TypeScript 的理解？与 JavaScript 的区别？

    一.是什么 TypeScript 是 JavaScript 的类型的超集,支持ES6语法,支持面向对象编程的概念,如类.接口.继承.泛型等 ❝ 超集,不得不说另外一个概念,子集,怎么理解这两个呢,举个 ...

  10. Oracle 一些触发器自治事务相关错误

    Oracle 一些触发器自治事务相关错误 table XXX is mutating,trigger/function may not see it 在触发器中调用的函数或者语句有查询当前表的操作,比 ...