准备工作：

1.stat.js

stat.js是Three.js的作者Mr. Doob的另一个有用的JavaScript库。很多情况下，我们希望知道实时的FPS信息，从而更好地监测动画效果。这时候，stat.js就能提供一个很好的帮助，它占据屏幕中的一小块位置（如左上角），效果为：，单击后显示每帧渲染时间：。

下载链接：https://github.com/mrdoob/stats.js/blob/master/build/stats.min.js

使用方法：引入文件后

var stat = null;

function init() {

    stat = new Stats();   //实例化stat

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

    stat.domElement.style.right = '0px';

    stat.domElement.style.top = '0px';

    document.body.appendChild(stat.domElement);

    // Three.js init ...

}

动画重绘函数draw中调用stat.begin();与stat.end();分别表示一帧的开始与结束：

function draw() {

    stat.begin();

    mesh.rotation.y = (mesh.rotation.y + 0.01) % (Math.PI * );

    renderer.render(scene, camera);

    stat.end();

}

最终就能得到FPS效果了。

2.OrbitControls.js

OrbitControls.js是一个类似于精灵球的插件。使用这个插件后可以方便的使用鼠标控制世界旋转，关于这个插件国内的资料真的是少。走了不少弯路，

先附上下载链接：https://github.com/mrdoob/three.js/blob/dev/examples/js/controls/OrbitControls.js

OrbitControls旋转的摄像机，大致的意思是这个。新手勿喷！！！

OrbitControls接受两个参数第一个参数一般设置为camera相机，第二个参数为render.domelement,

使用方法：

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

controls.addEventListener( 'change', render );

此处贴源码

function animate() {

    requestAnimationFrame( animate );

    controls.update(); // required if controls.enableDamping = true, or if controls.autoRotate = true

    stats.update();

    render();
 }

开始工作

js部分

           var stats;

            var camera, controls, scene, renderer;

            init();

            animate();

            function init() {

                //scene

                scene = new THREE.Scene();

                scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );

                //renderer

                renderer = new THREE.WebGLRenderer();

                renderer.setClearColor(0xe8e8e8);

                renderer.setPixelRatio( window.devicePixelRatio );

                renderer.setSize( window.innerWidth, window.innerHeight );

                var container = document.getElementById( 'container' );

                container.appendChild( renderer.domElement );

                //camera

                camera = new THREE.PerspectiveCamera( , window.innerWidth / window.innerHeight, ,  );

                camera.position.z = ;

                //mouseControl

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

                controls.addEventListener( 'change', render ); // add this only if there is no animation loop (requestAnimationFrame)

                controls.enableDamping = true;

                controls.dampingFactor = 0.25;

                controls.enableZoom = true;

                // world

                var cube=new THREE.Mesh(new THREE.CubeGeometry(,,,),

                    new THREE.MeshLambertMaterial({

                        coloe:0x00d9b5

                    })

                )

                scene.add(cube);

                // lights

                light = new THREE.DirectionalLight(0x000000);

                light.position.set( , ,  );

                scene.add( light );

                light = new THREE.DirectionalLight(0x00d9b5);

                light.position.set( -, -, - );

                scene.add( light );

                light = new THREE.AmbientLight(0x00d9b5);

                scene.add( light );

                //

                stats = new Stats();

                container.appendChild( stats.dom );

                //

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

            }

            function onWindowResize() {

                camera.aspect = window.innerWidth / window.innerHeight;

                camera.updateProjectionMatrix();

                renderer.setSize( window.innerWidth, window.innerHeight );

            }

            function animate() {

                requestAnimationFrame( animate );

                controls.update(); // required if controls.enableDamping = true, or if controls.autoRotate = true

                stats.update();

                render();

            }

            function render() {

                renderer.render( scene, camera );

            }

html

<div id="container"></div>

附上链接：http://runjs.cn/detail/eb4s7gxv。

巴特西

【webGL】插件的使用的，实现一个鼠标动画的盒子

准备工作：

1.stat.js

2.OrbitControls.js

开始工作

js部分

最新文章

热门文章