Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
This is the minimum code you need to write to have a VR application running on a web browser and using THREE.js. The code contains a fallback to use an OrbitController on PC.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<title>VR Sandbox 3D</title>
<style>
body {
margin: 0; padding: 0; overflow: hidden;
}
#container {
width: 100%; height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="js/vendors/three.js"></script>
<script src="js/vendors/StereoEffect.js"></script>
<script src="js/vendors/DeviceOrientationControls.js"></script>
<script src="js/vendors/OrbitControls.js"></script>
<script>
var renderer,
camera,
scene,
viewController,
stereoEffect,
clock,
container;
function initialize() {
// The renderer
renderer = new THREE.WebGLRenderer();
renderer.autoClear = false;
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff, 1);
// Add the canvas into the DOM
container = document.getElementById("container");
container.appendChild(renderer.domElement);
// The camera
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 5000);
camera.position.set(0, 50, 0);
// The scene
scene = new THREE.Scene();
// This is the needed effect that shows two screens (one per eye)
stereoEffect = new THREE.StereoEffect(renderer);
// A clock used for the controllers.
clock = new THREE.Clock();
// An orbit controller for PC, it's disabled on mobile devices.
viewController = new THREE.OrbitControls(camera, renderer.domElement);
viewController.rotateUp(Math.PI / 4);
viewController.target.set(camera.position.x + 0.1, camera.position.y, camera.position.z);
// Set the correct size of all this world!
resize();
// On mobile we want to use the device orientation
var onOrientationChanged = function (event) {
if (!event.alpha) {
return;
}
viewController = new THREE.DeviceOrientationControls(camera, true);
viewController.connect();
viewController.update();
resize();
window.removeEventListener("deviceorientation", onOrientationChanged);
};
window.addEventListener("deviceorientation", onOrientationChanged, false);
window.addEventListener("resize", resize, false);
}
function createScene() {
// A SphereBox
var geometry = new THREE.SphereGeometry(1500, 16, 16);
var material = new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture("images/skysphere.jpg") });
var skysphere = new THREE.Mesh(geometry, material);
skysphere.scale.x = -1;
scene.add(skysphere);
// A light
var directionalLight = new THREE.DirectionalLight(0x008888, 0.8);
directionalLight.position.set(0.5, 0.8, 0);
scene.add(directionalLight);
// Now it's time to build a small world :-)
var width = 500,
depth = 500,
blockSize = 50;
// With a ground
var gMaterial = new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture("images/checker_green.png")
});
gMaterial.map.wrapS = THREE.RepeatWrapping;
gMaterial.map.wrapT = THREE.RepeatWrapping;
gMaterial.map.repeat.x = 8;
gMaterial.map.repeat.y = 8;
var ground = new THREE.Mesh(new THREE.BoxGeometry(width, 1, depth), gMaterial);
scene.add(ground);
// And few cubes...
var geometry = new THREE.BoxGeometry(blockSize, blockSize, blockSize);
var material = new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture("images/checker_blue.png")
});
function random(min, max) {
return (Math.random() * (max - min) + min);
}
for (var i = 0; i < 6; i++) {
var mesh = new THREE.Mesh(geometry, material);
mesh.position.x = random(-width / 2 + blockSize, width / 2 - blockSize);
mesh.position.y = blockSize / 2;
mesh.position.z = random(-depth / 2 + blockSize, depth / 2 - blockSize);
mesh.receiveShadow = true;
mesh.castShadow = true;
scene.add(mesh);
}
}
function resize() {
renderer.setSize(window.innerWidth, window.innerHeight);
stereoEffect.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}
function loop() {
requestAnimationFrame(loop);
viewController.update(clock.getDelta());
stereoEffect.render(scene, camera);
}
// Entry point
window.onload = function () {
initialize();
createScene();
loop();
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.