Merge pull request Tresjs#41 from Tresjs/feature/30-landing-page-with…

…-product feat: 30 landing page with product
damienmontastier · May 24, 2023 · 37f2bfc · 37f2bfc
2 parents fa92502 + 6b7a5cb
commit 37f2bfc
Show file tree

Hide file tree

Showing 14 changed files with 2,251 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 <p align="center">
   <a href="https://www.npmjs.com/package/@tresjs/core"><img src="https://img.shields.io/npm/v/@tresjs/core?color=%2382DBCA" alt="npm package"></a>
-  <a href="https://discord.gg/tfY9aSNT"><img src="https://img.shields.io/badge/chat-discord-purple?style=flat&logo=discord" alt="discord chat"></a>
+  <a href="https://discord.gg/UCr96AQmWn"><img src="https://img.shields.io/badge/chat-discord-purple?style=flat&logo=discord" alt="discord chat"></a>
 </p>
 <br/>
 

diff --git a/components/content/pam-camera-mouse/index.vue b/components/content/pam-camera-mouse/index.vue
@@ -2,7 +2,7 @@
 import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
 import { TresCanvas, useRenderLoop } from '@tresjs/core'
 
-import { PamCameraMouse } from '@tresjs/cientos'
+import { MouseParallax } from '@tresjs/cientos'
 
 import Vertex from './shaders/vertex.glsl'
 import Fragment from './shaders/fragment.glsl'
@@ -35,7 +35,7 @@ onLoop(() => {
 <template>
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[0, 0, 5]" :fov="75" :near="0.1" :far="1000" />
-    <PamCameraMouse :factor="2" />
+    <MouseParallax :factor="2" />
     <TresMesh :scale="2" :position="[0.5, 0.5, 0]" cast-shadow>
       <TresSphereGeometry :args="[1, 30, 30]" />
       <TresShaderMaterial v-bind="shader" />

diff --git a/components/content/product-landing-page/Headphones.vue b/components/content/product-landing-page/Headphones.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { useGLTF, Levioso, ContactShadows } from '@tresjs/cientos'
+
+const props = defineProps({
+  color: {
+    type: String,
+    required: true,
+  },
+})
+
+const {
+  scene: headphones,
+  nodes,
+  materials,
+} = await useGLTF('/models/headphones/headphones.gltf', {
+  draco: true,
+})
+
+watch(
+  () => props.color,
+  color => {
+    materials.Base.color.set(color)
+
+    if (color === '#000000') {
+      materials.Base.roughness = 1
+      materials.Cush.color.set('#050505')
+    } else {
+      materials.Cush.color.set('#A4BCB7')
+    }
+  },
+  { immediate: true },
+)
+
+console.log({ headphones, nodes, materials })
+</script>
+<template>
+  <Levioso>
+    <primitive :object="nodes.Headphones_7" :position="[0, 0.5, 0]" :scale="[0.8, 0.8, 0.8]"></primitive>
+  </Levioso>
+  <ContactShadows :opacity="0.2" :blur="3" :position="[0, -2, 0]" />
+</template>
diff --git a/components/content/product-landing-page/index.vue b/components/content/product-landing-page/index.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { BasicShadowMap, SRGBColorSpace } from 'three'
+
+import { MouseParallax } from '@tresjs/cientos'
+import Headphones from './Headphones.vue'
+
+const gl = {
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+}
+
+const state = reactive({
+  selectedColor: '#903345',
+  colors: ['#903345', '#F2D3AC', '#F2F2F2', '#000000'],
+})
+</script>
+
+<template>
+  <div class="landingpage-bg w-full inset-0 h-full"></div>
+  <div class="absolute w-full inset-0 h-full flex justify-center items-center bg-red-200 bg-opacity-75">
+    <div class="w-2/3 h-1/2 bg-red-300 shadow-lg rounded flex">
+      <div class="w-1/2"></div>
+      <div class="w-1/2 p-4 text-light">
+        <h1 class="title animate-fade-in-right animate-ease">Experience Sound</h1>
+
+        <span class="absolute border-1 border-solid border-white w-800px inline-block" />
+
+        <p class="w-2/3 my-8 animate-fade-in">
+          Experience unparalleled audio immersion with the innovative SonicWave™️ Harmony Headphones.
+        </p>
+
+        <ul class="flex gap-8">
+          <li v-for="color in state.colors">
+            <button
+              class="w-10 h-10 rounded-full border-2 border-solid border-white mr-2 cursor-pointer"
+              :style="{ backgroundColor: color }"
+              @click="state.selectedColor = color"
+            ></button>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <div class="absolute w-1/2 inset-0 h-full flex justify-center items-center">
+    <TresCanvas v-bind="gl" class="pointer-events-none">
+      <TresPerspectiveCamera :position="[0, 0, 11]" />
+      <MouseParallax :factor="0.1" />
+      <Suspense>
+        <Headphones :color="state.selectedColor" />
+      </Suspense>
+      <TresAmbientLight :intensity="2" />
+      <TresPointLight :position="[0, 0, 10]" :intensity="1" />
+      <TresDirectionalLight :position="[3, 3, 3]" :intensity="3" />
+    </TresCanvas>
+  </div>
+</template>
+
+<style scoped>
+@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Heebo&display=swap');
+
+* {
+  font-family: 'Heebo', sans-serif;
+}
+
+.title {
+  margin-top: -120px;
+  font-family: 'Bebas Neue', cursive;
+  font-size: 128px;
+}
+
+.landingpage-bg {
+  background-image: url('/landingpage-bg.avif');
+  filter: blur(24px);
+}
+</style>
diff --git a/content/experiments/product-landing-page.md b/content/experiments/product-landing-page.md
@@ -0,0 +1,11 @@
+---
+thumbnail: /product-landing-page.png
+title: Product Landing Page
+slug: product-landing-page
+author: alvarosabu
+description: Transparent backdrop and model staging
+tags: ['product', 'levioso', 'glsl', 'contactShadows']
+---
+
+::product-landing-page
+::
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@iconify-json/ic": "^1.1.13",
-    "@tresjs/cientos": "2.1.0",
+    "@tresjs/cientos": "2.1.1",
     "@tresjs/core": "2.1.1",
     "@tresjs/post-processing": "^0.1.0",
     "postprocessing": "^6.31.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/landingpage-bg.avif b/public/landingpage-bg.avif
diff --git a/public/models/headphones/headphones.bin b/public/models/headphones/headphones.bin