CODEWITHSUNDEEP
javascripthtmlthree.js3dcontrols
Lab Sintesi
Lab Sintesi

Reputation: 71

OrbitControls autoRotate does not work with three js

Im having troubles with Orbitcontrols. I have my threee js model and i want it to autorotate when the page is loaded for the first time but for some reason it does not work properly. The 3d model stand still as if the command line was not considered. Here is the code where i initialize the function:

the init() function where i declare my model and add them to the scene:

                controls.autoRotate=true
                controls.addEventListener('change', render);
                render();

the render function:

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

Please note that i can move my model as i wish in my page but the automatic rotation does not seem to be triggered.

Upvotes: 1

Views: 2643

Answers (1)

Mugen87
Mugen87

Reputation: 31026

Using OrbitControls.autoRotate only works if you call controls.update() in your animation loop. You can't use automatic rotation in combination with on-demand rendering (meaning by utilizing the change event listener of the controls).

let camera, scene, renderer, controls;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 1;

    scene = new THREE.Scene();

    const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
    const material = new THREE.MeshNormalMaterial();

    const mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
        
    controls = new THREE.OrbitControls( camera, renderer.domElement );
    controls.autoRotate = true;

}

function animate() {

    requestAnimationFrame( animate );
    controls.update();
    renderer.render( scene, camera );

}
body {
      margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>

Upvotes: 4

Related Questions