Merge branch 'main' into hotfix/v3.4.1

Tresjs · Sep 28, 2023 · 46077fb · 46077fb
2 parents 2570e49 + 3a488f0
commit 46077fb
Show file tree

Hide file tree

Showing 26 changed files with 1,535 additions and 855 deletions.
diff --git a/.gitignore b/.gitignore
@@ -23,5 +23,6 @@ dist-ssr
 *.sln
 *.sw?
 stats.html
-docs/.vitepress/dist
-docs/.vitepress/cache/deps/*.*
+docs/.vitepress/dist/
+docs/.vitepress/cache/
+docs/.vitepress/.temp/
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -1,9 +1,13 @@
 import { defineConfig } from 'vitepress'
-import Unocss from 'unocss/vite'
-import svgLoader from 'vite-svg-loader'
 import { resolve } from 'pathe'
 import { templateCompilerOptions } from '@tresjs/core'
 
+const whitelist = [
+  'TresCanvas',
+  'TresLeches',
+  'TresScene',
+]
+
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   title: 'Cientos',
@@ -104,6 +108,7 @@ export default defineConfig({
         items: [
           { text: 'useTweakpane', link: '/guide/misc/use-tweakpane' },
           { text: 'Stats', link: '/guide/misc/stats' },
+          { text: 'Html', link: '/guide/misc/html-component' },
           { text: 'StatsGl', link: '/guide/misc/stats-gl' },
         ],
       },
@@ -142,6 +147,10 @@ export default defineConfig({
     },
   },
   vue: {
-    ...templateCompilerOptions,
+    template: {
+      compilerOptions: {
+        isCustomElement: (tag: string) => tag.startsWith('Tres') && !whitelist.includes(tag) || tag === 'primitive',
+      },
+    },
   },
 })
diff --git a/docs/.vitepress/theme/TresLayout.vue b/docs/.vitepress/theme/TresLayout.vue
@@ -1,8 +1,8 @@
 <script setup>
-import DefaultTheme from 'vitepress/theme'
+import Theme from 'vitepress/theme'
 import LoveVueThreeJS from './components/LoveVueThreeJS.vue'
 
-const { Layout } = DefaultTheme
+const { Layout } = Theme
 </script>
 
 <template>

diff --git a/docs/.vitepress/theme/components/DocsDemo.vue b/docs/.vitepress/theme/components/DocsDemo.vue
@@ -4,12 +4,12 @@
 <template>
   <ClientOnly>
     <div
-      class="relative"
-      style="aspect-ratio: 16/9; height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;"
+      class="relative aspect-video"
+      style=" height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;"
     >
       <Suspense>
         <slot />
       </Suspense>
-    </div> 
+    </div>
   </ClientOnly>
 </template>
diff --git a/docs/.vitepress/theme/components/HtmlDemo.vue b/docs/.vitepress/theme/components/HtmlDemo.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
+
+import { OrbitControls, Html } from '@tresjs/cientos'
+import { reactive } from 'vue'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[3, 3, 8]" />
+    <OrbitControls />
+    <TresMesh :position="[1, 1, 1]">
+      <TresBoxGeometry />
+      <TresMeshNormalMaterial />
+      <Html
+        center
+        transform
+        :distance-factor="4"
+        :position="[0, 0, 0.65]"
+        :scale="[0.75, 0.75, 0.75]"
+      >
+        <h1 class="bg-white dark:bg-dark text-xs p-1 rounded">
+          I'm a Box 📦
+        </h1>
+      </Html>
+    </TresMesh>
+    <TresGridHelper />
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>
diff --git a/docs/.vitepress/theme/components/HtmlLaptopDemo.vue b/docs/.vitepress/theme/components/HtmlLaptopDemo.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
+
+import { OrbitControls, Html, useGLTF, Levioso, ContactShadows } from '@tresjs/cientos'
+
+const gl = {
+  clearColor: '#241a1a',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+
+const { nodes } 
+  = await useGLTF('https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/macbook/model.gltf', 
+    { draco: true },
+  )
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[-5, 4, 3]" />
+    <OrbitControls />
+
+    <primitive :object="nodes.Macbook">
+      <Html
+        transform
+        wrapper-class="webpage"
+        :distance-factor="11"
+        :position="[0, 10.5, -13.6]"
+        occlude
+        :rotation-x="-0.256"
+      >
+        <iframe
+          class="rounded-lg w-[1024px] h-[670px]"
+          src="https://tresjs.org"
+          frameborder="0"
+        />
+      </Html>
+    </primitive>
+
+    <ContactShadows
+      :blur="3.5"
+      :resolution="512"
+      :opacity="1"
+    />
+    <TresAmbientLight :intensity="1" />
+    <TresDirectionalLight
+      :intensity="2"
+      :position="[2, 3, 0]"
+      :cast-shadow="true"
+      :shadow-camera-far="50"
+      :shadow-camera-left="-10"
+      :shadow-camera-right="10"
+      :shadow-camera-top="10"
+      :shadow-camera-bottom="-10"
+    />
+  </TresCanvas>
+</template>
diff --git a/docs/.vitepress/theme/components/HtmlOccludeDemo.vue b/docs/.vitepress/theme/components/HtmlOccludeDemo.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
+
+import { OrbitControls, Html } from '@tresjs/cientos'
+import { reactive, ref } from 'vue'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+
+const sphereRef = ref(null)
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[3, 3, 8]" />
+    <OrbitControls />
+    <TresMesh :position="[1, 1, 1]">
+      <TresBoxGeometry />
+      <TresMeshNormalMaterial />
+      <Html
+        center
+        transform
+        :occlude="[sphereRef]"
+        :distance-factor="4"
+      >
+        <h1 class="bg-white dark:bg-dark text-xs p-1 rounded">
+          Move camera
+        </h1>
+      </Html>
+    </TresMesh>
+    <TresMesh
+      ref="sphereRef"
+      :position="[3, 1, 1]"
+    >
+      <TresSphereGeometry />
+      <TresMeshNormalMaterial />
+      <Html
+        center
+        transform
+        :distance-factor="4"
+      >
+        <h1 class="bg-white dark:bg-dark text-xs p-1 rounded">
+          Sphere
+        </h1>
+      </Html>
+    </TresMesh>
+    <TresGridHelper />
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>
diff --git a/docs/components.d.ts b/docs/components.d.ts
@@ -3,7 +3,7 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-export {}
+export { }
 
 declare module 'vue' {
   export interface GlobalComponents {
@@ -15,6 +15,9 @@ declare module 'vue' {
     Feather: typeof import('./.vitepress/theme/components/Feather.vue')['default']
     GlassMaterialDemo: typeof import('./.vitepress/theme/components/GlassMaterialDemo.vue')['default']
     GLTFModelDemo: typeof import('./.vitepress/theme/components/GLTFModelDemo.vue')['default']
+    HtmlDemo: typeof import('./.vitepress/theme/components/HtmlDemo.vue')['default']
+    HtmlLaptopDemo: typeof import('./.vitepress/theme/components/HtmlLaptopDemo.vue')['default']
+    HtmlOccludeDemo: typeof import('./.vitepress/theme/components/HtmlOccludeDemo.vue')['default']
     LeviosoDemo: typeof import('./.vitepress/theme/components/LeviosoDemo.vue')['default']
     LoveVueThreeJS: typeof import('./.vitepress/theme/components/LoveVueThreeJS.vue')['default']
     MapControlsDemo: typeof import('./.vitepress/theme/components/MapControlsDemo.vue')['default']