例子查看链接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
} );
拉动条
不仅可以生成按钮，也可以生成拉动条。 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
} );
效果图
全部代码
<!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>
