feat: 23 html component (#184)

* feat: render html from tres back to vue app * feat: correct objectScale and calculatePosition * feat: transform html * feat: add px to style transforms * feat: first attempt of occlussion * feat: fixed occlussion * feat: update html to new `useContextProvider` * feat: occlude works 🥳🎉 * docs: html page * docs: html examples * chore: update lock * chore: updated lock with docs * fix: build issue Stats * fix: add will change trasnform to force GPU * chore: lock update * docs: scroll control demo remove console * docs: temp * docs: why is broken idg * chore: remove console logs * docs: add client only again * docs: props table * chore: updated lint * chore: added rule override and fix Sky * chore: move html transform utils to its own file * chore: fixed lint issue on utils * chore: html shaders to glsl files * chore: disposal of shaderMaterial * chore: added vite-plugin-glsl for build * chore: install correct deps * chore: fix lint misc routes * docs: added geometry and material props to html * chore: components playground dts
Tresjs · Sep 27, 2023 · 3a488f0 · 3a488f0
1 parent 16710ca
commit 3a488f0
Show file tree

Hide file tree

Showing 27 changed files with 1,545 additions and 857 deletions.
diff --git a/.gitignore b/.gitignore
@@ -22,5 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-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']