帶有三個js顯示的對象的渲染性能問題

Question

我正在使用Three.js渲染obj文件（來自Blender），而我遇到的問題是動畫隨着時間的流逝而變慢（而不是戲劇性！）。

這是我使用的代碼：

<script>

            var objcontainer, stats;

            var camera, scene, renderer;

            var mouseX = 0, mouseY = 0;

            var windowHalfX = window.innerWidth / 2;
            var windowHalfY = window.innerHeight / 2;

            init(); 
            animate();


            function init() {

                objcontainer = document.createElement( 'div' );
                document.body.appendChild( objcontainer );

                // scene
                scene = new THREE.Scene();

                camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
                camera.position.z = 300;
                camera.position.x = 0;
                camera.position.y = 0;
                scene.add( camera );

                /*var ambient = new THREE.AmbientLight( 0x101030 );
                scene.add( ambient );*/

                var directionalLight = new THREE.DirectionalLight( 0xffffff );
                directionalLight.position.set( 1, 1, 1 ).normalize();
                scene.add( directionalLight );

                var loader = new THREE.OBJMTLLoader();
                loader.addEventListener( 'load', function ( event ) {
                    var object = event.content;

                    object.position.y = 20;
                    object.position.x = 0;
                    object.position.z = 0;
                    object.rotation.x = -(Math.PI / 2);
                    scene.add( object );
                }, false);
                loader.load('objects/coque.obj', 'objects/coque.mtl');
                loader.load('objects/ecran_int.obj', 'objects/ecran_int.mtl');
                loader.load('objects/ecran_tour.obj', 'objects/ecran_tour.mtl');
                loader.load('objects/app_photo.obj', 'objects/app_photo.mtl');


                renderer = new THREE.WebGLRenderer({
                    antialias       : true // to get smoother output
                });
                renderer.setClearColorHex( 0xe5e5e5, 1 );
                renderer.setSize( window.innerWidth, window.innerHeight );
                objcontainer.appendChild( renderer.domElement );            
            }

            $('#left').bind('mouseenter', function() {
                this.iid = setInterval(function() {
                camera.position.x = camera.position.x + 10;
                camera.lookAt( scene.position );
                renderer.clear();
                renderer.render( scene, camera );                 
            }, 25);
            }).bind('mouseleave', function(){
                this.iid && clearInterval(this.iid);
            });


            $('#right').bind('mouseenter', function() {
                this.iid = setInterval(function() {
                camera.position.x = camera.position.x - 10;
                camera.lookAt( scene.position );
                renderer.clear();
                renderer.render( scene, camera );              
            }, 25);
            }).bind('mouseleave', function(){
                this.iid && clearInterval(this.iid);
            });

            $('#up').bind('mouseenter', function() {
                this.iid = setInterval(function() {
                camera.position.y = camera.position.y - 10;
                camera.lookAt( scene.position );
                renderer.clear();
                renderer.render( scene, camera );              
            }, 25);
            }).bind('mouseleave', function(){
                this.iid && clearInterval(this.iid);
            });

            $('#down').bind('mouseenter', function() {
                this.iid = setInterval(function() {
                camera.position.y = camera.position.y + 10;
                camera.lookAt( scene.position );
                renderer.clear();
                renderer.render( scene, camera );              
            }, 25);
            }).bind('mouseleave', function(){
                this.iid && clearInterval(this.iid);
            });

            $('#zoom-in').bind('mouseenter', function() {
                this.iid = setInterval(function() {
                camera.position.z = camera.position.z - 10;
                camera.lookAt( scene.position );
                renderer.clear();
                renderer.render( scene, camera );              
            }, 25);
            }).bind('mouseleave', function(){
                this.iid && clearInterval(this.iid);
            });

            $('#zoom-out').bind('mouseenter', function() {
                this.iid = setInterval(function() {
                camera.position.z = camera.position.z + 10;
                camera.lookAt( scene.position );
                renderer.clear();
                renderer.render( scene, camera );              
            }, 25);
            }).bind('mouseleave', function(){
                this.iid && clearInterval(this.iid);
            });

            $('#init').bind('click', function() {
                camera.position.z = 300;
                camera.position.x = 0;
                camera.position.y = 20;
                camera.lookAt( scene.position );
                renderer.clear();
                renderer.render( scene, camera );              
            });

            function animate() {

                requestAnimationFrame( animate );
                render();
            }

            function render() { 
                requestAnimationFrame(render); 
                renderer.render(scene, camera); 
            } 

        </script>

在Safari上，性能降低的速度稍慢一些，在Chrome上，速度很快。

任何幫助表示贊賞:)

傑弗里

Answer 1

jsfiddle將使調試更加容易。 但是我非常懷疑這是因為您正在從事件處理程序setInterval函數調用render（）。 這根本沒有必要，因為您已經在動畫函數中渲染了每一幀。

我認為您的代碼做到了這一點，因此，由於沒有正確清除間隔，因此每幀場景都會渲染多次。 這可以解釋為什么它會隨着時間的流逝而變慢； 冗余render（）調用的數量持續增長...

嘗試只刪除所有

            renderer.clear();
            renderer.render( scene, camera );    

從事件處理程序/ setintervals。

編輯：您可以檢查一些控件文件（ https://github.com/mrdoob/three.js/blob/master/examples/js/controls/FirstPersonControls.js ）關於它們如何通過事件處理程序實現運動（動畫） 。 這些事件沒有邏輯發生，它們僅設置一個變量，例如movingForward = true; 。 然后，在單個update（）循環中完成實際的移動。 在您的情況下，這種方法也可能更好。

編輯＃2：實際上只是注意到您的主動畫循環設置不正確，這可能是主要問題（有關事件處理程序的內容仍然值得考慮）。 它還會導致多余的渲染調用。 嘗試從render（）函數中刪除requestAnimationFrame調用，因為您已經在animate（）中做到了。

        function animate() {
            requestAnimationFrame( animate );
            render();
        }

        function render() { 
            // requestAnimationFrame(render); <-- remove this
            renderer.render(scene, camera); 
        }