Three.js 中的参数调试控制插件dat.GUI.JS - [Three.js] - [dat.GUI]

不论是处于特殊功能的需要，还是处于效果调试方便，我们可能都需要修改模型中的参数值。在Three.js中，谷歌提供了一个js库，即dat.GUI.js用于处理这种需求。通过该库，我们就不需要通过手动修改源码来观察不同参数对模型的效果影响。

demo效果如下：

![](https://img2018.cnblogs.com/blog/1735896/202001/1735896-20200102004608083-2026036975.gif)

关键代码

入口文件：

function init() {

    var stats = initStats();

    var renderer = initRenderer();

    var camera = initCamera();

    var scene = new THREE.Scene();

    var clock = new THREE.Clock();

    initDefaultLighting(scene);

    initModel()

    initControls();

    render();

    draw(scene,renderer,camera);

    function initModel() {

        //辅助工具

        var helper = new THREE.AxesHelper(900);

        scene.add(helper);

        // var map = new THREE.TextureLoader().load("./assets/jay.jag");

        //外部盒子

        // var material = new THREE.MeshLambertMaterial({

        //     // map: map

        //     color: 0xffffff,

        // });

        // material.transparent = true;

        // material.opacity = 0.4;

        //--------------------------------地板--------------------------

        var planeGeometry = new THREE.PlaneGeometry(1000, 1000, 50, 50);

        var planeMaterial = new THREE.MeshBasicMaterial({

            color: 0xff0000,

            wireframe: true

        });

        planeMaterial.transparent = true;

        planeMaterial.opacity = 0.2;

        plane = new THREE.Mesh(planeGeometry, planeMaterial);

        plane.rotation.x = -0.5 * Math.PI;

        plane.position.x = 0;

        plane.position.y = -6;

        plane.position.z = 0;

        //告诉底部平面需要接收阴影

        plane.receiveShadow = true;

        scene.add(plane);

        // scene.add(PlaneSegs);

        //--------------------------------地板end-----------------------

    }

    //初始化控制器

    var obtControls; //定义控制器变量

    function initControls() {

        //定义控制器核心

        obtControls = new THREE.OrbitControls(camera, renderer.domElement);

        // 如果使用animate方法时，将此函数删除

        // controls.addEventListener('change', render);

        //以下都是为了满足各种需求的各种控制器配置参数

        obtControls.enableDampling = true; //使动画循环使用时阻尼或自转 意思是否有惯性

        obtControls.enableZoom = true; //是否允许缩放

        obtControls.enablePan = true; //是否开启鼠标右键拖拽

        obtControls.autoRotate = false; //是否允许自动旋转

        obtControls.dampingFactor = 0.25; //动态阻尼系数：就是鼠标拖拽旋转灵敏度

        obtControls.minDistance = 200; //设置相机距离原点的最近距离；

        obtControls.maxDistance = 1000; //设置相机距离原点的最远距离；

    }

    //控制更新

    function render() {

        stats.update();

        // fpControls.update(clock.getDelta());

        obtControls.update(clock.getDelta());

        requestAnimationFrame(render);

        renderer.render(scene, camera)

    }

}

模型文件

function draw(scene,renderer,camera) {

//方体

var cubeGeometry = new THREE.BoxGeometry(20,20,20);

var cubeMaterial = new THREE.MeshLambertMaterial({

    color:0xffaaaa,

    wireframe:true

});

var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);

cube.position.x = 0;  cube.position.y = 10;  cube.position.z = 80;

cube.castShadow  = true;

cube.onBeforeRender = function(){

    this.rotation.x += 0.02;

    this.rotation.y += 0.02;

    this.rotation.z += 0.02;

}

scene.add(cube)

//球体

var sphereGeometry = new THREE.SphereGeometry(20,40,50);

var sphereMaterial = new THREE.MeshLambertMaterial({

    color:0x777777,

    wireframe: true

});

var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);

sphere.castShadow  = true;

var step = 0;

sphere.onBeforeRender = function(){

step += 0.04;

sphere.position.x = 20 + (10*(Math.cos(step)));

sphere.position.y = 20 + (10*Math.abs(Math.sin(step)));

}

scene.add(sphere)

//添加dat.GUI调试控制

var controls = new function(){//以下关键

    this.rotationSpeed = 0.02;

    this.bouncingSpeed = 0.03;

}

var gui = new dat.GUI();

gui.add(controls,'rotationSpeed',0,0.5);

gui.add(controls,'bouncingSpeed',0,0.5);

renderScene();

function renderScene(){

    cube.rotation.x += controls.rotationSpeed;

    cube.rotation.y += controls.rotationSpeed;

    cube.rotation.z += controls.rotationSpeed;

    step += controls.bouncingSpeed;

    sphere.position.x = 20 +(10*(Math.cos(step)));

    sphere.position.y = 20 +(10*Math.abs(Math.sin(step)));

    requestAnimationFrame(renderScene);

    renderer.render(scene,camera)

}

//地面

var planeGeometry = new THREE.PlaneGeometry(300,300,20,20);

var planeMaterial = new THREE.MeshPhongMaterial({

    color:0x222222,

    side: THREE.Double

});

var plane = new THREE.Mesh(planeGeometry,planeMaterial);

plane.rotation.x = -0.5 * Math.PI;

plane.position.x = 0;

plane.position.y = -5;

plane.position.z = 0

plane.receiveShadow   = true;

scene.add(plane)

//灯光

var spotlight = new THREE.SpotLight(0xffffff);

spotlight.position.set(-40,60,-10);

spotlight.castShadow = true

scene.add(spotlight);

}