feat: 1k github stars

components/content/Text3dExperiment.vue

@@ -84,6 +84,6 @@ useControls('fpsgraph')
         <TresMeshMatcapMaterial :matcap="donutTexture" />
       </Torus>
     </TresGroup>
-    <TresAmbientLight :intensity="1" />
+    <TresAmbientLight :intensity="2" />
   </TresCanvas>
 </template>

components/content/github-stars/Star.vue

@@ -0,0 +1,57 @@
+
+import type { Star } from '#build/components';
+<script setup lang="ts">
+const { nodes } = await useGLTF('/models/star.glb', { draco: true })
+
+const model = nodes['star']
+
+const stars = Array.from({ length: 1000 }, () => ({
+  position: [(Math.random() - 0.5) * 80, (Math.random() - 0.5) * 80, (Math.random() - 0.5) * 80],
+  rotation: [(Math.random() - 0.5) * 10, (Math.random() - 0.5) * 10, (Math.random() - 0.5) * 10],
+  scale: [1, 1, 2],
+}))
+
+const starsRef = ref(null)
+
+const { onLoop } = useRenderLoop()
+
+onLoop(({ delta }) => {
+  if (starsRef.value) {
+    for (const star of starsRef.value.children) {
+      star.rotation.x += delta * 0.2
+      star.rotation.y += delta * 0.2
+      star.rotation.z += delta * 0.2
+
+      if (star.position.y < -80) {
+        star.position.y = 40
+      }
+      if (star.position.x < -80) {
+        star.position.x = 40
+      }
+      star.position.y -= delta * 0.2
+      star.position.x -= delta * 0.2
+    }
+  }
+})
+</script>
+
+<template>
+  <TresGroup ref="starsRef">
+    <!-- <primitive
+      v-for="star in stars"
+      :key="star"
+      :position="star.position"
+      :rotation="star.rotation"
+      :scale="star.scale"
+      :object="model"
+    /> -->
+    <primitive
+      v-for="star in stars"
+      :key="star"
+      :position="star.position"
+      :rotation="star.rotation"
+      :scale="star.scale"
+      :object="model.clone()"
+    />
+  </TresGroup>
+</template>

components/content/github-stars/index.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { BasicShadowMap, SRGBColorSpace, ACESFilmicToneMapping, MeshStandardMaterial } from 'three'
+
+import { OrbitControls, Text3D } from '@tresjs/cientos'
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: true,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: ACESFilmicToneMapping,
+}
+
+const matcapTexture = await useTexture(['https://raw.githubusercontent.com/Tresjs/assets/main/textures/matcaps/7.png'])
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera
+      :position="[8.48, 2.65, 17.94]"
+      :far="1000"
+    />
+    <OrbitControls
+      make-default
+      :min-distance="15"
+      :max-distance="30"
+    />
+    <Suspense>
+      <Environment preset="sunset" />
+    </Suspense>
+    <Suspense>
+      <Text3D
+        font="https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json"
+        center
+        text="1k Github Stars"
+        :size="1"
+        :height="0.2"
+        :curve-segments="12"
+        :bevel-enabled="true"
+        :bevel-thickness="0.05"
+        :bevel-size="0.03"
+        :bevel-offset="0"
+        :bevel-segments="4"
+      >
+        <TresMeshMatcapMaterial :matcap="matcapTexture" />
+      </Text3D>
+    </Suspense>
+    <Suspense>
+      <Star>
+        <primitive :object="yellowMaterial" />
+      </Star>
+    </Suspense>
+    <Suspense />
+    <TresAmbientLight :intensity="2" />
+    <TresDirectionalLight
+      :position="[10, 10, 10]"
+      :intensity="1"
+    />
+  </TresCanvas>
+</template>

content/experiments/github-1k-stars.md

@@ -0,0 +1,12 @@
+---
+thumbnail: /github-1k-stars.png
+title: 1000 🌟 on Github 
+slug: github-1k-stars
+author: alvarosabu
+status: published
+description: Scene to celebrate 1k stars on Github
+tags: ['basic', 'cientos', 'useGLTF', 'blender']
+---
+
+<GithubStars />
+