Update public/webXR/three.html

public/webXR/three.html

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