feat: add port of R3F space game (#199)

* feat: add port of R3F space game

* author of R3F version: https://twitter.com/0xca0

* chore: remove tmp file

* feat(space-game): make explosions bigger

* feat(space-game): tweak lighting

* fix(space-game): fix rocks rotation inconsistency after rock destroyed

* chore(space-game): remove console.log

* chore(space-game): remove unused variable

* chore: remove unused files

* refactor(space-game): destructure three imports

Author: andretchen0

components/content/array-cameras/index.vue

@@ -50,7 +50,6 @@ cameraOptions.forEach((data) => {
 const { hasFinishLoading, progress } = await useProgress()
 
 useControls('fpsgraph')
-
 </script>
 
 <template>

components/content/brickelangelo-david/David.vue

@@ -24,7 +24,6 @@ const lego = legoNodes.LegoPiece
 const legoMaterial = new MeshPhongMaterial({ color: 'lightgray' })
 const legoInstancedMesh = new InstancedMesh(lego.geometry, legoMaterial, instanceCount)
 
-
 useControls('fpsgraph')
 
 const sampler = new MeshSurfaceSampler(david)

components/content/dancing-blob/TheDancingBlob.vue

@@ -1,10 +1,9 @@
 <!-- Github Luckystriike: https://github.com/luckystriike22/TresJsPlayground/ -->
 <script lang="ts" setup>
+import { Vector2 } from 'three'
 import vertexShader from './shaders/vertex.glsl'
 import fragmentShader from './shaders/fragment.glsl'
 
-import { Vector2 } from 'three'
-
 const props = defineProps<{
   analyser: any
   dataArray: any
@@ -16,43 +15,43 @@ const { onBeforeRender } = useLoop()
 // refs
 const blobRef = shallowRef<any>(null)
 
-
 onBeforeRender(({ elapsed }) => {
   if (blobRef.value && props.analyser && props.dataArray) {
-    props.analyser?.getByteFrequencyData(props.dataArray);
+    props.analyser?.getByteFrequencyData(props.dataArray)
 
     // calc average frequency
-    let sum = 0;
+    let sum = 0
     for (let i = 0; i < props.dataArray?.length; i++) {
-      sum += props.dataArray[i];
+      sum += props.dataArray[i]
     }
 
-    uniforms.value.u_frequency.value = sum > 0 ? sum / props.dataArray?.length : 0;
+    uniforms.value.u_frequency.value = sum > 0 ? sum / props.dataArray?.length : 0
     uniforms.value.u_time.value = elapsed
     blobRef.value.rotation.x += 0.01
   }
 })
 
-
 // shader
 // set props to pass into the shader
 const uniforms = ref({
   u_resolution: { type: 'V2', value: new Vector2(window.innerWidth, window.innerHeight) },
   u_time: { type: 'f', value: 0.0 },
   u_frequency: { type: 'f', value: 0.0 },
-  u_amplitude: { type: 'f', value: 1.5 }
-});
-
-
+  u_amplitude: { type: 'f', value: 1.5 },
+})
 </script>
 
 <template>
   <TresPerspectiveCamera :position="[13, 0, 0]" />
   <OrbitControls />
   <TresMesh ref="blobRef">
-    <TresIcosahedronGeometry :args="[4, 80]"></TresIcosahedronGeometry>
-    <TresShaderMaterial wireframe :uniforms="uniforms" :fragment-shader="fragmentShader"
-      :vertex-shader="vertexShader" />
+    <TresIcosahedronGeometry :args="[4, 80]" />
+    <TresShaderMaterial
+      wireframe
+      :uniforms="uniforms"
+      :fragment-shader="fragmentShader"
+      :vertex-shader="vertexShader"
+    />
   </TresMesh>
   <TresDirectionalLight :position="[1, 1, 1]" />
   <TresAmbientLight :intensity="1" />

components/content/dancing-blob/index.vue

@@ -1,60 +1,73 @@
 <!-- Github Luckystriike: https://github.com/luckystriike22/TresJsPlayground/ -->
 <script lang="ts" setup>
-const analyser = shallowRef();
-const audioStream = shallowRef();
-const dataArray = shallowRef();
-const showInfoDialog = shallowRef(false);
+const analyser = shallowRef()
+const audioStream = shallowRef()
+const dataArray = shallowRef()
+const showInfoDialog = shallowRef(false)
 
 // lifecycle
 onMounted(async () => {
-  await nextTick();
+  await nextTick()
 
   try {
     const access = await navigator.permissions.query({ name: 'microphone' })
-    showInfoDialog.value = access.state != "granted";
+    showInfoDialog.value = access.state != 'granted'
 
-    audioStream.value = await navigator.mediaDevices.getUserMedia({ audio: true });
-    showInfoDialog.value = false;
+    audioStream.value = await navigator.mediaDevices.getUserMedia({ audio: true })
+    showInfoDialog.value = false
     handleMicrophoneAccess()
 
-  } catch (error) {
-    showInfoDialog.value = true;
-    alert('Not able to accessing microphone');
+  }
+  catch (error) {
+    showInfoDialog.value = true
+    alert('Not able to accessing microphone')
   }
 })
 
 // handle the microphone connection
 const handleMicrophoneAccess = () => {
-  const audioContext = new (window.AudioContext)();
-  const source = audioContext.createMediaStreamSource(audioStream.value);
+  const audioContext = new (window.AudioContext)()
+  const source = audioContext.createMediaStreamSource(audioStream.value)
 
-  analyser.value = audioContext.createAnalyser();
-  analyser.value.fftSize = 2048;
-  source.connect(analyser.value);
+  analyser.value = audioContext.createAnalyser()
+  analyser.value.fftSize = 2048
+  source.connect(analyser.value)
 
-  const bufferLength = analyser.value.frequencyBinCount;
-  dataArray.value = new Uint8Array(bufferLength);
-};
+  const bufferLength = analyser.value.frequencyBinCount
+  dataArray.value = new Uint8Array(bufferLength)
+}
 </script>
 
 <template>
   <button
-    class="gitBtn bg-gray-600 hover:bg-gray-700 opacity-40 transition-color shadow-lg hover:shadow-xl infline-flex w-12 h-12 justify-center items-center rounded-full absolute bottom-2 right-2">
-    <a href="https://github.com/Tresjs/lab/tree/main/components/content/dancing-blob" target="_blank">Code</a>
+    class="gitBtn bg-gray-600 hover:bg-gray-700 opacity-40 transition-color shadow-lg hover:shadow-xl infline-flex w-12 h-12 justify-center items-center rounded-full absolute bottom-2 right-2"
+  >
+    <a
+      href="https://github.com/Tresjs/lab/tree/main/components/content/dancing-blob"
+      target="_blank"
+    >Code</a>
   </button>
 
-  <TresCanvas :clear-color="'#0c1a30'" v-show="!showInfoDialog">
-    <TheDancingBlob :analyser="analyser" :data-array="dataArray" />
+  <TresCanvas
+    v-show="!showInfoDialog"
+    clear-color="#0c1a30"
+  >
+    <TheDancingBlob
+      :analyser="analyser"
+      :data-array="dataArray"
+    />
   </TresCanvas>
-  <span class="blobPermissionDialog justify-center items-center infline-flex absolute" v-if="showInfoDialog">
+  <span
+    v-if="showInfoDialog"
+    class="blobPermissionDialog justify-center items-center infline-flex absolute"
+  >
     <p>
-      Hey! <br />
+      Hey! <br>
       This site requires microphone permissions. The
       microphone is only used to calculate the frequency necessary for the blob to dance. A browser pop-up will ask you
       for permission.
     </p>
   </span>
-
 </template>
 
 <style scoped>

components/content/galaxy-generator/index.vue

@@ -134,7 +134,7 @@ onLoop(({ elapsed }) => {
   }
 })
 useControls('fpsgraph')
-const {count, size, radius, branches, spin, randomness, randomnessPower, insideColor, outsideColor} = useControls({
+const { count, size, radius, branches, spin, randomness, randomnessPower, insideColor, outsideColor } = useControls({
 
   count: {
     value: 30000,

components/content/glass-material/index.vue

@@ -31,7 +31,7 @@ const options = reactive({
   envMapIntensity: 1.5,
 })
 
-const {transmission, thickness, roughness, envMapIntensity, useHDR} = useControls({
+const { transmission, thickness, roughness, envMapIntensity, useHDR } = useControls({
   transmission: {
     value: 1,
     min: 0,
@@ -71,7 +71,7 @@ watch(useHDR.value, (value) => {
 </script>
 
 <template>
-  <TresLeches/>
+  <TresLeches />
   <TresCanvas
     window-size
     v-bind="gl"

components/content/html-phone/iPhone.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { Html, useGLTF } from '@tresjs/cientos'
 import { Color, MeshStandardMaterial } from 'three'
+
+const emit = defineEmits(['view-clicked'])
 const { nodes } = await useGLTF('/models/iphone/iphonex.glb', { draco: true })
 const model = nodes['iphonex']
 const back = nodes['iphonexback']
@@ -12,13 +14,11 @@ screen?.position.set(0, 0, 0.01)
 screen.material.transparent = true
 screen.material.opacity = 0.5
 
-
 bottomTab.material = new MeshStandardMaterial({
   color: new Color('#000000'),
   emissive: new Color('#000000'),
 })
 
-const emit = defineEmits(['view-clicked'])
 const closeUp = ref(false)
 function onViewClose() {
   closeUp.value = true
@@ -27,11 +27,23 @@ function onViewClose() {
 </script>
 
 <template>
-  <Levioso :speed="closeUp ? 0: 1" :rotationFactor="closeUp ? 0: 1">
-    <TresGroup :position="[0, 1, 0]" ref="">
+  <Levioso
+    :speed="closeUp ? 0 : 1"
+    :rotation-factor="closeUp ? 0 : 1"
+  >
+    <TresGroup
+      ref=""
+      :position="[0, 1, 0]"
+    >
       <primitive :object="model">
-        <Html :distance-factor="1.39" transform :position="[1, 0, 0.2]" :occlude="[back]" v-if="!closeUp">
-          <button @click="onViewClose" 
+        <Html
+          v-if="!closeUp"
+          :distance-factor="1.39"
+          transform
+          :position="[1, 0, 0.2]"
+          :occlude="[back]"
+        >
+          <button
             class="
               p-6
               flex
@@ -43,8 +55,9 @@ function onViewClose() {
               transition-colors
               duration-200
               ease-in-out
-              "
-            > 
+              " 
+            @click="onViewClose"
+          > 
             <i class="i-carbon-view" />
           </button>
         </Html>
@@ -62,7 +75,6 @@ function onViewClose() {
             frameborder="0"
           />
         </Html>
-        
       </primitive>
       <primitive :object="back" />
     </TresGroup>

components/content/html-phone/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
-import { BasicShadowMap, SRGBColorSpace, NoToneMapping, PerspectiveCamera } from 'three'
+import type { PerspectiveCamera } from 'three'
+import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
 import gsap from 'gsap'
 
 const gl = {
@@ -14,16 +15,16 @@ const gl = {
 const cameraRef = ref<PerspectiveCamera | null>(null)
 
 const onViewClicked = () => {
-  if(!cameraRef.value) return
+  if (!cameraRef.value) return
   gsap.to(cameraRef.value.position, {
     duration: 1,
     x: 0,
     y: 3,
     z: 3,
     ease: 'power2.inOut',
     onUpdate: () => {
-      if(cameraRef.value)
-      cameraRef.value.lookAt(0, 3, 0)
+      if (cameraRef.value)
+        cameraRef.value.lookAt(0, 3, 0)
     },
   })
 }
@@ -33,9 +34,15 @@ const { hasFinishLoading, progress } = await useProgress()
 
 <template>
   <div class="hero absolute z-30 prose p-24">
-    <h2 class="text-6xl opacity-0 animate-fade-in animate-delay-1s animate-forwards transition-all ease-in-out">iTres</h2>
-    <p class="text-2xl opacity-0 animate-fade-in animate-delay-2s animate-forwards transition-all ease-in-out">New fancy phone, mind-blowing. Head turning. </p>
-    <p class="opacity-0 animate-fade-in animate-delay-4s animate-forwards transition-all ease-in-out">Only $2999.99</p>
+    <h2 class="text-6xl opacity-0 animate-fade-in animate-delay-1s animate-forwards transition-all ease-in-out">
+      iTres
+    </h2>
+    <p class="text-2xl opacity-0 animate-fade-in animate-delay-2s animate-forwards transition-all ease-in-out">
+      New fancy phone, mind-blowing. Head turning.
+    </p>
+    <p class="opacity-0 animate-fade-in animate-delay-4s animate-forwards transition-all ease-in-out">
+      Only $2999.99
+    </p>
   </div>
   <Transition
     name="fade-overlay"
@@ -48,7 +55,7 @@ const { hasFinishLoading, progress } = await useProgress()
     >
       <div class="w-200px text-black text-center">
         <p class="animate-tada">
-         🤳 
+          🤳 
         </p>
         Loading... {{ progress }} %
       </div>