Brtdku

I finally found how to zoom with the mousescroll, but the camera only updates the zoom level when I move the camera by clicking and dragging.

I tried copy pasting code from three.js examples, I tried different browers, I tried adding controls.update(); to both the render and the gameloop function and I tried Googling my issue.

    var renderer = new THREE.WebGLRenderer( );

    renderer.setSize( window.innerWidth, window.innerHeight );

    document.body.appendChild( renderer.domElement );



    // check when the browser size has changed and adjust the camera accordingly

    window.addEventListener( 'resize', function( )

    {

        var WIDTH = window.innerWidth;

        var HEIGHT = window.innerHeight;

        renderer.setSize( WIDTH, HEIGHT );

        camera.aspect = WIDTH / HEIGHT;

        camera.updateProjectionMatrix( );

    } );



    scene.add( new THREE.AmbientLight( 0x00020 ) );



            var controls = new THREE.OrbitControls( camera, renderer.domElement );

            controls.addEventListener( 'change', render ); // use only if there is no animation loop

            controls.minDistance = 10;

            controls.maxDistance = 200;

            controls.enableZoom = true;





    camera.position.z = 7;



    // CUBE

    var geometry = new THREE.CubeGeometry( 2, 2, 2 );

    var cubeMaterials =

    [

        new THREE.MeshLambertMaterial( { map: new THREE.TextureLoader( ).load( 'img/1.png' ), side: THREE.DoubleSide } ), // Right side

        new THREE.MeshPhongMaterial( { map: new THREE.TextureLoader( ).load( 'img/2.png' ), side: THREE.DoubleSide } ), // Left side

        new THREE.MeshLambertMaterial( { map: new THREE.TextureLoader( ).load( 'img/3.png' ), side: THREE.DoubleSide } ), // Top side

        new THREE.MeshPhongMaterial( { map: new THREE.TextureLoader( ).load( 'img/4.png' ), side: THREE.DoubleSide } ), // Bottom side

        new THREE.MeshLambertMaterial( { map: new THREE.TextureLoader( ).load( 'img/5.png' ), side: THREE.DoubleSide } ), // Front side

        new THREE.MeshPhongMaterial( { map: new THREE.TextureLoader( ).load( 'img/6.png' ), side: THREE.DoubleSide } ) // Back side

    ];



    // Create a MeshFaceMaterial, which allows the cube to have different materials on each face

    var cubeMaterial = new THREE.MeshFaceMaterial( cubeMaterials );

    var cube = new THREE.Mesh( geometry, cubeMaterial );

    scene.add( cube );



    // Floor

    var floorGeometry = new THREE.CubeGeometry( 496, 1, 350 );

    var floorMaterial = new THREE.MeshLambertMaterial( { map: new THREE.TextureLoader( ).load( 'images/ctr.png' ), side: THREE.DoubleSide } );

    var floorCube = new THREE.Mesh( floorGeometry, floorMaterial );

    floorCube.position.y = -5;

    scene.add( floorCube );





    var ambientLight = new THREE.AmbientLight( 0xFFFFFF, 5.0 );

    scene.add(ambientLight);





    var light1 = new THREE.PointLight( 0xff0040, 4, 50 );

    //scene.add( light1 );



    var light2 = new THREE.PointLight( 0x0040ff, 3, 50 );

    //scene.add( light2 );



    var light3 = new THREE.PointLight( 0x80ff80, 4, 50 );

    //scene.add( light3 );





    var directionalLight = new THREE.DirectionalLight( 0xFFFFFF, 1 );

    directionalLight.position.set( 0, 1, 0 );

    //scene.add( directionalLight );



    var spotLight = new THREE.SpotLight( 0xFF45F6, 25 );

    spotLight.position.set( 0, 3, 0 );



    scene.add( spotLight );





    // game logic

    var update = function( )

    {

        //cube.rotation.x += 0.01;

        //cube.rotation.y += 0.005;



        var time = Date.now( ) * 0.0005;



        light1.position.x = Math.sin( time * 0.7 ) * 30;

        light1.position.y = Math.cos( time * 0.5 ) * 40;

        light1.position.z = Math.cos( time * 0.3 ) * 30;



        light2.position.x = Math.cos( time * 0.3 ) * 30;

        light2.position.y = Math.sin( time * 0.5 ) * 40;

        light2.position.z = Math.sin( time * 0.7 ) * 30;



        light3.position.x = Math.sin( time * 0.7 ) * 30;

        light3.position.y = Math.cos( time * 0.3 ) * 40;

        light3.position.z = Math.sin( time * 0.5 ) * 30;

    };



    // draw scene

    var render = function( )

    {

        renderer.render( scene, camera );

    };



    // run game loop (update, render, repeat)

    var GameLoop = function( )

    {

        requestAnimationFrame( GameLoop );



        update( );

        render( );

    };



    GameLoop( );











</script>

I would really love to be able to zoom in instantly when I scroll and not have it update only when I perform a pan.