docs: Add Three.js content

Author: botmaster

components/content/ExperienceContentWrapper.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import {Mesh} from "three";
+const boxRef = ref<Mesh>()
+
+function onRender() {
+  if (boxRef.value) {
+    boxRef.value.rotation.y +=  0.01
+    boxRef.value.rotation.x +=  0.01
+  }
+}
+</script>
+
+<template>
+  <div class="w-full aspect-video">
+    <TresCanvas :clear-alpha="0" :antialias="false" @render="onRender">
+
+      <TresPerspectiveCamera
+        :position="[4.3, 3.2, 6]"
+        :look-at="[0, 2.5, 0]"
+      />
+      <TresAmbientLight :intensity="1" />
+      <TresDirectionalLight :position="[5, 10, 5]" :intensity="2" />
+      <TresDirectionalLight :position="[-5, 5, 0]" :intensity="1.2" color="blue"  />
+      <TresMesh ref="boxRef" :position="[0, 3, 0]">
+        <TresBoxGeometry :args="[2.5,2.5,2.5]" />
+        <TresMeshNormalMaterial />
+      </TresMesh>
+      <ContactShadows :opacity="0.5" :scale="10" :blur="2" :far="10" />
+    </TresCanvas>
+  </div>
+</template>

components/tres/TheExperience.vue

@@ -15,5 +15,5 @@ import TheDog from './TheDog.vue'
     <Environment preset="sunset" :background="false" :blur="1" />
   </Suspense>
   <TheDog />
-  <!-- Render the animated model here -->
+  <ContactShadows :opacity="0.5" :scale="10" :blur="2" :far="10" />
 </template>

content/fr/index.md

@@ -64,6 +64,11 @@ Plus de détails sur mon profil :Icon{name='logos:linkedin-icon'} [LinkedIn](htt
 ::Sheetelevation
 ### Dernières expérimentations
 
+#### Three.js + Tres.js + Vue 3 + Vite
+
+::LazyExperienceContentWrapper
+::
+
 #### Zégut PG
 [https://zegut-pg.netlify.app/](https://zegut-pg.netlify.app/){target="_blank" rel="noopener"}