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. MySQL联结

    创建联结 mysql> SELECT vend_name,prod_name,prod_price FROM vendors,products WHERE vendors.vend_id=pro ...

  2. 前端问题整理 Vite+Vue3+Ts 创建项目及配置 持续更新

    前端问题整理 持续更新 目录 前端问题整理 持续更新 前端 Vue 篇 @项目配置 1.node 版本过高问题 安装nvm 管理node版本 2.镜像证书无效问题 3.npm 版本问题 4.npm i ...

  3. AT-abc347（C,D）

    AtCoder Beginner Contest 347 C - Ideal Holidays 这场做得最头疼的题 分析 容易想到先用$(d_i+a+b-1)%(a+b)+1$把$d_i$映射到$[1 ...

  4. #前缀和优化dp#牛客练习赛71 C 数学考试

    题目 求\(1\sim n\)的排列,有\(m\)个限制条件,第\(i\)个限制条件\(p_i\), 表示前\(p_i\)个数不能是\(1\sim p_i\)的排列,求符合要求的排列的个数. 分析 这 ...

  5. 带你玩转OpenHarmony AI：打造智能语音子系统

    简介 AI时代,智者当先,判断一个终端设备是否智能,语音能力是必不可缺的.智能家居.智慧厨房.智能汽车等等,一切衣食住行都在往智能方向发展,那我们该如何在OpenAtom OpenHarmony(简称 ...

  6. HarmonyOS NEXT调优工具Smart Perf Host高效使用指南

      在软件开发的过程中,很多开发者都经常会遇到一些性能问题,比如应用启动慢.点击滑动卡顿.应用后台被杀等,想要解决这些问题势必需要收集大量系统数据.而在收集数据的过程中,开发者则需要在各种工具和命令之 ...

  7. 英语 one day

    前言 I do not know if it work,but just go. 内容 1.quote vt:摘要,引用 n:引语 He quote a passage from the presid ...

  8. 给picgo上传的图片加个水印

    之前给大家介绍了picgo和免费的图床神器.我们本可以开开心心的进行markdown写作了. 但是总是会有那么一些爬虫网站过来爬你的文章,还把你的文章标明是他们的原著.咋办呢?这里有一个好的办法就是把 ...

  9. 推荐一个页面引导库 driver.js

    页面引导功能是 web 开发中常见的一个功能.通过页面引导功能,你可以让用户第一时间熟悉你的页面功能.今天给大家推荐一个页面引导库 driver.js. 简介 driver.js 是一款用原生 js ...

  10. 力扣13(java)-罗马数字转整数（简单）

    题目: 罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值I 1V 5X 10L 50C 100D 500M 1000例如, 罗马数字 2 写做 II ,即为两个并列的 1 ...