Permalink
Browse files

webVR setup

  • Loading branch information...
Chase Farmer
Chase Farmer committed Jan 7, 2017
1 parent 3500822 commit 6080bca8e49927eaafedbcf0e8f14a51a405cee1
Showing with 8,738 additions and 360 deletions.
  1. 0 app/audio.js
  2. +2 −168 app/index.js
  3. +91 −0 app/threeDScene.js
  4. +798 −190 dist/bundle.js
  5. +12 −1 index.html
  6. +1 −1 package.json
  7. +175 −0 vendor/VRControls.js
  8. +479 −0 vendor/VREffect.js
  9. +6,312 −0 vendor/WebVRPolyfill.js
  10. +861 −0 vendor/three.min.js
  11. +7 −0 webpack.config.js
View
No changes.
View
@@ -1,169 +1,3 @@
import * as THREE from 'three';
/*
Three.js "tutorials by example"
Author: Lee Stemkoski
Date: July 2013 (three.js v59dev)
*/
import * as ThreeDScene from './threeDScene';
//////////
// MAIN //
//////////
// standard global variables
var container, scene, camera, renderer, controls, stats;
var clock = new THREE.Clock();
// custom global variables
var cube;
// initialization
init();
// animation loop / game loop
animate();
///////////////
// FUNCTIONS //
///////////////
function init()
{
///////////
// SCENE //
///////////
scene = new THREE.Scene();
////////////
// CAMERA //
////////////
// set the view size in pixels (custom or according to window size)
// var SCREEN_WIDTH = 400, SCREEN_HEIGHT = 300;
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
// camera attributes
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
// set up camera
camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
// add the camera to the scene
scene.add(camera);
// the camera defaults to position (0,0,0)
// so pull it back (z = 400) and up (y = 100) and set the angle towards the scene origin
camera.position.set(0,150,400);
camera.lookAt(scene.position);
//////////////
// RENDERER //
//////////////
// create and start the renderer; choose antialias setting.
renderer = new THREE.WebGLRenderer( {antialias:true} );
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
// attach div element to variable to contain the renderer
container = document.getElementById( 'ThreeJS' );
// alternatively: to create the div at runtime, use:
// container = document.createElement( 'div' );
// document.body.appendChild( container );
// attach renderer to the container div
container.appendChild( renderer.domElement );
///////////
// LIGHT //
///////////
// create a light
var light = new THREE.PointLight(0xffffff);
light.position.set(0,250,0);
scene.add(light);
var ambientLight = new THREE.AmbientLight(0x111111);
// scene.add(ambientLight);
//////////////
// GEOMETRY //
//////////////
// most objects displayed are a "mesh":
// a collection of points ("geometry") and
// a set of surface parameters ("material")
// Sphere parameters: radius, segments along width, segments along height
var sphereGeometry = new THREE.SphereGeometry( 50, 32, 16 );
// use a "lambert" material rather than "basic" for realistic lighting.
// (don't forget to add (at least one) light!)
var sphereMaterial = new THREE.MeshLambertMaterial( {color: 0x8888ff} );
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(100, 50, -50);
scene.add(sphere);
// Create an array of materials to be used in a cube, one for each side
var cubeMaterialArray = [];
// order to add materials: x+,x-,y+,y-,z+,z-
cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0xff3333 } ) );
cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0xff8800 } ) );
cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0xffff33 } ) );
cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0x33ff33 } ) );
cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0x3333ff } ) );
cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0x8833ff } ) );
var cubeMaterials = new THREE.MeshFaceMaterial( cubeMaterialArray );
// Cube parameters: width (x), height (y), depth (z),
// (optional) segments along x, segments along y, segments along z
var cubeGeometry = new THREE.CubeGeometry( 100, 100, 100, 1, 1, 1 );
// using THREE.MeshFaceMaterial() in the constructor below
// causes the mesh to use the materials stored in the geometry
cube = new THREE.Mesh( cubeGeometry, cubeMaterials );
cube.position.set(-100, 50, -50);
scene.add( cube );
// create a set of coordinate axes to help orient user
// specify length in pixels in each direction
var axes = new THREE.AxisHelper(100);
scene.add( axes );
///////////
// FLOOR //
///////////
// note: 4x4 checkboard pattern scaled so that each square is 25 by 25 pixels.
var floorTexture = new THREE.ImageUtils.loadTexture( 'http://stemkoski.github.io/Three.js/images/checkerboard.jpg' );
floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
floorTexture.repeat.set( 10, 10 );
// DoubleSide: render texture on both sides of mesh
var floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture, side: THREE.DoubleSide } );
var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 1, 1);
var floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.position.y = -0.5;
floor.rotation.x = Math.PI / 2;
scene.add(floor);
/////////
// SKY //
/////////
// recommend either a skybox or fog effect (can't use both at the same time)
// without one of these, the scene's background color is determined by webpage background
// make sure the camera's "far" value is large enough so that it will render the skyBox!
var skyBoxGeometry = new THREE.CubeGeometry( 10000, 10000, 10000 );
// BackSide: render faces from inside of the cube, instead of from outside (default).
var skyBoxMaterial = new THREE.MeshBasicMaterial( { color: 0x9999ff, side: THREE.BackSide } );
var skyBox = new THREE.Mesh( skyBoxGeometry, skyBoxMaterial );
// scene.add(skyBox);
// fog must be added to scene before first render
scene.fog = new THREE.FogExp2( 0x9999ff, 0.00025 );
}
function animate()
{
requestAnimationFrame( animate );
render();
}
function render()
{
renderer.render( scene, camera );
}
let threeDScene = new ThreeDScene();
View
@@ -0,0 +1,91 @@
'use_strict';
import * as THREE from 'three';
import '../vendor/VRControls';
import '../vendor/VREffect';
// import '../vendor/WebVRPolyfill';
class threeDScene {
constructor() {
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
this.renderer = new THREE.WebGLRenderer({antialias: true});
this.renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(this.renderer.domElement);
this.controls = new THREE.VRControls(this.camera);
this.controls.standing = true;
this.effect = new THREE.VREffect(this.renderer);
this.effect.setSize(window.innerWidth, window.innerHeight);
this.vrDisplay = {};
navigator.getVRDisplays().then((displays) => {
if (displays.length > 0) {
this.vrDisplay = displays[0];
}
});
//Setup Events
document.querySelector('#startVR').addEventListener('click', () => {
this.vrDisplay.requestPresent([{source: this.renderer.domElement}]);
this.isShowingVR = true;
});
window.addEventListener('vrdisplaypresentchange', this.onResize.bind(this));
window.addEventListener('resize', this.onResize.bind(this));
this.cubes();
this.animate();
}
cubes() {
this.cubesMesh = [];
for (let i = 0; i < 100; i++) {
let material = new THREE.MeshNormalMaterial();
let geometry = new THREE.BoxGeometry( 50, 50, 50 );
let mesh = new THREE.Mesh( geometry, material );
// Give each cube a random position
mesh.position.x = (Math.random() * 1000) - 500;
mesh.position.y = (Math.random() * 1000) - 500;
mesh.position.z = (Math.random() * 1000) - 500;
this.scene.add(mesh);
// Store each mesh in array
this.cubesMesh.push(mesh);
}
}
animate() {
let cubes = this.cubesMesh;
//If we don't change the source here, the HMD will not move the camera.
if(this.isShowingVR) {
this.vrDisplay.requestAnimationFrame(this.animate.bind(this));
}
else {
requestAnimationFrame(this.animate.bind(this));
}
// Every frame, rotate the cubes a little bit
for (let i = 0; i < cubes.length; i++) {
cubes[i].rotation.x += 0.01;
cubes[i].rotation.y += 0.02;
}
// Render the scene
this.controls.update();
this.effect.render(this.scene, this.camera);
}
onResize() {
this.effect.setSize(window.innerWidth, window.innerHeight);
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
}
}
module.exports = threeDScene;
Oops, something went wrong.

0 comments on commit 6080bca

Please sign in to comment.