Simple orbitcontrols not working

Questions
1

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);
  camera.position.z=3;
  camera.position.y=5.0;
  camera.position.x=0;
  controls.update();

  this.animate();
   animate() {
          requestAnimationFrame( this.animate );
          cube.rotation.x += 0.01;
          cube.rotation.y += 0.01;

   renderer.render( scene, camera );
   controls.update();
   }
  },
   mounted() {
      this._Init();
  },
  }
1 Like
2

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

3

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.
:frowning:

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

4

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

1 Like
5

try this code

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

before

controls.update();
3 Likes
6

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

7

thanks. this worked for me.

8

can please clarify what you do to fix it, I have the same issue .

9

This worked for me as well, can I ask why I need to add this though out of curiosity? I get conceptually that when the “change” event fires we re-render the scene and camera. So in our case when we move around, the scene rerenders. Shouldnt OrbitControls do this out of the box though?