Merge pull request #131 from botmaster/doc/no-ref/Update-content

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/en/index.md

@@ -59,6 +59,14 @@ More details on my :Icon{name='logos:linkedin-icon'} [LinkedIn profile](https://
 ::Sheetelevation
 ### Last experiments
 
+#### 3D Model glTF animé
+[https://pascal-achard.com](https://pascal-achard.com)
+
+::LazyExperienceContentWrapper
+::
+
+3D experimentation with [Three.js](https://threejs.org/) and [Tres.js](https://tresjs.org/). Addition of an animated glTF 3D model (husky) to the home page of this site.
+
 #### Zégut PG
 [https://zegut-pg.netlify.app/](https://zegut-pg.netlify.app/){target="_blank" rel="noopener"}
 

content/fr/index.md

@@ -64,6 +64,14 @@ Plus de détails sur mon profil :Icon{name='logos:linkedin-icon'} [LinkedIn](htt
 ::Sheetelevation
 ### Dernières expérimentations
 
+#### 3D Model glTF animé
+[https://pascal-achard.com](https://pascal-achard.com)
+
+::LazyExperienceContentWrapper
+::
+
+Expérimentation 3D avec [Three.js](https://threejs.org/) et [Tres.js](https://tresjs.org/). Ajout d'un modèle 3D glTF animé (husky) sur la page d'accueil de ce site.
+
 #### Zégut PG
 [https://zegut-pg.netlify.app/](https://zegut-pg.netlify.app/){target="_blank" rel="noopener"}