threejs中gui的用法总结

资料

例子查看链接

gui

为了能够快速地搭建three.js的交互ui，官方提供了一个GUI组件，通过简单的语法学习就能够使用。

下面我们就来学习如何使用

用法一

首先声明一个对象，这个对象设置获取一个交互.

  
var params = {    
                color: '#ffffff',    
                scale: 4,    
                flowX: 1,    
                flowY: 1  ,
                states:"Walking"  
            };

然后就就可以使用GUI来进行生成交互UI组件

生成一个panel组件版,然后将组件的对象添加到这个组件版，完成之后就能够生成一个交互界面了。

// dat.gui

颜色选择器

                var gui = new  GUI();    
    
                gui.addColor( params,    'color' ).onChange( function ( value ) {    
                   // do something   
                } );

QQ图片20211130150546.png

拉动条
不仅可以生成按钮，也可以生成拉动条。

 gui.add( params, 'scale', 1, 10 ).onChange( function ( value ) {
// do something
 } );

微信图片_20211130150753.png

gui.add( params, 'flowX', - 1, 1 ).step( 0.01 ).onChange( function ( value ) {
                  // do something
} );

微信图片_20211130150937.png

 gui.add( params, 'flowY', - 1, 1 ).step( 0.01 ).onChange( function ( value ) {
                  // do something
                } );

微信图片_20211130151003.png

下拉表

 //选项
 var states = [ 'Idle', 'Walking', 'Running', 'Dance', 'Death', 'Sitting', 'Standing' ];
 // 添加
 gui.add( params, 'states' ).options( states ).onChange( function ( value ) {
             // do something
} );

效果图

微信图片_20211130151043.png

全部代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js - gui</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link type="text/css" rel="stylesheet" href="main.css">
    </head>
    <body>

        <div id="container"></div>
        <script type="module">
            import * as THREE from '../build/three.module.js';
            import { GUI } from './jsm/libs/dat.gui.module.js';
            var scene, camera, renderer;
            var params = {
                color: '#ffffff',
                scale: 4,
                flowX: 1,
                flowY: 1,
                states:"Walking"
            };

            init();
            animate();
            function init() {

                // scene

                scene = new THREE.Scene();

                // camera

                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 200 );
                camera.position.set( - 15, 7, 15 );
                camera.lookAt( scene.position );

                // renderer
                renderer = new THREE.WebGLRenderer( { antialias: true } );
                renderer.setSize( window.innerWidth, window.innerHeight );
                renderer.setPixelRatio( window.devicePixelRatio );
                document.body.appendChild( renderer.domElement );

                // dat.gui

                var gui = new GUI();

                gui.addColor( params, 'color' ).onChange( function ( value ) {
                    //do something
                } );
                gui.add( params, 'scale', 1, 10 ).onChange( function ( value ) {

                    //do something

                } );
                gui.add( params, 'flowX', - 1, 1 ).step( 0.01 ).onChange( function ( value ) {
                    //do something

                } );
                gui.add( params, 'flowY', - 1, 1 ).step( 0.01 ).onChange( function ( value ) {
                    //do something

                } );
                //选项
                var states = [ 'Idle', 'Walking', 'Running', 'Dance', 'Death', 'Sitting', 'Standing' ];
                 gui.add( params, 'states' ).options( states ).onChange( function ( value ) {
                          //do something
                } );;
            

                gui.open();

                window.addEventListener( 'resize', onResize, false );

            }

            function onResize() {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize( window.innerWidth, window.innerHeight );

            }

            function animate() {
                requestAnimationFrame( animate );
                render();
            }

            function render() {
                renderer.render( scene, camera );
            }

        </script>
</body>
</html>

例子查看链接

gui

用法一

热门

最新