DeviceOrientationControls是否兼容Three.js r104及最新版本？

Hey there, let's work through your DeviceOrientationControls issue in your mobile WebVR project. First off, yes, DeviceOrientationControls is still fully compatible with Three.js r104 and newer versions—even if the file's last update timestamp looks old, it's maintained alongside the core library and works seamlessly with recent releases. The problem you're seeing is almost certainly due to common implementation oversights, not version incompatibility. Let's break down the fixes:

1. You're missing the critical controls.update() call #

Looking at your scene setup code, your animation loop only calls renderer.render()—but DeviceOrientationControls requires you to update it every frame to sync the camera with the device's orientation. This is the #1 reason these controls fail to work.

Fix your animation loop like this:

this.renderer.setAnimationLoop(() => {
  this.controls.update(); // Add this line!
  this.renderer.render(this.scene, this.camera);
});

2. Check device permissions properly #

Mobile browsers require explicit user permission to access device orientation data, and this only works over HTTPS (localhost is exempt for testing). Your demo is on HTTPS, which is good, but you might not be requesting permission correctly. Add this logic before initializing the controls to ensure the user grants access:

if (window.DeviceOrientationEvent) {
  DeviceOrientationEvent.requestPermission()
    .then(permissionState => {
      if (permissionState === 'granted') {
        this.controls = new DeviceOrientationControls(this.camera);
      } else {
        console.warn("Device orientation permission denied");
      }
    })
    .catch(err => console.error("Permission request failed:", err));
}

3. Resolve VR mode conflicts #

You've enabled renderer.vr.enabled = true and added the WEBVR button, but DeviceOrientationControls is meant for non-VR mobile use. When a user enters VR mode, the browser takes over camera control, which can cause unexpected behavior in standard mode. Add a check to only update controls when not in VR:

this.renderer.setAnimationLoop(() => {
  if (!this.renderer.vr.isPresenting) {
    this.controls.update();
  }
  this.renderer.render(this.scene, this.camera);
});

4. Ensure you're using the official, version-matched controls #

If you copied an old standalone version of DeviceOrientationControls into your project, it might have API mismatches with r104+. Instead, use the official ES module from Three.js's addons:

import { DeviceOrientationControls } from 'three/addons/controls/DeviceOrientationControls.js';

After applying these fixes, your controls should start working as expected. If you still run into issues, check your browser's developer console for error messages—they'll often point to permission issues, missing imports, or other small bugs.

内容的提问来源于stack exchange，提问作者Juta Jumpatong