So I’m making a 3d project with three.js. Everything works as expected on my laptop. I’m using OrbitControls
to allow camera movement, but i have disabled right click panning, because I want the camera just to rotate. When switching to a mobile device (iphone), using two fingers I’m able to move the camera (not rotate). Is there a way to disable this behaviour on mobile devices?
My OrbitControls:
this.controls = new OrbitControls(this.camera, this.renderer.domElement) this.controls.enableDamping = true this.controls.maxPolarAngle = Math.PI * 0.45 this.controls.mouseButtons = { LEFT: THREE.MOUSE.ROTATE, MIDDLE: THREE.MOUSE.DOLLY, RIGHT: '' }
Update function:
_RAF() { requestAnimationFrame(() => { this.water.material.uniforms[ 'time' ].value += 1.0 / 60.0 this.controls.maxDistance = 10000.0 this.controls.minDistance = 10.0 this.controls.update() this.camera.updateProjectionMatrix() this.renderer.render(this.scene, this.camera) this._RAF() }) }
Advertisement
Answer
It seems that you’re not disabling panning, but just changing the mouse action used by controls.
In order to disable/enable panning, you should use enablePan.
Now, you only want to disable panning in mobile, so we could pick a break-point for conditionally enable/disable panning:
this.controls.updatePanning = () => { const minWidth = 780 // Your min breakpoint for enabling pan. if (window.innerWidth >= minWidth ) { this.controls.enablePan = true } else { this.controls.enablePan = false } }
Then, in your update loop, just invoke the above function:
_RAF() { requestAnimationFrame(() => { this.water.material.uniforms[ 'time' ].value += 1.0 / 60.0 this.controls.maxDistance = 10000.0 this.controls.minDistance = 10.0 this.controls.updatePanning() this.controls.update() this.camera.updateProjectionMatrix() this.renderer.render(this.scene, this.camera) this._RAF() }) }
You could approach this in several ways. For example: You could only execute this function once and not every frame.