How to use Google Cardboard with three.js


A way to make compatible with cardboard by Google ?


You’re welcome!
Could you provide more information?

Im trying to see my webgl_loader_json_claraio whit my cardboard. I dont know how to make it, im new user of three.js :s

Ex: you can see a 3D model on screnn computer and if you click on cardboard you can see in VR :slight_smile:

Link share code : Feb 12, 2018 - Codeshare

Basically you have to integrate StereoEffect and DeviceOrientationControls into your three.js scene.

These official examples might be interesting for you:

BTW: You can find many interesting tutorials and articles if you just google “three.js cardboard” :wink:


The stereo effects works fine but not my controls device …

I replace

controls = new THREE.OrbitControls( camera ); 2, 1, 0 );
controls.minDistance = 5;
controls.maxDistance = 30;


controls = new THREE.DeviceOrientationControls( camera );

and nothing appears

Its possible to make same result ? because
I am not convinced by stereos effect :s

This phrase explains nothing. What do you expect to see?

This example was made with r84 (as it logged in the browser console), so you can press Ctrl+U and have a look at the source code of the page, thus you will know how the things work there.

my 3D model disappears when à replace my controls.



Replacing of controls can lead to different position/rotation of the camera. So maybe your camera just doesn’t look at the object or its position coincides with the position of the object (it means the camera is inside of the object).

When i use OrbitControls i can see my 3D model (with a lot warning on my console - texture, resize jpg …) and with DeviceOrientationControls my warnings disappears my scene is here but not my model.

when i use my phone for 360° nothing appear.

Thx for your awnser :slight_smile: