feat: nuxt stones

damienmontastier · Jun 11, 2023 · 857c504 · 857c504
1 parent 33abf29
commit 857c504
Show file tree

Hide file tree

Showing 9 changed files with 2,363 additions and 2,347 deletions.
diff --git a/components/content/nuxt-stones/Stones.vue b/components/content/nuxt-stones/Stones.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+import { useRenderLoop, useTexture } from '@tresjs/core'
+import { MeshBasicMaterial, Texture } from 'three'
+import { gsap } from 'gsap'
+const { scene: stones, nodes, materials } = await useGLTF('/models/nuxt-stones/nuxt-stones.glb')
+const stonesTexture = await useTexture(['/models/nuxt-stones/RockBaked.png'])
+const littleStonesTexture = await useTexture(['/models/nuxt-stones/LittleRocksBaked.png'])
+
+stonesTexture.flipY = false
+littleStonesTexture.flipY = false
+console.log({ nodes, materials })
+
+const stoneBakedMaterial = new MeshBasicMaterial({
+  map: stonesTexture as Texture,
+})
+
+const LittleStonesBakedMaterial = new MeshBasicMaterial({
+  map: littleStonesTexture as Texture,
+})
+
+nodes.Stone.material = stoneBakedMaterial
+nodes.StoneCarved.material = stoneBakedMaterial
+
+nodes.Logo.material.emissiveIntensity = 10
+
+const littleStones = Object.values(nodes).filter(node => node.name.includes('Stone00'))
+
+littleStones.forEach(stone => {
+  stone.material = LittleStonesBakedMaterial
+})
+
+const { onLoop } = useRenderLoop()
+
+onLoop(({ elapsed }) => {
+  nodes.Logo.material.emissiveIntensity = Math.sin(elapsed) * 6 + 7
+})
+</script>
+
+<template>
+  <primitive :object="nodes.Orbs" />
+  <primitive :object="nodes.Logo" />
+  <primitive :object="nodes.Stone" />
+  <primitive :object="nodes.StoneCarved" />
+  <primitive v-for="stone in littleStones" :object="stone" :key="stone.id" />
+</template>
diff --git a/components/content/nuxt-stones/index.vue b/components/content/nuxt-stones/index.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
+
+import { OrbitControls, useTweakPane } from '@tresjs/cientos'
+import { EffectComposer, Bloom } from '@tresjs/post-processing'
+
+import Stones from './Stones.vue'
+
+const gl = {
+  clearColor: '#18181B',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+
+const bloomParams = reactive({
+  luminanceThreshold: 0.2,
+  luminanceSmoothing: 0.3,
+  mipmapBlur: true,
+  intensity: 0.5,
+})
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[-5.3, 8.3, 10.6]" :look-at="[0, 0, 0]" />
+    <OrbitControls />
+    <Suspense>
+      <EffectComposer :depth-buffer="true">
+        <Bloom v-bind="bloomParams"></Bloom>
+      </EffectComposer>
+    </Suspense>
+    <Suspense>
+      <Stones />
+    </Suspense>
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>
diff --git a/content/experiments/nuxt-stones.md b/content/experiments/nuxt-stones.md
@@ -0,0 +1,10 @@
+---
+thumbnail: /nuxt-stones.png
+title: Nuxt Stones
+slug: nuxt-stones
+author: alvarosabu
+description: Nuxt Stone is a simple scene with a stone model and a Nuxt logo. The scene is rendered with baked lighting and post-processing effects.
+tags: ['gltf', 'baked', 'emission', 'post-processing']
+---
+
+<NuxtStones />
diff --git a/package.json b/package.json
@@ -16,16 +16,16 @@
     "@nuxt/image-edge": "1.0.0-28059208.2abef1b",
     "@types/three": "^0.152.0",
     "@unocss/nuxt": "^0.52.3",
-    "gsap": "^3.11.5",
+    "gsap": "^3.12.1",
     "nuxt": "^3.5.1",
     "nuxt-svgo": "^3.1.0",
     "vite-plugin-glsl": "^1.1.2"
   },
   "dependencies": {
     "@iconify-json/ic": "^1.1.13",
-    "@tresjs/cientos": "2.1.1",
+    "@tresjs/cientos": "2.1.3",
     "@tresjs/core": "2.1.2",
-    "@tresjs/post-processing": "^0.1.0",
+    "@tresjs/post-processing": "^0.2.0",
     "postprocessing": "^6.31.0",
     "three": "^0.152.2"
   }