【three.js学习笔记】04 dat.gui 组件使用

dat.gui组件使用

dat gui组件可以方便地改变某些值，并快速预览这些值的改变所产生的变化
远程调用：
https://threejs.org/examples/js/libs/dat.gui.min.js

在加入这个script之后 对这个进行初始化，这样我们才能知道需要更改哪些变量:

//创建一个需要进行改变的控制变量对象
var guiControl = new function(){
    this.rotationSpeed = 0.02;
    this.circleSpeed = 0.02;
    this.upDownSpeed = 0.02;
}

将这个对象传递给gui对象，让它的数值变成可以控制的：

    var gui = new dat.GUI();//新建gui控制组件
    gui.add(guiControl, 'rotationSpeed', 0, 1);//添加旋转的速度数值控制 数值大小在0-1之间
    gui.add(guiControl, 'circleSpeed', 0, 1);//绕点旋转速度
    gui.add(guiControl, 'upDownSpeed', 0, 1);//上下活塞运动速度

更改了一小部分的代码旋转物体的函数代码，要三个速度太麻烦了干脆改成了一个

    //旋转物体的函数
    function rotate(obj,speed){
        obj.rotation.x += speed;
        obj.rotation.y += speed;
        obj.rotation.z += speed;
    }

更改animate函数，让其对控制器的数值产生反应

    function animate(){
        requestAnimationFrame(animate);
        rotate(cube,guiControl.rotationSpeed);
        goesRound(sphere,guiControl.circleSpeed);
        upAndDown(cylinder,guiControl.upDownSpeed);
        renderer.render(scene,camera);
        controls.update();
        stats.update();
    }

完成 运行代码：

这个时候就能通过调整右边控制面板上面的 数值来对动画的速度进行实时地观察了

添加浏览器自适应

添加浏览器窗口大小的自适应事件，可以让浏览器大小发生改变的时候，不会有地方留出空白

//浏览器大小时改变相机与渲染器函数
function onResize(){
    camera.aspect = window.innerWidth/window.innerHeight;//改变相机的长宽比
    camera.updateProjectionMatrix();//更新相机投影矩阵 如果没有这个那么在改变窗口大小的时候就会拉伸变形
    renderer.setSize(window.innerWidth,window.innerHeight);//更新渲染器大小
}

同时需要添加一个监听事件，让浏览器页面大小发生改变的时候触发该事件：

window.addEventListener('resize', onResize, false);

将变量camera/renderer/scene定义都移动到init函数外面，让onResize()函数可以访问得到变量；

var scene,camera,renderer;
function onResize(){
    ……
}
function init(){
    ……
}
window.addEventListener('resize', onResize, false);

这个时候改变相机大小 ，中心点的位置不会改变了
完成效果：
three.js 使用dat.gui
请自行查看源码开放

扫描二维码关注公众号，回复： 146141 查看本文章