Currently, I am experimenting with AngularJS and Three.js to create a small example of a VR application. To define controls based on whether the user is using a mobile device or not, I have implemented OrbitControls for non-mobile devices and DeviceOrientationControls otherwise.
var controls = new THREE.OrbitControls(camera, game.renderer.domElement);
controls.noPan = true;
controls.noZoom = true;
controls.target.set(
camera.position.x,
camera.position.y,
camera.position.z
);
//My method of checking if the device is mobile may be unreliable
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
controls = new THREE.DeviceOrientationControls(camera, true);
controls.connect();
controls.update();
}
return controls;
I have also created several objects for display:
this.camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.001, 1000);
this.camera.position.set(0, 15, 0);
this.textGeometry = new THREE.TextGeometry("Hello World", { size: 5, height: 1 });
this.textMesh = new THREE.Mesh(this.textGeometry, new THREE.MeshBasicMaterial({
color: 0xFF0000, opacity: 1
}));
this.textMesh.position.set(-20, 0, -20);
this.light = new THREE.SpotLight(0x999999, 3, 300);
this.light.position.set(50, 50, 50);
this.floorGeometry = new THREE.PlaneBufferGeometry(1000, 1000);
this.floorTexture = THREE.ImageUtils.loadTexture('img/textures/wood.jpg');
this.floorTexture.wrapS = THREE.RepeatWrapping;
this.floorTexture.wrapT = THREE.RepeatWrapping;
this.floorTexture.repeat = new THREE.Vector2(50, 50);
this.floorTexture.anisotropy = this.game.renderer.getMaxAnisotropy();
this.floorMaterial = new THREE.MeshPhongMaterial({
color: 0xffffff,
specular: 0xffffff,
shininess: 20,
shading: THREE.FlatShading,
map: this.floorTexture
});
this.floor = new THREE.Mesh(this.floorGeometry, this.floorMaterial);
this.floor.rotation.x = -Math.PI / 2;
this.scene.add(this.textMesh);
this.scene.add(this.light);
this.scene.add(this.floor);
this.scene.add(this.camera);
Everything works smoothly on Chrome for OSX, Safari for OSX & Safari on iPad (device orientation controls included when needed).
The issue arises when running the application on Chrome for Android. The spotlight added to the scene constantly follows the camera direction instead of staying static at (50, 50, 50). Here's a screenshot of the problem on Android:
https://i.sstatic.net/4jdEl.jpg
In all other browsers tested, the light remains correctly positioned at (50, 50, 50) without following the camera movement. However, in Chrome for Android, the light moves with the camera, causing the unwanted effect shown in the screenshot. The device orientation controls function properly though.
This browser-specific issue is causing frustration as the demo must run seamlessly on Chrome for Android.
Thank you.
Update: Despite trying various solutions like different control methods and lighting techniques, the issue persists.