feat(docs): added stackblitz embed for docs

docs/.vitepress/theme/components/FirstScene.vue

@@ -1,25 +1,59 @@
 <script setup lang="ts">
-import { OrbitControls } from '@tresjs/cientos'
+import { ref, onMounted } from 'vue'
+import { Color, sRGBEncoding, ACESFilmicToneMapping } from 'three'
+import { OrbitControls, useTweakPane } from '@tresjs/cientos'
 
-const styles = {
-  width: '100%',
-  height: '500px',
-  border: '1px solid #e2e2e2',
-  borderRadius: '8px',
-  overflow: 'hidden',
-}
+import Cone from './Cone.vue'
+import Cube from './Cube.vue'
+import Sphere from './Sphere.vue'
+import Ground from './Ground.vue'
+
+const LightRef = ref()
+
+useTweakPane()
+
+onMounted(() => {
+  LightRef.value.shadow.mapSize.set(1024, 1024)
+  LightRef.value.shadow.camera.near = 0.5
+  LightRef.value.shadow.camera.far = 2000
+  LightRef.value.shadow.camera.left = -10
+  LightRef.value.shadow.camera.right = 10
+  LightRef.value.shadow.camera.top = 10
+  LightRef.value.shadow.camera.bottom = -10
+})
 </script>
+
 <template>
-  <ClientOnly>
-    <TresCanvas shadows clear-color="#fff" :style="styles">
-      <TresPerspectiveCamera :position="[0, 2, 4]" />
-      <OrbitControls />
-      <TresScene>
-        <TresMesh :rotation="[-Math.PI / 4, -Math.PI / 4, Math.PI / 4]">
-          <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
-          <TresMeshBasicMaterial color="#FBB03B" />
-        </TresMesh>
-      </TresScene>
-    </TresCanvas>
-  </ClientOnly>
+  <TresCanvas
+    clear-color="#82DBC5"
+    shadows
+    alpha
+    physically-correct-lights
+    :output-encoding="sRGBEncoding"
+    :tone-mapping="ACESFilmicToneMapping"
+  >
+    <OrbitControls />
+    <TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
+    <TresScene>
+      <TresMesh :position="[-2, 6, 0]" :rotation="[0, Math.PI, 0]" cast-shadow>
+        <TresConeGeometry :args="[1, 1.5, 3]" />
+        <TresMeshToonMaterial color="#82DBC5" />
+      </TresMesh>
+      <TresMesh :position="[0, 4, 0]" cast-shadow>
+        <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
+        <TresMeshToonMaterial color="#4F4F4F" />
+      </TresMesh>
+      <TresMesh :position="[2, 2, 0]" cast-shadow>
+        <TresSphereGeometry />
+        <TresMeshToonMaterial color="#FBB03B" />
+      </TresMesh>
+      <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
+      <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
+        <TresPlaneGeometry :args="[10, 10, 10, 10]" />
+        <TresMeshToonMaterial color="greenyellow" />
+      </TresMesh>
+      <TresAmbientLight :intensity="0.75" />
+      <TresDirectionalLight ref="LightRef" :position="[-4, 8, 4]" :intensity="0.5" cast-shadow />
+    </TresScene>
+  </TresCanvas>
 </template>

docs/.vitepress/theme/components/StackBlitzEmbed.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import sdk, { EmbedOptions, Project } from '@stackblitz/sdk'
+import { ref, watch } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    projectId: string
+    options: EmbedOptions
+  }>(),
+  {
+    options: {
+      openFile: 'src/components/TheExperience.vue',
+      view: 'preview',
+      forceEmbedLayout: true,
+      hideExplorer: true,
+      hideNavigation: true,
+    },
+  },
+)
+
+const embed = ref(null)
+const isSnippetLoaded = ref(false)
+
+watch(
+  () => embed.value,
+  value => {
+    if (value) {
+      sdk.embedProjectId(value, props.projectId, props.options)
+    }
+  },
+)
+</script>
+<template>
+  <div ref="embed" class="stackblitz-embed">
+    <div v-if="!isSnippetLoaded" class="text-gray-500 text-2xl">Loading...</div>
+  </div>
+</template>
+
+<style>
+.stackblitz-embed {
+  margin: 2rem 0;
+  border-radius: 8px;
+  overflow: hidden;
+  border: none;
+  min-height: 500px;
+}
+</style>

docs/.vitepress/theme/index.ts

@@ -3,12 +3,13 @@ import Tres from '@tresjs/core'
 import DefaultTheme from 'vitepress/theme'
 import './config.css'
 import FirstScene from './components/FirstScene.vue'
+import StackBlitzEmbed from './components/StackBlitzEmbed.vue'
 
 export default {
   ...DefaultTheme,
   enhanceApp(ctx) {
     ctx.app.component('FirstScene', FirstScene)
-
+    ctx.app.component('StackBlitzEmbed', StackBlitzEmbed)
     ctx.app.use(Tres)
   },
 }

docs/guide/index.md

@@ -1,5 +1,7 @@
 # Introduction
 
+<FirstScene style="aspect-ratio: 16/9; height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;"/>
+
 ```
 npm install three @tresjs/core -D
 ```

package.json

@@ -45,6 +45,7 @@
     "@alvarosabu/prettier-config": "^1.2.0",
     "@changesets/changelog-github": "^0.4.7",
     "@changesets/cli": "^2.25.2",
+    "@stackblitz/sdk": "^1.8.1",
     "@tresjs/cientos": "workspace:^1.0.0",
     "@tresjs/core": "workspace:^1.0.0",
     "@typescript-eslint/eslint-plugin": "^5.42.0",

pnpm-lock.yaml

@@ -7,6 +7,7 @@ importers:
       '@alvarosabu/prettier-config': ^1.2.0
       '@changesets/changelog-github': ^0.4.7
       '@changesets/cli': ^2.25.2
+      '@stackblitz/sdk': ^1.8.1
       '@tresjs/cientos': workspace:^1.0.0
       '@tresjs/core': workspace:^1.0.0
       '@typescript-eslint/eslint-plugin': ^5.42.0
@@ -23,6 +24,7 @@ importers:
       '@alvarosabu/prettier-config': 1.2.0_prettier@2.8.0
       '@changesets/changelog-github': 0.4.7
       '@changesets/cli': 2.25.2
+      '@stackblitz/sdk': 1.8.1
       '@tresjs/cientos': link:packages/cientos
       '@tresjs/core': link:packages/tres
       '@typescript-eslint/eslint-plugin': 5.44.0_vfrilbydaxalswvos6uuh4sxs4
@@ -1005,6 +1007,10 @@ packages:
       string-argv: 0.3.1
     dev: true
 
+  /@stackblitz/sdk/1.8.1:
+    resolution: {integrity: sha512-hjYfjOLQBNDzqPD5AkGJOD7j+uvFwGocDTmwNqmLCWR5EY7BDtcOtDY2M+91v/twYWWNvI7N8UNIgojCPNgzMA==}
+    dev: true
+
   /@tootallnate/once/2.0.0:
     resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
     engines: {node: '>= 10'}