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. 链表队列（LinkedListQueue）

    栈操作 入队 template<typename T> void LinkedListQueue<T>::enqueue(T e) { if (tail == nullptr) ...

  2. set集合的TreeSet类

    TreeSet 类 TreeSet类是Set接口的一个实现类,主要作用是用于对对象的排序以及确定存入对象的唯一性. 它的底层是红黑树,用来确保元素的排序和唯一性的,基于map对象,TreeSet是对T ...

  3. ubuntu环境下因pie选项导致双击启动失败的问题

    在ubuntu环境下,链接可执行文件时增加-pie选项,双击可执行程序,无法正常启动. 对于这个现象,stackoverflow有个帖子,gcc creates mime type applicati ...

  4. 基于OpenHarmony的智能指南针

    电子指南针是现代的一种重要导航工具,大到飞机船舶的导航,小到个人手机导航,电子指南针可以说和咱们生活息息相关,密不可分.为什么电子指南针能指示方向?本 Demo 将为你呈现,其中蕴含了人类智慧及大自然 ...

  5. Python - 字典4

    复制字典 您不能简单地通过输入 dict2 = dict1 来复制一个字典,因为 dict2 只会成为 dict1 的引用,对 dict1 的更改也会自动应用于 dict2. 有多种方法可以复制字典, ...

  6. C# 属性概述

    属性概述 属性允许类公开获取和设置值的公共方法,而隐藏实现或验证代码. get 属性访问器用于返回属性值,而 set 属性访问器用于分配新值. 这些访问器可以具有不同的访问级别. 有关详细信息,请参阅 ...

  7. Qt设置窗口显示到扩展屏

    #include <QDesktopWidget> void Dialog::setDisplayPos() { QDesktopWidget *desktop = QApplicatio ...

  8. 第十四篇：JavaScript基础

    一.CSS内容补充之position 10.position:fixed:固定div在页面的一个位置: top:0; right:0; left:0; position:absolute + rela ...

  9. CentOS 6.5 ZIP、RAR文件压缩解压操作详解

    ============zip文件的操作================= zip -r data.zip data 解释:将data文件夹压缩成了data.zip格式.   unzip data.z ...

  10. Android Studio制作简单登录界面

    实现目标 应用线性布局设计登录界面,要求点击输入学号时弹出数字键盘界面,点击输入密码时弹出字母键盘,出现的文字.数字.尺寸等全部在values文件夹下相应.xml文件中设置好,使用时直接引用.当用户名 ...