chore: usdz demo

playground/components.d.ts

@@ -36,6 +36,8 @@ declare module '@vue/runtime-core' {
     ThePortal: typeof import('./src/components/portal-journey/ThePortal.vue')['default']
     TheSmallExperience: typeof import('./src/components/TheSmallExperience.vue')['default']
     TheSphere: typeof import('./src/components/TheSphere.vue')['default']
+    TheUSDZModel: typeof import('./src/components/udsz/TheUSDZModel.vue')['default']
+    Udsz: typeof import('./src/components/udsz/index.vue')['default']
     VectorSetProps: typeof import('./src/components/VectorSetProps.vue')['default']
   }
 }

playground/src/components/udsz/TheUSDZModel.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { useLoader } from '@tresjs/core'
+import { USDZLoader } from 'three/addons/loaders/USDZLoader.js'
+
+const res = await useLoader(
+  USDZLoader,
+  'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/models/usdz/saeukkang.usdz',
+)
+
+console.log(res)
+</script>
+
+<template>
+  <primitive :object="res" />
+</template>

playground/src/components/udsz/index.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { SRGBColorSpace, BasicShadowMap, NoToneMapping } from 'three'
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+
+const state = reactive({
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+})
+
+/* const akuAkuRef = ref(null) */
+
+const context = ref()
+watchEffect(() => {
+  if (context.value) {
+    console.log({ context: context.value.state.scene })
+  }
+})
+</script>
+<template>
+  <TresCanvas v-bind="state" ref="context">
+    <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
+    <OrbitControls make-default />
+    <TresAmbientLight :intensity="0.5" />
+
+    <Suspense>
+      <TheUSDZModel />
+    </Suspense>
+    <TresAxesHelper />
+    <TresDirectionalLight :position="[0, 2, 4]" :intensity="1" cast-shadow />
+  </TresCanvas>
+</template>

playground/src/pages/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts"></script>
 <template>
   <Suspense>
-    <TheExperience />
+    <Udsz />
   </Suspense>
 </template>