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

Тема в разделе "JavaScript", создана пользователем vangogu, 2 янв 2017.

Метки:
Модераторы: ZiX
  1. vangogu

    vangogu Создатель

    Регистр.:
    3 сен 2010
    Сообщения:
    38
    Симпатии:
    0
    Приветствую уважаемые, всех с праздниками, вопрос немного не стандартный, имеется скрипт снега, все работает ок, но при работе в браузере 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) Проблемы в подвисании нет.
     
  2. xapai1988

    xapai1988 Создатель

    Регистр.:
    12 дек 2009
    Сообщения:
    18
    Симпатии:
    6
    Для начала попробуйте поставить console.log('wheel working') внутри этой функции, чтобы проверить работает вообще прокрутка или нет.

    Код:
    function MouseWheelHandler( event ) {
      console.log('Wheel is working');   
    }
    Если все таки работает, то попробуйте обновлять всю сцену в момент прокрутки. Вот так:
    Код:
    function MouseWheelHandler(event) {
    renderer.render( scene, camera );
    }