Simple orbitcontrols not working

Although the green cube is successfully loaded and animated, none of OrbitControls function works.
I’m using three inside vue.

I could successfully use Orbitcontrols a while ago. I did change some code of OrbitControls with patch package but I uninstalled everything about patch package and three. And reinstall three again.
Now I can’t use a simple Orbitcontrols T_T

  • THREE Js version - ^0.128.0

  • Vue Js - v^2.5.17

  • Node v14.17.0

  • Npm v6.14.13

      import * as THREE from 'three';
      import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader';
      import {OrbitControls,MapControls} from 'three/examples/jsm/controls/OrbitControls';
      let scene, camera, obj, renderer, cube, container, controls,clock=new THREE.Clock();
      export default {
          name: "",
          props: [],
          data() {
              return {}
          methods: {
      _Init() {
      scene = new THREE.Scene();
          camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 
     1000 );
      renderer = new THREE.WebGLRenderer();
      renderer.setSize( window.innerWidth, window.innerHeight );
      document.body.appendChild( renderer.domElement );
      const geometry = new THREE.BoxGeometry();
      const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
      cube = new THREE.Mesh( geometry, material );
      scene.add( cube );
      controls = new OrbitControls(camera, renderer.domElement);
       animate() {
              requestAnimationFrame( this.animate );
              cube.rotation.x += 0.01;
              cube.rotation.y += 0.01;
       renderer.render( scene, camera );
       mounted() {
1 Like

I’m not able to spot an issue in your code. Do you think you can reproduce the issue in a live example somehow?

Hi @Mugen87

Here is my codepen but it works there.

I don’t know what’s wrong inside my project. I have deleted node-modules and package-lock json inside my project and reinstall three but it didn’t work.

Edit : As far as I could think , I updated npm to ^7 yesterday and i got some errors with vulnerabilities . So I deleted npm folder inside user/bin and .npm folder inside home/user/ and reinstalled node and npm. I also ran “npm cache clean --force”. That’s all I did.

console.log(controls) give the following.

   OrbitControls {object: PerspectiveCamera, domElement: canvas, enabled: true, target: Vector3, minDistance: 0, …}

  autoRotate: false
  autoRotateSpeed: 2
  dampingFactor: 0.05
  dispose: ƒ ()
  domElement: canvas
  enableDamping: false
  enablePan: true
  enableRotate: true
  enableZoom: true
  enabled: true
  getAzimuthalAngle: ƒ ()
  getPolarAngle: ƒ ()
  keyPanSpeed: 7
  keys: {LEFT: "ArrowLeft", UP: "ArrowUp", RIGHT: "ArrowRight", BOTTOM: "ArrowDown"}
  listenToKeyEvents: ƒ ( domElement )
  maxAzimuthAngle: Infinity
  maxDistance: Infinity
  maxPolarAngle: 3.141592653589793
  maxZoom: Infinity
  minAzimuthAngle: -Infinity
  minDistance: 0
  minPolarAngle: 0
  minZoom: 0
   mouseButtons: {LEFT: 0, MIDDLE: 1, RIGHT: 2}
  object: PerspectiveCamera {uuid: "78E11094-6F1D-4BF7-8CF0-89658CE277D4", name: "", type: "PerspectiveCamera", parent: null, children: Array(0), …}
   panSpeed: 1
   position0: Vector3 {x: 0, y: 0, z: 0}
   reset: ƒ ()
 . rotateSpeed: 1
   saveState: ƒ ()
  screenSpacePanning: true
  target: Vector3 {x: 0, y: 0, z: 0}
  target0: Vector3 {x: 0, y: 0, z: 0}
  touches: {ONE: 0, TWO: 2}
   update: ƒ update()
   zoom0: 1
  zoomSpeed: 1
   _domElementKeyEvents: null
   __proto__: EventDispatcher

Short gif for what’s happening

I found the answer. It’s just issued with CSS z-index.
Lol XD . I had been searching the solution for two days.


try this code

  controls.addEventListener( 'change', ()=>{renderer.render(scene, camera)} );


1 Like

thank you so much for telling this, I also had this stupid problem and has been looking for a solution for days.