为了能够快速地搭建three.js的交互ui，官方提供了一个GUI组件，通过简单的语法学习就能够使用。
下面我们就来学习如何使用
用法一首先声明一个对象，这个对象设置获取一个交互.
然后就就可以使用GUI来进行生成交互UI组件
生成一个panel组件版,然后将组件的对象添加到这个组件版，完成之后就能够生成一个交互界面了。
// 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 } );
//选项 var states = [ 'Idle', 'Walking', 'Running', 'Dance', 'Death', 'Sitting', 'Standing' ]; // 添加 gui.add( params, 'states' ).options( states ).onChange( function ( value ) { // do something } );
效果图
全部代码
<!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>