我的threejs学习笔记（二）——dat.gui使用

来源：互联网发布：sqlserver集群编辑：程序博客网时间：2024/06/14 00:16

写在前面

dat.gui可以方便地向场景中添加控制条，随时调整参数。

用法

<script src="../../lib/dat.gui-master/build/dat.gui.js"></script>    <link rel="stylesheet" href="../../lib/dat.gui-master/build/dat.gui.css">

引入js文件和css文件

var controls=new function(){    this.ctrl_1=0;    this.ctrl_2=0;}var gui=new dat.GUI();gui.add(controls,"ctrl_1",0,10);gui.add(controls,"ctrl_2",-3,3);cube.rotation.x+=controls.ctrl_1;cube.position.x=controls.ctrl_2;

首先声明controls控制器，并向其中添加需要控制的变量（并初始化）。

然后定义gui,并设置参数的最小值和最大值。

实例

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>threejs demo_3</title>    <script src="../three.js-master/build/three.min.js"></script>    <script src="../jquery/jquery.js"></script>    <script src="../../lib/dat.gui-master/build/dat.gui.js"></script>    <link rel="stylesheet" href="../../lib/dat.gui-master/build/dat.gui.css">    <style>        body{            margin:0;           /*让背景颜色充满窗口，否则会有白边*/            overflow: hidden;  /*防止滚动条电的产生*/        }        canvas{        }    </style></head><body><script>    $(document).ready(function () {        //定义控制器        var controls=new function () {          this.speed=0.02;          this.posX=0;          this.posY=0;          this.posZ=3;          this.cube_posX=0;          this.cube_posY=0;          this.cube_posZ=0;          this.camera_posX=0;          this.camera_posY=0;          this.camera_posZ=2;          this.camera_rotation=0;        };        //生成gui并添加参数        var gui=new dat.GUI();        gui.add(controls,"speed",0,0.5);        gui.add(controls,"posX",0,5);        gui.add(controls,"posY",0,5);        gui.add(controls,"posZ",0,5);        gui.add(controls,"cube_posX",-3,3);        gui.add(controls,"cube_posY",-3,3);        gui.add(controls,"cube_posZ",-3,3);        gui.add(controls,"camera_posX",-2,2);        gui.add(controls,"camera_posY",-2,2);        gui.add(controls,"camera_posZ",-2,2);        gui.add(controls,"camera_rotation",-2,2);        var scene=new THREE.Scene();        var camera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);        var renderer=new THREE.WebGLRenderer();        renderer.setSize(window.innerWidth,window.innerHeight);        renderer.setClearColor("#907770");        document.body.appendChild(renderer.domElement);        var cubeGeo=new THREE.CubeGeometry(1,1,1);        var cubeMaterial=new THREE.MeshLambertMaterial({color:0xff88aa});        var cube=new THREE.Mesh(cubeGeo,cubeMaterial);        scene.add(cube);        var pointLight=new THREE.PointLight(0xffffff);        scene.add(pointLight);        var render=function () {          requestAnimationFrame(render);          camera.position.set(controls.camera_posX,controls.camera_posY,controls.camera_posZ);          camera.rotation.x=controls.camera_rotation;          pointLight.position.set(controls.posX,controls.posY,controls.posZ);          cube.rotation.x+=controls.speed;          cube.rotation.y+=controls.speed*0.5;          cube.position.set(controls.cube_posX,controls.cube_posY,controls.cube_posZ);          renderer.render(scene,camera);        };        render();    });</script></body></html>

以上是可以控制物体坐标，光源坐标和相机坐标的例子。

0 0