图形化开发（四）-Three.js之调式工具-dat.GUI

图形化开发（四）-Three.js之调式工具-dat.GUI

调式方法

有些时候，我们需要调整模型的位置或者大小什么的需要每次都去场景内进行调试，现在我推荐一种常用的插件dat.GUI，接下来，我们将一起看看如何使用这一款插件：

https://github.com/dataarts/dat.gui

功能

• 参数调整
• 自动匹配参数类型 (滑块， checkbox, 编辑 等)
• 可以自定义函数

使用

1.引入

<script src="https://cdn.bootcss.com/dat-gui/0.7.1/dat.gui.min.js"></script>

2.建一个对象，在里面设置我们需要修改的一些数据：

controls = {
    positionX:0,
    positionY:0,
    positionZ:0
};

3.实例化dat.GUI对象，将需要修改的配置添加对象中，并监听变化回调：

gui = new dat.GUI();
gui.add(controls, "positionX", -1, 1).onChange(updatePosition);
gui.add(controls, "positionY", -1, 1).onChange(updatePosition);
gui.add(controls, "positionZ", -1, 1).onChange(updatePosition);

function updatePosition() {
    mesh.position.set(controls.positionX, controls.positionY, controls.positionZ);
}

这样，只要我们每次都修改对象里面的值以后，都会触发updatePosition回调，来更新模型的位置。

示例代码-dat.js

//声明一些全局变量
var renderer, camera, scene, geometry, material, mesh; // webgl 属性和位置 存在内存

// 性能插件，监听fps
stats = new Stats();
document.body.appendChild(stats.dom);

//初始化渲染器
function initRenderer() {
    renderer = new THREE.WebGLRenderer(); //实例化渲染器
    renderer.setSize(window.innerWidth, window.innerHeight); //设置宽和高
    document.body.appendChild(renderer.domElement); //添加到dom
}

//初始化场景
function initScene() {
    scene = new THREE.Scene(); //实例化场景
}

//初始化相机
function initCamera() {
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200); //实例化相机
    camera.position.set(0, 0, 15); // x, y,z
}

//创建模型
function initMesh() {
    geometry = new THREE.BoxGeometry(2, 2, 2); //创建几何体
    material = new THREE.MeshNormalMaterial(); //创建材质,七彩材质

    mesh = new THREE.Mesh(geometry, material); //创建网格
    mesh.name = 'lft';
    // mesh.visible = false;
    // mesh.position.x = 3; //将模型的位置调整到x正轴距离原点为3的位置。
    // mesh.position.y += 5; //将模型的y轴位置以当前的位置向上移动5个单位。
    // mesh.position.z -= 6;
    mesh.position.set(2, 5, -6);

    mesh.scale.x = 2; //模型沿x轴放大一倍
    mesh.scale.y = 0.5; //模型沿y轴缩小一倍
    mesh.scale.z = 1; //模型沿z轴保持不变
    scene.add(mesh); //将网格添加到场景
}

//运行动画
function animate() {
    requestAnimationFrame(animate); //循环调用函数

    mesh.rotation.x += 0.01; //每帧网格模型的沿x轴旋转0.01弧度  半圈是180度
    mesh.rotation.y += 0.02; //每帧网格模型的沿y轴旋转0.02弧度
    stats.update();
    renderer.render(scene, camera); //渲染界面

}

var controls = {
    positionX: 0,
    positionY: 0,
    positionZ: 0
};
//初始化函数，页面加载完成是调用
function init() {  // 3d三要素
    initRenderer();   // 渲染
    initScene();  // 场景
    initCamera();  // 相机

    initMesh();  // 物体

    gui = new dat.GUI();  // 实例化
    gui.add(controls, "positionX", -10, 10).onChange(updatePosition);  //只要数据发生了变化 就能触发onchange
    gui.add(controls, "positionY", -10, 10).onChange(updatePosition);
    gui.add(controls, "positionZ", -1, 1).onChange(updatePosition);

    function updatePosition() {
        mesh.position.set(controls.positionX, controls.positionY, controls.positionZ);
    }

    animate();  // 旋转,动画

    // renderer, camera, scene, geometry, material, mesh; 


}