Mouse controls are not working

Questions
, ,
1 
import * as THREE from 'https://cdn.skypack.dev/three@0.132.2';
import { OrbitControls } from 'https://cdn.skypack.dev/three@0.132.2/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'https://cdn.skypack.dev/three@0.132.2/examples/jsm/loaders/GLTFLoader.js';

let camera, scene, renderer, controls;

init();
animate();

function init(){
    const container = document.getElementById("myContainer");
    
    camera = new THREE.PerspectiveCamera(70, container.clientWidth / container.clientHeight, 2, 100);

    scene = new THREE.Scene();

    //modal loader
    const loader = new GLTFLoader();
    loader.load("SampleShapes.gltf", (gltf) => {
        const model = gltf.scene;
        model.position.set(0,0,0);
        scene.add(model);
    },
    function (xhr) {
        console.log((xhr.loaded / xhr.total * 100)+ '% loaded');
    },
    function (error) {
        console.error ('an error happened', error);
    }
    );

    //renderer
    renderer = new THREE.WebGLRenderer({antialias:true, alpha:true});
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(container.clientWidth, container.clientHeight);
    renderer.setClearColor(0xffffff, 0);
    container.appendChild(renderer.domElement);

    //controls
    controls = new OrbitControls(camera, renderer.domElement);
    controls.target.set( 0, 0, 0 );
    controls.update();
    

    window.addEventListener('resize', onWindowResize);    
}

function onWindowResize() {
    camera.aspect = container.clientWidth / container.clientHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(container.clientWidth, container.clientHeight);
}

function animate() {
    requestAnimationFrame(animate);
    // camera.rotation.x += 0.002;
    controls.update();
    renderer.render(scene, camera);
}

i dont know why mouse controls are not working… please guide

2

Here is a simplified live example of your code: Edit fiddle - JSFiddle - Code Playground

Please modify it to demonstrate the issue.

BTW: The target property of the controls is already (0,0,0). If you don’t change the target vector and use the default settings of OrbitControls, there is no need to call update().

3

@Mugen87 Thank You