feat: WIP porsche 911 showcase

components/BlenderCube.vue

@@ -1,6 +1,16 @@
 <script setup lang="ts">
-const { nodes } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', { draco: true })
+const { nodes, materials } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', { draco: true })
 const model = nodes.Cube
+
+Object.assign(materials.coat, {
+  envMapIntensity: 4,
+  roughness: 0.5,
+  metalness: 1,
+})
+
+Object.assign(materials.paint, {
+  envMapIntensity: 2, roughness: 0.45, metalness: 0.8, color: '#555' 
+})
 </script>
 
 <template>

components/content/car-showcase/CameraRig.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { SpotLight, SpotLightHelper, Vector3 } from 'three'
+const { onBeforeRender } = useLoop()
+
+
+onBeforeRender(({ elapsed, camera }) => {
+  camera.position.lerp(new Vector3().set(Math.sin(elapsed / 5), 0, 12 + Math.cos(elapsed / 5) / 2), 0.05)
+  camera.lookAt(0, 0, 0)
+})
+</script>
+
+<template>
+</template>

components/content/car-showcase/Lightformers.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { BackSide, Color, Vector3 } from 'three'
+
+import { Lightformer } from '@tresjs/cientos';
+const group = ref<TresObject>()
+const positions = [2, 0, 2, 0, 2, 0, 2, 0]
+
+const { onBeforeRender } = useLoop()
+
+onBeforeRender(({ delta}) => {
+  if (group.value) {
+    (group.value.position.z += delta * 10) > 20 && (group.value.position.z = -60)
+  }
+})
+
+// Updated shader to better match Lamina's layer-based approach
+const vertexShader = `
+varying vec3 v_WorldPosition;
+
+void main() {
+  v_WorldPosition = (modelMatrix * vec4(position, 1.0)).xyz;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+`
+
+const fragmentShader = `
+varying vec3 v_WorldPosition;
+
+uniform vec3 baseColor;
+uniform vec3 depthColorA;
+uniform vec3 depthColorB;
+uniform vec3 origin;
+uniform float near;
+uniform float far;
+uniform float depthAlpha;
+
+void main() {
+  // First layer: base color
+  vec4 baseLayer = vec4(baseColor, 1.0);
+
+  // Second layer: depth
+  float depth = length(v_WorldPosition - origin);
+  float depthFactor = smoothstep(near, far, depth);
+  vec4 depthLayer = vec4(mix(depthColorA, depthColorB, depthFactor), depthAlpha);
+
+  // Normal blend mode (similar to Lamina's layer system)
+  vec4 finalColor = mix(baseLayer, depthLayer, depthLayer.a);
+
+  gl_FragColor = finalColor;
+}
+`
+
+// Updated uniforms to match Lamina's naming and functionality
+const uniforms = {
+  baseColor: { value: new Color('#444') },
+  depthColorA: { value: new Color('blue') },
+  depthColorB: { value: new Color('black') },
+  origin: { value: new Vector3(100, 100, 100) },
+  near: { value: 0 },
+  far: { value: 300 },
+  depthAlpha: { value: 0.5 }
+}
+
+</script>
+<template>
+  <Lightformer 
+    :intensity="0.75" 
+    :position="[0, 5, -9]"
+    :rotation-x="Math.PI / 2"
+    :scale="[10, 10, 1]"
+  />
+  <TresGroup :rotation="[0, 0.5, 0]">
+    <TresGroup ref="group">
+      <Lightformer 
+        v-for="(x, i) in positions"
+        :key="i"
+        form="circle"
+        :intensity="2"
+        :rotation="[Math.PI/ 2, 0, 0]" 
+        :position="[x, 4, i * 4]" 
+        :scale="[3, 1, 1]" 
+      />
+    </TresGroup>
+  </TresGroup>
+  <Lightformer 
+    :intensity="4" 
+    :rotation-y="Math.PI / 2" 
+    :position="[-5, 1, -1]" 
+    :scale="[20, 0.1, 1]" 
+  />
+  <Lightformer 
+    :rotation-y="Math.PI / 2" 
+    :position="[-5, -1, -1]" 
+    :scale="[20, 0.5, 1]" 
+  />
+  <Lightformer 
+    :rotation-y="-Math.PI / 2" 
+    :position="[10, 1, 0]" 
+    :scale="[20, 1, 1]" 
+  />
+  <Levioso 
+    :speed="5" 
+    :float-factor="2" 
+    :rotation-factor="2"
+  >
+    <Lightformer 
+      form="ring"
+      color="red"
+      :intensity="1"
+      scale="10"
+      :position="[-15, 4, -18]" 
+      :target="[0, 0, 0]"
+    />
+  </Levioso>
+  <TresMesh :scale="[60, 60, 60]">
+    <TresSphereGeometry :args="[1, 64, 64]" />
+    <TresShaderMaterial
+      :side="BackSide"
+      :vertex-shader="vertexShader"
+      :fragment-shader="fragmentShader"
+      :uniforms="uniforms"
+    />
+  </TresMesh>
+</template>

