three.js教程1补充-gui.js库使用

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/

posted @   JackGIS  阅读(4135)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示