Así que estoy haciendo un proyecto en 3D con tres.js. Todo funciona como se esperaba en mi computadora portátil. Estoy usando OrbitControls para permitir el movimiento de la cámara, pero he deshabilitado el desplazamiento panorámico con el botón derecho, porque quiero que la cámara solo gire. Al cambiar a un dispositivo móvil (iphone), con dos dedos puedo mover la cámara (no girar). ¿Hay alguna manera de deshabilitar este comportamiento en los dispositivos móviles? Mis controles orbitales:
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: '' }Función de actualización:
_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() }) }Parece que no está deshabilitando la panorámica, sino simplemente cambiando la acción del mouse utilizada por los controles.
Para deshabilitar/habilitar la panorámica, debe usar enablePan .
Ahora, solo desea deshabilitar la panorámica en dispositivos móviles, por lo que podríamos elegir un punto de interrupción para habilitar/deshabilitar condicionalmente la panorámica:
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 } }Luego, en su ciclo de actualización, simplemente invoque la función anterior:
_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() }) }Podría abordar esto de varias maneras. Por ejemplo: solo puede ejecutar esta función una vez y no todos los cuadros.