Tresjs · alvarosabu · Sep 27, 2023 · Jul 13, 2023 · Jul 13, 2023 · Jul 14, 2023
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,6 +1,7 @@
 {
   "extends": "@tresjs/eslint-config-vue",
   "rules": {
-    "@typescript-eslint/no-use-before-define": "off"
+    "@typescript-eslint/no-use-before-define": "off",
+    "vue/attribute-hyphenation": "off"
   }
 }
diff --git a/.gitignore b/.gitignore
@@ -23,4 +23,5 @@ dist-ssr
 *.sln
 *.sw?
 docs/.vitepress/dist
-docs/.vitepress/cache/deps/*.*
+docs/.vitepress/cache/deps/*.*
+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/.vitepress/theme/components/ScrollControlsDemo.vue b/docs/.vitepress/theme/components/ScrollControlsDemo.vue
@@ -11,11 +11,6 @@ const sphereRef = ref()
 const boxRef = ref()
 const progress = ref(0)
 
-watchEffect(() => {
-  // eslint-disable-next-line no-console
-  console.log('jaime ~ progress:', progress.value)
-})
-
 const gl = {
   clearColor: '#333',
   alpha: true,

diff --git a/docs/components.d.ts b/docs/components.d.ts
@@ -10,15 +10,14 @@ declare module 'vue' {
     BackdropDemo: typeof import('./.vitepress/theme/components/BackdropDemo.vue')['default']
     CameraControlsDemo: typeof import('./.vitepress/theme/components/CameraControlsDemo.vue')['default']
     ContactShadowDemo: typeof import('./.vitepress/theme/components/ContactShadowDemo.vue')['default']
-    copy: typeof import('./.vitepress/theme/components/GLTFModelDemo copy.vue')['default']
-    DocDemo: typeof import('./.vitepress/theme/components/DocDemo.vue')['default']
     DocsDemo: typeof import('./.vitepress/theme/components/DocsDemo.vue')['default']
     FBXModelDemo: typeof import('./.vitepress/theme/components/FBXModelDemo.vue')['default']
     Feather: typeof import('./.vitepress/theme/components/Feather.vue')['default']
     GlassMaterialDemo: typeof import('./.vitepress/theme/components/GlassMaterialDemo.vue')['default']
-    GltfDemo: typeof import('./.vitepress/theme/components/GltfDemo.vue')['default']
-    GltfModelDemo: typeof import('./.vitepress/theme/components/GltfModelDemo.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']
@@ -30,10 +29,8 @@ declare module 'vue' {
     ScrollControlsDemo: typeof import('./.vitepress/theme/components/ScrollControlsDemo.vue')['default']
     SmokeDemo: typeof import('./.vitepress/theme/components/SmokeDemo.vue')['default']
     StarsDemo: typeof import('./.vitepress/theme/components/StarsDemo.vue')['default']
-    StatsGlDemo: typeof import('./.vitepress/theme/components/StatsGlDemo.vue')['default']
     Text3Demo: typeof import('./.vitepress/theme/components/Text3Demo.vue')['default']
     TransformControlsDemo: typeof import('./.vitepress/theme/components/TransformControlsDemo.vue')['default']
-    VideoTexture: typeof import('./.vitepress/theme/components/VideoTexture.vue')['default']
     VideoTextureDemo: typeof import('./.vitepress/theme/components/VideoTextureDemo.vue')['default']
     WobbleMaterialDemo: typeof import('./.vitepress/theme/components/WobbleMaterialDemo.vue')['default']
   }