components/content/car-showcase/Porsche.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+import type { TresObject } from '@tresjs/core'
+import { Color } from 'three'
+
+const { scene, nodes, materials } = await useGLTF('/models/porsche/911-transformed.glb', {
+  draco: true,
+})
+
+// Apply material properties similar to R3F example
+/* Object.values(nodes).forEach((node: TresObject) => {
+  if (node.isMesh) {
+    node.castShadow = true
+    node.receiveShadow = true
+  }
+}) */
+
+// Update materials to match R3F example
+if (materials.rubber) {
+  materials.rubber.color = new Color('#222')
+  materials.rubber.roughness = 0.6
+  materials.rubber.roughnessMap = null
+  materials.rubber.normalScale.set(4, 4)
+}
+
+if (materials.window) {
+  materials.window.color = new Color('black')
+  materials.window.roughness = 0
+  materials.window.clearcoat = 0.1
+}
+
+if (materials.coat) {
+  materials.coat.envMapIntensity = 4
+  materials.coat.roughness = 0.5
+  materials.coat.metalness = 1
+}
+
+if (materials.paint) {
+  materials.paint.envMapIntensity = 2
+  materials.paint.roughness = 0.45
+  materials.paint.metalness = 0.8
+  materials.paint.color = new Color('#555')
+}
+</script>
+
+<template>
+  <primitive  
+    :scale="[1.6, 1.6, 1.6]" 
+    :position="[-0.5, -0.18, 0]" 
+    :rotation="[0, Math.PI / 5, 0]" 
+    :object="scene" 
+  />
+</template>

components/content/car-showcase/index.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+
+import Porsche from './Porsche.vue'
+import Lightformers from './Lightformers.vue'
+import CameraRig from './CameraRig.vue'
+import {
+  ACESFilmicToneMapping,
+  SRGBColorSpace,
+  LinearToneMapping,
+  CineonToneMapping,
+  ReinhardToneMapping,
+  NoToneMapping,
+  AgXToneMapping,
+} from 'three'
+
+
+
+const gl = {
+  clearColor: 'black',
+  shadows: true,
+  antialias: true,
+  alpha: true,
+  toneMapping: ACESFilmicToneMapping,
+  powerPreference: 'high-performance',
+  outputColorSpace: SRGBColorSpace,
+  shadowMapType: 'PCFSoftShadowMap',
+}
+
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[5, 1, 15]" :fov="30" />
+    <Suspense>
+      <Porsche />
+    </Suspense>
+    <!-- <TresAmbientLight :intensity="1" /> -->
+    <TresSpotLight ref="spotLightRef" :position="[0, 15, 0]" :angle="0.3" :penumbra="1" :intensity="200" :decay="2"
+      cast-shadow :shadow-bias="-0.0001" />
+    <TresAmbientLight :intensity="0.5" />
+    <ContactShadows :frames="20" :blur="3.5" :resolution="512" :opacity="1" />
+    <Suspense>
+      <Environment :frames="Infinity" preset="sunset" background :blur="1" :resolution="256">
+        <Lightformers />
+      </Environment>
+    </Suspense>
+    <CameraRig />
+
+  </TresCanvas>
+</template>

content/experiments/car-showcase.md

@@ -0,0 +1,8 @@
+---
+author: alvarosabu
+description: 
+tags: []
+---
+
+::car-showcase
+::

package.json

@@ -25,7 +25,7 @@
     "@nuxt/image-edge": "1.3.0-28493895.369b747",
     "@nuxt/kit": "^3.15.0",
     "@nuxtjs/color-mode": "^3.4.4",
-    "@tresjs/cientos": "4.2.0",
+    "@tresjs/cientos": "^4.3.0",
     "@tresjs/core": "4.3.3",
     "@tresjs/eslint-config-vue": "^0.2.1",
     "@tresjs/leches": "0.15.0-next.1",