JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/DeviceOrientationControls.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/effects/StereoEffect.js"></script>
CSS
body {
margin: 0;
overflow: hidden;
}
JavaScript
var container;
var camera, scene, renderer, effect, controls;
var mesh, geometry;
var spheres = [];
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
controls = new THREE.DeviceOrientationControls( camera );
camera.position.z = 3200;
scene = new THREE.Scene();
scene.background = new THREE.CubeTextureLoader()
.setPath( '//cdn.rawgit.com/mrdoob/three.js/master/examples/textures/cube/Park3Med/' )
.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
var geometry = new THREE.SphereBufferGeometry( 100, 32, 16 );
var textureCube = new THREE.CubeTextureLoader()
.setPath( '//cdn.rawgit.com/mrdoob/three.js/master/examples/textures/cube/Park3Med/' )
.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
textureCube.mapping = THREE.CubeRefractionMapping;
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube, refractionRatio: 0.95 } );
for ( var i = 0; i < 500; i ++ ) {
var mesh = new THREE.Mesh( geometry, material );
mesh.position.x = Math.random() * 10000 - 5000;
mesh.position.y = Math.random() * 10000 - 5000;
mesh.position.z = Math.random() * 10000 - 5000;
mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 3 + 1;
scene.add( mesh );
spheres.push( mesh );
}
//
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
effect = new THREE.StereoEffect( renderer );
effect.setSize( window.innerWidth, window.innerHeight );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
...