From ad56876ed538df5d03315e746f14050310bcdb72 Mon Sep 17 00:00:00 2001
From: Alfakhori <muhammad.alfakhori@hft-stuttgart.de>
Date: Thu, 25 May 2023 15:01:32 +0000
Subject: [PATCH] Update public/webXR/three.html
---
public/webXR/three.html | 65 +++++++++++++++++++++--------------------
1 file changed, 34 insertions(+), 31 deletions(-)
diff --git a/public/webXR/three.html b/public/webXR/three.html
index 065e395..42b9d47 100644
--- a/public/webXR/three.html
+++ b/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>
--
GitLab