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

准备工作：

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 * 2);
    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( 60, window.innerWidth / window.innerHeight, 1, 1000 );
                camera.position.z = 500;
                //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(100,100,100,100),
                    new THREE.MeshLambertMaterial({
                        coloe:0x00d9b5
                    })
                )
                scene.add(cube);
                // lights
                light = new THREE.DirectionalLight(0x000000);
                light.position.set( 1, 1, 1 );
                scene.add( light );
                light = new THREE.DirectionalLight(0x00d9b5);
                light.position.set( -1, -1, -1 );
                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。