【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。