Зависает скрипт при использовании колесика

[vangogu]

Приветствую уважаемые, всех с праздниками, вопрос немного не стандартный, имеется скрипт снега, все работает ок, но при работе в браузере chrome и opera, когда используешь колесико мышки (wheel), скрипт подвисает, до тех пор, пока не нажмешь левую кнопку мыши.

  var SCREEN_WIDTH = window.innerWidth;
            var SCREEN_HEIGHT = window.innerHeight;

            var container;

            var particle;

            var camera;
            var scene;
            var renderer;

            var mouseX = 0;
            var mouseY = 0;

            var windowHalfX = window.innerWidth / 2;
            var windowHalfY = window.innerHeight / 2;
          
            var particles = [];
            var particleImage = new Image();

            particleImage.src = '/img/ParticleSmoke.png';

            function init() {


            //inner
                container = document.createElement('div');
                container.className = "cont_canvas";
              
                //open
                document.body.appendChild(container);
                // down|up                                                                //distance
                camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
                // area snow
                camera.position.z = 1000;

                scene = new THREE.Scene();
                scene.add(camera);

                renderer = new THREE.CanvasRenderer();
                renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
                var material = new THREE.ParticleBasicMaterial( { map: new THREE.Texture(particleImage) } );
                //how snow?
                for (var i = 0; i < 199; i++) {

                    particle = new Particle3D( material);

                    particle.position.x = Math.random() * 2000 - 1000;
                    particle.position.y = Math.random() * 2000 - 1000;
                    particle.position.z = Math.random() * 2000 - 1000;
                    particle.scale.x = particle.scale.y =  1;
                    scene.add( particle );
                    particles.push(particle);
                }
              
                //closed
                container.appendChild( renderer.domElement );

  
                document.addEventListener( 'mousemove', onDocumentMouseMove, false );
                document.addEventListener( 'mousedown', onDocumentMouseDown, false );
                document.addEventListener("mousewheel", MouseWheelHandler, false);
              
                //snow speed
                setInterval( loop, 1000 / 60 );
              
            }
          
            function onDocumentMouseMove( event ) {

                mouseX = event.clientX - windowHalfX;
                mouseY = event.clientY - windowHalfY;
            }
          
            function onDocumentMouseDown( event ) {
              
                mouseX = event.clientX - windowHalfX;
                mouseY = event.clientY - windowHalfY;
            }
          
            function MouseWheelHandler( event ) {
  
            }

            function loop() {

            for(var i = 0; i<particles.length; i++)
                {

                    var particle = particles[i];
                    particle.updatePhysics();
  
                    with(particle.position)
                    {
                        if(y<-1000) y+=2000;
                        if(x>1000) x-=2000;
                        else if(x<-1000) x+=2000;
                        if(z>1000) z-=2000;
                        else if(z<-1000) z+=2000;
                    }              
                }
            //Закругление
                camera.position.x += ( mouseX - camera.position.x ) * 0.05;
                camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
                camera.lookAt(scene.position);

                renderer.render( scene, camera );

              
            }

p.S. Тестировал в ie 8-11, mozila, safari, таких проблем нет, может кто знает как подлечить эту проблему, пытался добавить в событие wheel .click, но результат не дало... Есть предчувствие, что браузеры по разному понимают

var windowHalfY = window.innerHeight / 2;

, но изменения к примеру на

var windowHalfY = SCREEN_HEIGHT / 2;

, результат положительного тоже не дало... может подскажите что-то ?
p.s2. при использовании скрола (scroll) Проблемы в подвисании нет.

 

[xapai1988]

Для начала попробуйте поставить console.log('wheel working') внутри этой функции, чтобы проверить работает вообще прокрутка или нет.

function MouseWheelHandler( event ) {
  console.log('Wheel is working');   
}

Если все таки работает, то попробуйте обновлять всю сцену в момент прокрутки. Вот так:

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