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 );

来自您的事件处理程序/设置间隔。

编辑：你可以检查一些控制文件（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); 
        }

使用三个js显示的对象渲染性能问题

1 个答案: