fix: replace pokeball experiment (#222)

* fix: replaced pokeball with damaged helmet to avoid IP issues

* refactor: update David component to use brick models and adjust related logic

- Changed model paths from 'legolangelo' to 'brickelangelo' for David and brick pieces.

* refactor: just changed the description

Author: alvarosabu

components/content/brickelangelo-david/David.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import type { Group } from 'three'
-import { InstancedMesh, MeshPhongMaterial, Raycaster, Vector3, Object3D } from 'three'
+import { InstancedMesh, MeshPhongMaterial, Vector3, Object3D } from 'three'
 import { MeshSurfaceSampler } from 'three/addons/math/MeshSurfaceSampler.js'
 import { useMouse } from '@vueuse/core'
 
 const groupRef = ref<Group>()
 
-const gltf = await useGLTF('/models/legolangelo/david.glb')
+const gltf = await useGLTF('/models/brickelangelo/david.glb')
 
 const david = gltf.nodes.David
 
@@ -17,12 +17,12 @@ watch([x, y], () => {
   groupRef.value.rotation.y = -x.value * 0.0001
 })
 
-const { nodes: legoNodes } = await useGLTF('/models/legolangelo/lego.glb')
+const { nodes: brickNodes } = await useGLTF('/models/brickelangelo/brick.glb')
 
-const lego = legoNodes.LegoPiece
+const brick = brickNodes.LegoPiece
 
-const legoMaterial = new MeshPhongMaterial({ color: 'lightgray' })
-const legoInstancedMesh = new InstancedMesh(lego.geometry, legoMaterial, instanceCount)
+const brickMaterial = new MeshPhongMaterial({ color: 'lightgray' })
+const brickInstancedMesh = new InstancedMesh(brick.geometry, brickMaterial, instanceCount)
 
 useControls('fpsgraph')
 
@@ -32,30 +32,30 @@ const sampler = new MeshSurfaceSampler(david)
 
 const instanceCount = 75000 // or whatever count you want
 const dummy = new Object3D()
-const legoSize = 0.03 // Define according to the size of your LEGO piece
+const brickSize = 0.03 // Define according to the size of your brick piece
 
 for (let i = 0; i < instanceCount; i++) {
   const sampledPoint = new Vector3()
   sampler.sample(sampledPoint)
 
   const alignedPoint = new Vector3(
-    Math.round(sampledPoint.x / legoSize) * legoSize,
-    Math.round(sampledPoint.y / legoSize) * legoSize,
-    Math.round(sampledPoint.z / legoSize) * legoSize,
+    Math.round(sampledPoint.x / brickSize) * brickSize,
+    Math.round(sampledPoint.y / brickSize) * brickSize,
+    Math.round(sampledPoint.z / brickSize) * brickSize,
   )
 
   dummy.position.copy(alignedPoint)
-  dummy.scale.set(legoSize, legoSize, legoSize)
+  dummy.scale.set(brickSize, brickSize, brickSize)
   dummy.updateMatrix()
-  legoInstancedMesh.setMatrixAt(i, dummy.matrix)
+  brickInstancedMesh.setMatrixAt(i, dummy.matrix)
 }
 
-legoInstancedMesh.instanceMatrix.needsUpdate = true
+brickInstancedMesh.instanceMatrix.needsUpdate = true
 </script>
 
 <template>
   <TresGroup ref="groupRef">
-    <primitive :object="legoInstancedMesh" />
+    <primitive :object="brickInstancedMesh" />
   </TresGroup>
   <!-- <primitive :object="david" /> -->
 </template>

components/content/realistic/DamagedHelmet.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+const { scene } = await useGLTF('/models/damaged-helmet/DamagedHelmet.glb', { draco: true })
+</script>
+
+<template>
+  <primitive :object="scene" />
+</template>

components/content/realistic/Pokeball.vue

@@ -15,12 +15,12 @@ const { hasFinishLoading, progress } = await useProgress()
     >
       <div class="w-200px">
         Loading... {{ progress }} %
-        <i class="i-ic-twotone-catching-pokemon animate-rotate-in" />
+        <i class="animate-rotate-in" />
       </div>
     </div>
   </Transition>
   <TresCanvas preset="realistic">
-    <TresPerspectiveCamera :position="[11, 11, 11]" />
+    <TresPerspectiveCamera :position="[3, 3, 5]" />
     <OrbitControls />
     <Suspense>
       <Environment
@@ -30,7 +30,7 @@ const { hasFinishLoading, progress } = await useProgress()
       />
     </Suspense>
     <Suspense>
-      <Pokeball />
+      <DamagedHelmet />
     </Suspense>
 
     <TresDirectionalLight

components/content/realistic/index.vue

@@ -1,6 +1,6 @@
 ---
 author: alvarosabu
-description: Lego ThreeJS Journey challenge
+description: Bricks ThreeJS Journey challenge
 tags: ['basic', 'cientos', 'MeshSurfaceSampler']
 ---
 

content/experiments/brickelangelo-david.md

@@ -0,0 +1,6 @@
+Flight helmet with damage
+Credit:
+© 2018, ctxwing. [CC BY 4.0 International](https://creativecommons.org/licenses/by/4.0/legalcode)
+- ctxwing for Rebuild and conversion to glTF
+© 2016, theblueturtle_. [CC BY-NC 4.0 International](https://creativecommons.org/licenses/by-nc/4.0/legalcode)
+- theblueturtle_ for Earlier version of model