I've been working on incorporating WebVR into a project that I created using Three.js, but I'm running into some issues with getting it to work properly.
Several problems crop up when I try to view the scene:
When VRMode is set to false, my scene renders as expected. However, when I switch to VR Mode, the scene stops rendering altogether. I can see the two stereoscopic windows, but nothing else shows up.
On desktop, the camera points straight down when loading the scene. But on mobile devices, the scene appears upside down. I've tried adjusting the camera to look at the center of my image, but it doesn't seem to have any effect. This issue started after I made changes to support the WebVR manager and VRControls.
camera.position.set(-300, -800, 200); camera.up = new THREE.Vector3(0, 0, 1); camera.lookAt(new THREE.Vector3(0, 0, 0));
I'm able to set the position without any problems.
- When I click the fullscreen button on the GUI, the screen splits into two halves. The top half remains black (my body background and clearfix color are blue), while the bottom half displays my scene. My event listener works fine when manually resizing the window, so this seems to be related to the VR manager.
Any thoughts on what might be causing these errors?
This is how I define my renderer:
var width = window.innerWidth,
height = window.innerHeight;
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(width, height);
renderer.setClearColor(0x1D76BB, 1);
// Effect and Controls for VR
effect = new THREE.VREffect(renderer);
controls = new THREE.VRControls(camera);
effect.setSize(width, height);
var manager = new WebVRManager(renderer, effect);
And here's my animate function:
function animate() {
requestAnimationFrame(animate);
if (controls) {
controls.update();
}
if (manager.isVRMode()) {
renderer.setRenderTarget(null); // add this line
manager.render(scene, camera);
} else {
renderer.render(scene, camera);
}
}
I downloaded all my libraries from bower this morning, so I believe they are all up-to-date.