1+ < html >
2+ < head >
3+ < meta http-equiv ="Content-Type " content ="text/html; charset=UTF-8 ">
4+ < title > WebVR — Oculus Rift Three.js Cube</ title >
5+ < style >
6+
7+ .button {
8+ position : fixed;
9+ bottom : 20px ;
10+ right : 20px ;
11+ padding : 8px ;
12+ color : # FFF
13+ background-color : # 555
14+ }
15+ </ style >
16+
17+
18+ </ head >
19+ < body >
20+
21+ < div class ="button "> Start VR Mode</ div >
22+ < div id ="container " style ="width:100%;height:100%; "> </ div >
23+
24+ </ body >
25+
26+ < script src ="../libs/jquery-1.9.1/jquery-1.9.1.js "> </ script >
27+ < script src ="../libs/three.js.r68/three.js "> </ script >
28+ < script src ="../libs/three.js.r68/effects/VREffect.js "> </ script >
29+ < script src ="../libs/requestAnimationFrame/RequestAnimationFrame.js "> </ script >
30+ < script type ="text/javascript ">
31+
32+ var container = null ,
33+ renderer = null ,
34+ effect = null ,
35+ scene = null ,
36+ camera = null ,
37+ cube = null ;
38+
39+ var duration = 10000 ; // ms
40+ var currentTime = Date . now ( ) ;
41+ function animate ( ) {
42+
43+ var now = Date . now ( ) ;
44+ var deltat = now - currentTime ;
45+ currentTime = now ;
46+ var fract = deltat / duration ;
47+ var angle = Math . PI * 2 * fract ;
48+ cube . rotation . y += angle ;
49+ }
50+
51+ function run ( ) {
52+ requestAnimationFrame ( function ( ) { run ( ) ; } ) ;
53+
54+ // Render the scene
55+ effect . render ( scene , camera ) ;
56+
57+ // Spin the cube for next frame
58+ animate ( ) ;
59+
60+ }
61+
62+ function initThreeJS ( ) {
63+
64+ container = document . getElementById ( "container" ) ;
65+
66+ // Create the Three.js renderer and attach it to our canvas
67+ renderer = new THREE . WebGLRenderer ( { antialias : true } ) ;
68+ container . appendChild ( renderer . domElement ) ;
69+
70+ // Set the viewport size
71+ renderer . setSize ( window . innerWidth , window . innerHeight ) ;
72+
73+
74+ }
75+
76+ function initVR ( ) {
77+
78+ // Set up Oculus renderer
79+ effect = new THREE . VREffect ( renderer , function ( err ) {
80+ if ( err ) {
81+ console . log ( "Error creating VREffect: " , err ) ;
82+ }
83+ else {
84+ console . log ( "Created VREffect: " , effect ) ;
85+ }
86+ } ) ;
87+
88+ // Set up fullscreen mode handling
89+ var fullScreenButton = document . querySelector ( '.button' ) ;
90+ fullScreenButton . onclick = function ( ) {
91+ if ( container . mozRequestFullScreen ) {
92+ container . mozRequestFullScreen ( ) ;
93+ } else {
94+ container . webkitRequestFullscreen ( ) ;
95+ }
96+ } ;
97+
98+ }
99+
100+ function initScene ( ) {
101+ // Create a new Three.js scene
102+ scene = new THREE . Scene ( ) ;
103+
104+ // Add a camera so we can view the scene
105+ camera = new THREE . PerspectiveCamera ( 45 , container . offsetWidth / container . offsetHeight , 1 , 4000 ) ;
106+ scene . add ( camera ) ;
107+
108+ // Create a texture-mapped cube and add it to the scene
109+ // First, create the texture map
110+ var mapUrl = "../images/webvr-logo-512.jpeg" ;
111+ var map = THREE . ImageUtils . loadTexture ( mapUrl ) ;
112+
113+ // Now, create a Basic material; pass in the map
114+ var material = new THREE . MeshBasicMaterial ( { map : map } ) ;
115+
116+ // Create the cube geometry
117+ var geometry = new THREE . BoxGeometry ( 2 , 2 , 2 ) ;
118+
119+ // And put the geometry and material together into a mesh
120+ cube = new THREE . Mesh ( geometry , material ) ;
121+
122+ // Move the mesh back from the camera and tilt it toward the viewer
123+ cube . position . z = - 4 ;
124+ cube . rotation . x = Math . PI / 5 ;
125+ cube . rotation . y = Math . PI / 5 ;
126+
127+ // Finally, add the mesh to our scene
128+ scene . add ( cube ) ;
129+
130+ }
131+
132+ $ ( document ) . ready (
133+ function ( ) {
134+
135+ // Set up Three.js
136+ initThreeJS ( ) ;
137+
138+ // Set up VR rendering and camera controls
139+ initVR ( ) ;
140+
141+ // Create the scene content
142+ initScene ( ) ;
143+
144+ // Run the run loop
145+ run ( ) ;
146+ }
147+ ) ;
148+
149+ </ script >
150+
151+
152+ </ html >
0 commit comments