Rename tutorial scene

CMCRobotics · Oct 12, 2024 · 38eed22 · 38eed22
1 parent 66d4b08
commit 38eed22
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 10 deletions.
diff --git a/public/quizz.html → public/tutorial.html b/public/quizz.html → public/tutorial.html
@@ -2,8 +2,8 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>Quizz</title>
-    <script defer src="quizz.bundle.js"></script>
+    <title>Tutorial</title>
+    <script defer src="tutorial.bundle.js"></script>
   </head>
   <body>
     <a-scene id="my-scene" scene-controller fog="type: exponential; color: #0C4B5F; near: 0.5; far: 60; density: 0.001" shadow="type: pcfsoft">
@@ -44,8 +44,6 @@
 
 
       <a-entity id="teams" position="0 0.1 28"></a-entity>
-
-
 
       <a-entity camera id="camera" fov="50" position="0 7 36" target="#rock" wasd-controls>
       </a-entity>

diff --git a/public/vote.html b/public/vote.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Tutorial</title>
+    <script defer src="tutorial.bundle.js"></script>
+  </head>
+  <body>
+    <a-scene id="my-scene" scene-controller fog="type: exponential; color: #0C4B5F; near: 0.5; far: 60; density: 0.001" shadow="type: pcfsoft">
+      <a-assets>
+        <img id="sandTexture" src="assets/sand.jpg"/>
+        <img id="skybox" src="assets/skybox.png"/>
+        <a-asset-item id="rock-model" src="assets/rock.glb"></a-asset-item>
+        <a-asset-item id="player-model" src="assets/players/characterMediumAllAnimations.glb"></a-asset-item>
+
+      </a-assets>
+
+
+      <!-- Underwater floor with sand texture -->
+      <a-circle id="floor" position="0 0 -4" rotation="-90 0 0" radius="120" segments="80" 
+               material="src: #sandTexture; repeat: 5 5" shadow="receive: true"></a-circle>
+
+
+      <!-- Stationary caustics effect using custom shader -->
+      <a-circle position="0 0.01 -4" rotation="-90 0 0" radius="120" segments="80" 
+               material="shader: stationary-caustics; color: #00aaff; transparent: true; blending: additive" shadow="receive: true"></a-circle>
+
+      <!-- Water surface -->
+      <a-circle position="0 30 -4" rotation="-90 0 0" radius="200" segments="80" 
+               material="shader: water-surface; color: #7AD7F0; transparent: true; side: double"></a-circle>
+
+
+      <a-entity id="rock" gltf-model="#rock-model" position="0 -0.391 0" scale="1 1 1">
+
+      </a-entity>
+      <a-entity light="type: directional; color: #FFF; intensity: 0.4; target: #rock" position="1 1 1"></a-entity>
+
+      <a-light type="ambient" color="#0C4B5F" intensity="0.3"></a-light>
+
+      <a-light id="light-floor" type="directional" target="#floor" color="#ffffff" intensity="0.6" position="0 14 15" castShadow="true" 
+               shadow="mapSize: 2048x2048; bias: -0.001; near: 0.3; far: 50"></a-light>
+
+      <a-sky src="#skybox" ></a-sky>
+
+
+      <a-entity id="teams" position="0 0.1 28"></a-entity>
+
+      <a-entity camera id="camera" fov="50" position="0 7 36" target="#rock" wasd-controls>
+      </a-entity>
+
+    </a-scene>
+  </body>
+</html>
diff --git a/src/quizz-scene.js → src/tutorial-scene.js b/src/quizz-scene.js → src/tutorial-scene.js
@@ -2,12 +2,10 @@ import AFRAME from 'aframe';
 import TutorialSceneController from './scene-tutorial/TutorialSceneController';
 
 import './components/caustics';
-import './components/floating-camera';
 import './components/arc-layout';
 import './components/texture-map';
 import './components/look-towards';
 
-import 'aframe-orbit-controls';
 import 'aframe-extras';
 import 'aframe-label';
 import 'aframe-htmlembed-component';
@@ -20,9 +18,6 @@ window.Buffer = Buffer;
 
 AFRAME.registerComponent('scene-controller', {
   init: function() {
-    // TODO: Replace with actual MQTT broker
     this.controller = new TutorialSceneController('ws://localhost:9001', "teams");
-
-    console.log("Hello shiny happy people");
   }
 });
diff --git a/webpack.config.js b/webpack.config.js
@@ -5,7 +5,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 module.exports = {
   entry: {
     aframe: './src/aframe-scene.js',
-    quizz: './src/quizz-scene.js',
+    tutorial: './src/tutorial-scene.js',
     presentation: './src/reveal-presentation.js',
     voteAggregator: './src/vote-aggregator.js'
   },