Update public/webXR/three.html

public/webXR/three.html

@@ -14,50 +14,53 @@
 <!-- Starting an immersive WebXR session requires user interaction.
     We start this one with a simple button. -->
 <script>
- // create a Scene
-const scene = new Scene();
+  // ------------------------------------------------
+// BASIC SETUP
+// ------------------------------------------------
 
-// Set the background color
-scene.background = new Color('skyblue');
+// Create an empty scene
+var scene = new THREE.Scene();
 
-// Create a camera
-const fov = 35; // AKA Field of View
-const aspect = container.clientWidth / container.clientHeight;
-const near = 0.1; // the near clipping plane
-const far = 100; // the far clipping plane
+// Create a basic perspective camera
+var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
+camera.position.z = 4;
 
-const camera = new PerspectiveCamera(fov, aspect, near, far);
+// Create a renderer with Antialiasing
+var renderer = new THREE.WebGLRenderer({antialias:true});
 
-// every object is initially created at ( 0, 0, 0 )
-// move the camera back so we can view the scene
-camera.position.set(0, 0, 10);
+// Configure renderer clear color
+renderer.setClearColor("#000000");
 
-// create a geometry
-const geometry = new BoxBufferGeometry(2, 2, 2);
+// Configure renderer size
+renderer.setSize( window.innerWidth, window.innerHeight );
 
-// create a default (white) Basic material
-const material = new MeshBasicMaterial();
+// Append Renderer to DOM
+document.body.appendChild( renderer.domElement );
 
-// create a Mesh containing the geometry and material
-const cube = new Mesh(geometry, material);
+// ------------------------------------------------
+// FUN STARTS HERE
+// ------------------------------------------------
 
-// add the mesh to the scene
-scene.add(cube);
+// Create a Cube Mesh with basic material
+var geometry = new THREE.BoxGeometry( 1, 1, 1 );
+var material = new THREE.MeshBasicMaterial( { color: "#433F81" } );
+var cube = new THREE.Mesh( geometry, material );
 
-// create the renderer
-const renderer = new WebGLRenderer();
+// Add cube to Scene
+scene.add( cube );
 
-// next, set the renderer to the same size as our container element
-renderer.setSize(container.clientWidth, container.clientHeight);
+// Render Loop
+var render = function () {
+  requestAnimationFrame( render );
 
-// finally, set the pixel ratio so that our scene will look good on HiDPI displays
-renderer.setPixelRatio(window.devicePixelRatio);
+  cube.rotation.x += 0.01;
+  cube.rotation.y += 0.01;
 
-// add the automatically created <canvas> element to the page
-container.append(renderer.domElement);
+  // Render the scene
+  renderer.render(scene, camera);
+};
 
-// render, or 'create a still image', of the scene
-renderer.render(scene, camera);
+render();
 
 </script>
 </body>