Stats和dat.GUI的位置控制及使用

1 引入必要的源文件src，实际位置需认真确认

2 位置控制

本质上都是一个容器，采用HTML定位方式。Stats默认位置为左上角，其style有left、right和top等参数可以控制位置，可以自己设置像素值。

GUI默认位置为右上角，其实都可以自己设置。

//将渲染的结果输出到指定页面元素中,必须放在场景渲染之后

stats = new Stats();

stats.showPanel( 0 ); // 0: fps, 1: ms, 2: mb, 3+: custom

document.getElementById("WebGLwxp").appendChild(stats.dom);

stats.domElement.style.position = 'absolute';

stats.domElement.style.left = '10px';

stats.domElement.style.top = '50px';

3 Stats的使用

注意定义位置，一定要在渲染结点之后加入

            document.getElementById("WebGLwxp").appendChild(renderer.domElement);
            window.addEventListener('keydown', WxpKeyPressed, false);
            window.addEventListener('mousedown', WxpMouseDown, false);
            window.addEventListener('mousewheel', WxpMousewheel, false);
            
            //将渲染的结果输出到指定页面元素中,必须放在场景渲染之后
            stats = new Stats();
            stats.showPanel( 0 ); // 0: fps, 1: ms, 2: mb, 3+: custom            
            document.getElementById("WebGLwxp").appendChild(stats.dom);
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '10px';
            stats.domElement.style.top = '50px';

使用必须在渲染函数中，设置begin和end

       //渲染场景
        function WxpRender() {

            stats.begin();
           
            //其他全局处理功能

            //渲染场景
            renderer.render(scene, camera);

            stats.end();
            //通过requestAnimationFrame方法在特定时间间隔重新渲染场景,循环调用
            requestAnimationFrame(WxpRender);    
        }

4 dat.gui的使用

dat.gui的本质是设置一些全局变量与GUI元素相关联，以控制对应变量的值。

定义，其中GuiControls为一个全局容器类，包含GUI里面的相关变量，其实，也可以定义自己需要使用的全局变量。

        //界面设置  
        function WxpGuiSetting() {
            //存放所有需要改变的属性的对象
            //设置默认值
            GuiControls = new function() {
                this.rotationSpeed = 0.01;

                this.camerPositionX = 4.00;
                this.camerPositionY = -8.00;
                this.camerPositionZ = 4.00;
            };

            //创建dat.GUI，设置位置。
            var gui = new dat.GUI();
            gui.domElement.style.position = 'absolute';
            gui.domElement.style.right = '100px';
            gui.domElement.style.top = '50px';

            //传递并设置属性变量，其他自用变量就不设置
            gui.add(GuiControls, 'rotationSpeed', 0, 0.5);

            gui.add(GuiControls, 'camerPositionX', -40.0, 20.0);
            gui.add(GuiControls, 'camerPositionY', -40.0, 10.0);
            gui.add(GuiControls, 'camerPositionZ', 0.0, 40.0);
        }

在WxpRender函数里面使用变量值。

        //渲染场景
        function WxpRender() {

            stats.begin();

            //GUI更新必要的参数
            cube.rotation.z += GuiControls.rotationSpeed;

            camera.position.x = GuiControls.camerPositionX;
            camera.position.y = GuiControls.camerPositionY;
            camera.position.z = GuiControls.camerPositionZ;

            WxpTexture.offset.x += 0.006;            
                               
            //渲染场景
            renderer.render(scene, camera);
            stats.end();
            //通过requestAnimationFrame方法在特定时间间隔重新渲染场景,循环调用
            requestAnimationFrame(WxpRender);    
        }

Stats和dat.GUI的位置控制及使用

猜你喜欢