final

Author: Juho Räsänen

main.js

@@ -17,9 +17,10 @@ import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'
 import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'
 import { Credits } from './scenes/credits'
 import { Viuh } from './scenes/viuh'
+import { CubeRubber } from './scenes/CubeRubber'
+import { SnakeBirth } from './scenes/SnakeBirth'
 
 let scene, scenes, renderer, stats, composer, current, timeout
-import { CubeRubber } from './scenes/CubeRubber'
 
 init()
 
@@ -51,34 +52,36 @@ const loop = i => {
 
 function init () {
   scenes = [
+    {
+      scene: new SnakeBirth(),
+      time: 5000
+    },
     {
       scene: new Viuh(),
       time: 6000
     },
     {
       scene: new CityAtStreetLevel(),
-      time: 10000
+      time: 7500
     },
     {
 
       scene: new CityFromWindow(),
-      time: 8000
+      time: 9700
     },
     {
       scene: new CubeRubber(),
-      time: 6500,
+      time: 7500
     },
     {
       scene: new Explosion(),
       time: 10000
     },
     {
-      scene: new Credits(),
-      time: 10000,
+      scene: new Credits()
     }
   ]
 
-
   // Stats
   stats = new Stats()
 
@@ -151,6 +154,9 @@ function init () {
   })
   music.addEventListener('ended', () => {
     welcomeGUI.show()
+    if (document.exitFullscreen) {
+      document.exitFullscreen()
+    }
   })
 }
 

return.zip

@@ -4,7 +4,7 @@
 # But the timeout should be there so we don't have to manually shut
 # down the server after the demo ends. If your demo needs more than
 # 30s to load, you can increase the timeout.
-timeout 30s python3 -m http.server -d 'dist' 3000 &
+timeout 60s python3 -m http.server -d 'dist' 3000 &
 
 # The Linux compo machine doesn't have Chrome, contact us if you need it.
 google-chrome --start-fullscreen --new-window 'http://localhost:3000'

return/start.sh

@@ -1,89 +1,87 @@
-import * as THREE from "three";
-import { TextGeometry } from "three/addons/geometries/TextGeometry.js";
-import { FontLoader } from "three/addons/loaders/FontLoader.js";
+import * as THREE from 'three'
+import { TextGeometry } from 'three/addons/geometries/TextGeometry.js'
+import { FontLoader } from 'three/addons/loaders/FontLoader.js'
 
-import { FilmShader } from "three/addons/shaders/FilmShader.js";
-import { ShaderPass } from "three/addons/postprocessing/ShaderPass.js";
+import { FilmShader } from 'three/addons/shaders/FilmShader.js'
+import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js'
 
-import fontJson from "../assets/fonts/monsieur.json";
+import fontJson from '../assets/fonts/monsieur.json'
 
-let shader;
+let shader
 
 let upDir = true
 
 class Credits {
-  constructor() {
-    this.scene = new THREE.Scene();
-    this.scene.background = new THREE.Color(0x000);
+  constructor () {
+    this.scene = new THREE.Scene()
+    this.scene.background = new THREE.Color(0x000)
 
     this.camera = new THREE.PerspectiveCamera(
       70,
       window.innerWidth / window.innerHeight,
       1,
       100
-    );
-    this.camera.position.set(-73, -3, 80);
+    )
+    this.camera.position.set(-73, -3, 80)
 
     shader = new ShaderPass(FilmShader)
-    shader.uniforms["nIntensity"].value = 1;
+    shader.uniforms.nIntensity.value = 1
 
-    shader.uniforms["sCount"].value = 30;
-    shader.uniforms["sIntensity"].value = 1;
+    shader.uniforms.sCount.value = 30
+    shader.uniforms.sIntensity.value = 1
 
-    const loader = new FontLoader();
+    const loader = new FontLoader()
 
-    const font = loader.parse(fontJson);
-    const geometry = new TextGeometry("Code: mz\nCode: rjuho\nCode: ileska", {
-      font: font,
+    const font = loader.parse(fontJson)
+    const geometry = new TextGeometry('Code: mz\nCode: rjuho\nCode: ileska', {
+      font,
       size: 3,
       height: 0.5,
       curveSegments: 0.00001,
       bevelEnabled: true,
       bevelSize: 0.1,
-      bevelThickness: 0.1,
-    });
+      bevelThickness: 0.1
+    })
 
+    const material = new THREE.MeshPhongMaterial({ color: 0x888888 })
+    const mesh = new THREE.Mesh(geometry, material)
+    mesh.position.x = -5
+    mesh.position.y = 5
 
-    const material = new THREE.MeshPhongMaterial({ color: 0x888888 });
-    const mesh = new THREE.Mesh(geometry, material);
-    mesh.position.x = -5;
-    mesh.position.y = 5;
+    this.scene.add(mesh)
 
-    this.scene.add(mesh);
-
-    this.scene.add(new THREE.HemisphereLight(0xbbbbbb, 0x777777, 20));
+    this.scene.add(new THREE.HemisphereLight(0xbbbbbb, 0x777777, 20))
   }
 
-  get getCamera() {
-    return this.camera;
+  get getCamera () {
+    return this.camera
   }
 
-  get getScene() {
-    return this.scene;
+  get getScene () {
+    return this.scene
   }
 
-  get getEffectShaders() {
-    return [shader];
+  get getEffectShaders () {
+    return [shader]
   }
 
-  animate() {
-    shader.uniforms["sIntensity"].value = Math.sin(Date.now() / 50)
+  animate () {
+    shader.uniforms.sIntensity.value = Math.sin(Date.now() / 50)
 
     if (upDir) {
-      shader.uniforms["sCount"].value += 0.1;
+      shader.uniforms.sCount.value += 0.1
     } else {
-      shader.uniforms["sCount"].value -= 0.5;
+      shader.uniforms.sCount.value -= 0.5
     }
 
-    if (shader.uniforms["sCount"].value < 10) {
+    if (shader.uniforms.sCount.value < 10) {
       upDir = true
     }
 
-    if (shader.uniforms["sCount"].value > 100) {
+    if (shader.uniforms.sCount.value > 100) {
       upDir = false
     }
-
   }
 }
 
-export { Credits };
+export { Credits }

scenes/credits.js

@@ -105,7 +105,7 @@ function makeHouse (position, facing, params, scene) {
 }
 
 function createLight (position, params, scene) {
-  const spotLight = new THREE.SpotLight(0xff00ff)
+  const spotLight = new THREE.SpotLight(0xffffff)
   spotLight.position.x = position[0]
   spotLight.position.y = position[1]
   spotLight.position.z = position[2]