chore: fix playground demos

playground/src/components/AnimatedModel.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { Color, sRGBEncoding } from 'three'
-
-/* import { OrbitControls, useTweakPane, useGLTF, useAnimations } from '@tresjs/cientos/' */
+import { TresCanvas } from '/@/'
 import { OrbitControls, useTweakPane, useGLTF, useAnimations } from '@tresjs/cientos'
 
 const bgColor = new Color('#F78B3D')
 
 const { pane } = useTweakPane()
 
-const { scene: model, animations } = await useGLTF('/models/ugly-naked-bunny/ugly-naked-bunny-animated.gltf')
+const { scene: model, animations } = await useGLTF(
+  'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/ugly-naked-bunny/ugly-naked-bunny-animated.gltf',
+)
 
 const { actions, mixer } = useAnimations(animations, model)
 
@@ -36,7 +37,7 @@ pane
     currentAction.play()
   })
 
-console.log({ animations, actions, mixer })
+console.log({ model, animations, actions, mixer })
 </script>
 
 <template>
@@ -49,13 +50,12 @@ console.log({ animations, actions, mixer })
       power-preference="high-performance"
       :output-encoding="sRGBEncoding"
     >
+      <TresPerspectiveCamera :position="[8, 8, 8]" :fov="45" :near="0.1" :far="10000" />
       <OrbitControls />
-      <TresPerspectiveCamera :position="8" :fov="45" :near="0.1" :far="10000" />
-      <TresScene :fog="bgColor">
-        <TresAmbientLight :color="0xffffff" :intensity="0.75" />
-        <TresMesh v-bind="model" />
-        <!--   <FBXModel ref="jeepRef" path="/models/low-poly-truck/Jeep_done.fbx" /> -->
-      </TresScene>
+
+      <TresAmbientLight :color="0xffffff" :intensity="2" />
+      <TresMesh v-bind="model" />
+      <TresDirectionalLight />
     </TresCanvas>
   </Suspense>
 </template>

playground/src/components/FBXModels.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import { Color, sRGBEncoding } from 'three'
 import { TresCanvas } from '/@/'
-import { OrbitControls, useTweakPane, FBXModel, useFBX } from '@tresjs/cientos/'
+import { OrbitControls, useTweakPane, FBXModel, useFBX } from '@tresjs/cientos'
 
 const bgColor = new Color('#F78B3D')
 useTweakPane()
 
 const jeepRef = ref()
 
-const model = await useFBX('/models/low-poly-truck/Jeep_done.fbx')
+const model = await useFBX(
+  'https://raw.githubusercontent.com/Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx',
+)
 model.position.set(0, 4, 0)
 model.scale.set(0.01, 0.01, 0.01)
 model.updateMatrixWorld()
@@ -28,13 +30,16 @@ watch(jeepRef, ({ model }) => {
     power-preference="high-performance"
     :output-encoding="sRGBEncoding"
   >
-    <OrbitControls />
     <TresPerspectiveCamera :position="8" :fov="45" :near="0.1" :far="10000" />
+    <OrbitControls />
 
     <TresAmbientLight :color="0xffffff" :intensity="0.75" />
     <TresMesh v-bind="model" />
     <Suspense>
-      <FBXModel ref="jeepRef" path="/models/low-poly-truck/Jeep_done.fbx" />
+      <FBXModel
+        ref="jeepRef"
+        path="https://raw.githubusercontent.com/Tresjs/assets/main//models/low-poly-truck/Jeep_done.fbx"
+      />
     </Suspense>
   </TresCanvas>
 </template>

playground/src/components/TheEnvironment.vue

@@ -30,29 +30,28 @@ watch(environmentTexture, ({ getTexture }) => {
   <TresCanvas preset="realistic">
     <TresPerspectiveCamera :position="[10, 10, 18]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
     <PamCameraMouse :factor="2" />
-    <TresScene>
-      <Environment
-        ref="environmentTexture"
-        background
-        :files="environmentFiles"
-        :path="'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap'"
-      />
-      <!--  <Environment ref="environmentTexture" background preset="sunset" /> -->
-      <TresAmbientLight :intensity="0.5" />
-
-      <TresMesh ref="sphereRef" :position="[0, 4, 0]" cast-shadow>
-        <TresSphereGeometry />
-        <TresMeshStandardMaterial color="#FBB03B" :map="envMap" :metalness="1" :roughness="0" />
-      </TresMesh>
-      <Box :position="[2, 6, 0]" cast-shadow>
-        <TresMeshStandardMaterial color="#008080" :map="envMap" :metalness="1" :roughness="0" />
-      </Box>
-      <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
-      <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
-        <TresPlaneGeometry :args="[20, 20, 20, 10]" />
-        <TresMeshToonMaterial />
-      </TresMesh>
-      <TresDirectionalLight :position="[0, 2, 4]" :intensity="1" cast-shadow />
-    </TresScene>
+
+    <Environment
+      ref="environmentTexture"
+      background
+      :files="environmentFiles"
+      :path="'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap'"
+    />
+    <!--  <Environment ref="environmentTexture" background preset="sunset" /> -->
+    <TresAmbientLight :intensity="0.5" />
+
+    <TresMesh ref="sphereRef" :position="[0, 4, 0]" cast-shadow>
+      <TresSphereGeometry />
+      <TresMeshStandardMaterial color="#FBB03B" :map="envMap" :metalness="1" :roughness="0" />
+    </TresMesh>
+    <Box :position="[2, 6, 0]" cast-shadow>
+      <TresMeshStandardMaterial color="#008080" :map="envMap" :metalness="1" :roughness="0" />
+    </Box>
+    <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
+    <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
+      <TresPlaneGeometry :args="[20, 20, 20, 10]" />
+      <TresMeshToonMaterial />
+    </TresMesh>
+    <TresDirectionalLight :position="[0, 2, 4]" :intensity="1" cast-shadow />
   </TresCanvas>
 </template>

playground/src/components/TheEvents.vue

@@ -35,25 +35,24 @@ function onPointerLeave(ev) {
 <template>
   <TresCanvas v-bind="state">
     <TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
+
+    <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.2" cast-shadow />
     <OrbitControls />
-    <TresScene>
-      <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.2" cast-shadow />
-      <template v-for="x in [-2.5, 0, 2.5]">
-        <template v-for="y in [-2.5, 0, 2.5]">
-          <TresMesh
-            v-for="z in [-2.5, 0, 2.5]"
-            :key="[x, y, z]"
-            :position="[x, y, z]"
-            @click="onClick"
-            @pointer-enter="onPointerEnter"
-            @pointer-leave="onPointerLeave"
-          >
-            <TresBoxGeometry :args="[1, 1, 1]" />
-            <TresMeshToonMaterial color="#efefef" />
-          </TresMesh>
-        </template>
+    <template v-for="x in [-2.5, 0, 2.5]">
+      <template v-for="y in [-2.5, 0, 2.5]">
+        <TresMesh
+          v-for="z in [-2.5, 0, 2.5]"
+          :key="[x, y, z]"
+          :position="[x, y, z]"
+          @click="onClick"
+          @pointer-enter="onPointerEnter"
+          @pointer-leave="onPointerLeave"
+        >
+          <TresBoxGeometry :args="[1, 1, 1]" />
+          <TresMeshToonMaterial color="#efefef" />
+        </TresMesh>
       </template>
-      <TresAmbientLight :intensity="0.5" />
-    </TresScene>
+    </template>
+    <TresAmbientLight :intensity="0.5" />
   </TresCanvas>
 </template>

playground/src/components/TheGizmos.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import { BasicShadowMap, sRGBEncoding, NoToneMapping } from 'three'
 import { TresCanvas } from '/@/'
-import { OrbitControls, useTweakPane } from '@tresjs/cientos'
+import { OrbitControls, TransformControls, useTweakPane } from '@tresjs/cientos'
 
 const state = shallowReactive({
   clearColor: '#201919',
   shadows: true,
   alpha: false,
-  physicallyCorrectLights: true,
   shadowMapType: BasicShadowMap,
   outputEncoding: sRGBEncoding,
   toneMapping: NoToneMapping,
@@ -71,13 +70,15 @@ axisFolder.addInput(transformState, 'showZ')
 
 <template>
   <TresCanvas v-bind="state">
-    <OrbitControls make-default />
     <TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
 
+    <OrbitControls make-default />
     <TresMesh ref="boxRef" :position="[0, 4, 0]" cast-shadow>
       <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
       <TresMeshToonMaterial color="#FBB03B" />
     </TresMesh>
+    <TransformControls :object="boxRef" v-bind="transformState" />
+
     <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
       <TresPlaneGeometry :args="[10, 10, 10, 10]" />
       <TresMeshToonMaterial />

playground/src/components/TheGroups.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { TresCanvas } from '/@/'
 import { useRenderLoop } from '/@/composables/useRenderLoop'
 import { ref } from 'vue'
 import { OrbitControls } from '@tresjs/cientos/'
@@ -18,20 +19,18 @@ onLoop(() => {
     <TresCanvas>
       <TresPerspectiveCamera :position="[5, 5, 5]" :fov="75" :aspect="1" :near="0.1" :far="1000" />
       <OrbitControls />
-      <TresScene>
-        <TresAmbientLight :color="0xffffff" :intensity="0.5" />
-        <TresGroup ref="groupRef" :position="[0, -4, -5]">
-          <TresMesh :scale="1" :position="[-4, 0, 0]" cast-shadow>
-            <TresSphereGeometry :args="[1, 500, 500]" />
-            <TresMeshToonMaterial color="#FBB03B" />
-          </TresMesh>
-          <TresMesh :scale="1" :position="[4, 0, 0]" cast-shadow>
-            <TresSphereGeometry :args="[1, 500, 500]" />
-            <TresMeshToonMaterial color="teal" />
-          </TresMesh>
-        </TresGroup>
-        <TresAxesHelper />
-      </TresScene>
+      <TresAmbientLight :color="0xffffff" :intensity="0.5" />
+      <TresGroup ref="groupRef" :position="[0, -4, -5]">
+        <TresMesh :scale="1" :position="[-4, 0, 0]" cast-shadow>
+          <TresSphereGeometry :args="[1, 500, 500]" />
+          <TresMeshToonMaterial color="#FBB03B" />
+        </TresMesh>
+        <TresMesh :scale="1" :position="[4, 0, 0]" cast-shadow>
+          <TresSphereGeometry :args="[1, 500, 500]" />
+          <TresMeshToonMaterial color="teal" />
+        </TresMesh>
+      </TresGroup>
+      <TresAxesHelper />
     </TresCanvas>
   </div>
 </template>

playground/src/components/TheSmallExperience.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { TresCanvas } from '/@/'
 import { OrbitControls } from '@tresjs/cientos/'
 </script>
 <template>
@@ -6,13 +7,11 @@ import { OrbitControls } from '@tresjs/cientos/'
     <TresCanvas>
       <TresPerspectiveCamera :position="[5, 5, 5]" :fov="75" :aspect="1" :near="0.1" :far="1000" />
       <OrbitControls />
-      <TresScene>
-        <TresAmbientLight :color="0xffffff" :intensity="0.5" />
-        <TresMesh ref="sphereRef" :scale="1" cast-shadow>
-          <TresSphereGeometry :args="[1, 500, 500]" />
-          <TresMeshToonMaterial color="#FBB03B" />
-        </TresMesh>
-      </TresScene>
+      <TresAmbientLight :color="0xffffff" :intensity="0.5" />
+      <TresMesh ref="sphereRef" :scale="1" cast-shadow>
+        <TresSphereGeometry :args="[1, 500, 500]" />
+        <TresMeshToonMaterial color="#FBB03B" />
+      </TresMesh>
     </TresCanvas>
   </div>
 </template>

playground/src/components/VectorSetProps.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { sRGBEncoding, BasicShadowMap, NoToneMapping } from 'three'
-
+import { TresCanvas } from '/@/'
 import { OrbitControls } from '@tresjs/cientos'
 // import { useRenderLoop } from '..'
 /* import { OrbitControls, GLTFModel } from '@tresjs/cientos' */
@@ -27,43 +27,41 @@ const state = reactive({
       :look-at="[-8, 3, -3]"
     />
     <OrbitControls make-default />
-    <TresScene>
-      <TresAmbientLight :intensity="0.5" />
+    <TresAmbientLight :intensity="0.5" />
 
-      <TresMesh
-        :scale-x="1.1"
-        :scale-y="2"
-        :scale-z="3"
-        :rotation-x="Math.PI * 1.5"
-        :rotation-y="Math.PI * 0.6"
-        :rotation-z="Math.PI * 0.2"
-        :position-y="1"
-        :position-z="-2"
-        cast-shadow
-      >
-        <TresBoxGeometry />
-        <TresMeshToonMaterial color="#FBB03B" />
-      </TresMesh>
-      <TresMesh
-        :scale-x="1.1"
-        :scale-y="2"
-        :scale-z="3"
-        :rotation-y="Math.PI * 0.6"
-        :rotation-x="Math.PI * 1.5"
-        :rotation-z="Math.PI * 0.2"
-        :position-y="1"
-        :position-z="2"
-        cast-shadow
-      >
-        <TresBoxGeometry />
-        <TresMeshToonMaterial :color-r="0xff / 255" :color-g="0x0 / 255" :color-b="0xff / 255" />
-      </TresMesh>
-      <TresDirectionalLight :position-y="8" :position-z="4" :intensity="0.7" cast-shadow />
-      <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
-        <TresPlaneGeometry :args="[10, 10, 10, 10]" />
-        <TresMeshToonMaterial />
-      </TresMesh>
-      <TresDirectionalLight :position-y="2" :position-z="4" :intensity="1" cast-shadow />
-    </TresScene>
+    <TresMesh
+      :scale-x="1.1"
+      :scale-y="2"
+      :scale-z="3"
+      :rotation-x="Math.PI * 1.5"
+      :rotation-y="Math.PI * 0.6"
+      :rotation-z="Math.PI * 0.2"
+      :position-y="1"
+      :position-z="-2"
+      cast-shadow
+    >
+      <TresBoxGeometry />
+      <TresMeshToonMaterial color="#FBB03B" />
+    </TresMesh>
+    <TresMesh
+      :scale-x="1.1"
+      :scale-y="2"
+      :scale-z="3"
+      :rotation-y="Math.PI * 0.6"
+      :rotation-x="Math.PI * 1.5"
+      :rotation-z="Math.PI * 0.2"
+      :position-y="1"
+      :position-z="2"
+      cast-shadow
+    >
+      <TresBoxGeometry />
+      <TresMeshToonMaterial :color-r="0xff / 255" :color-g="0x0 / 255" :color-b="0xff / 255" />
+    </TresMesh>
+    <TresDirectionalLight :position-y="8" :position-z="4" :intensity="0.7" cast-shadow />
+    <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
+      <TresPlaneGeometry :args="[10, 10, 10, 10]" />
+      <TresMeshToonMaterial />
+    </TresMesh>
+    <TresDirectionalLight :position-y="2" :position-z="4" :intensity="1" cast-shadow />
   </TresCanvas>
 </template>

playground/src/components/portal-journey/index.vue

@@ -13,8 +13,8 @@ const gl = {
 
 <template>
   <TresCanvas v-bind="gl">
-    <OrbitControls />
     <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
+    <OrbitControls />
     <TresFog :args="[gl.clearColor, 0.1, 75]" />
     <Suspense>
       <ThePortal />

playground/src/components/shaders-experiment/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { BasicShadowMap, sRGBEncoding, NoToneMapping, Vector2 } from 'three'
-import { TresCanvas, TresInstance, useRenderLoop } from '@tresjs/core'
+import { TresCanvas, TresInstance, useRenderLoop } from '/@/'
 import { OrbitControls } from '@tresjs/cientos'
 import vertexShader from './shaders/vertex.glsl'
 import fragmentShader from './shaders/fragment.glsl'
@@ -33,8 +33,8 @@ onLoop(({ elapsed }) => {
 
 <template>
   <TresCanvas v-bind="gl">
-    <OrbitControls />
     <TresPerspectiveCamera :position="[11, 11, 11]" />
+    <OrbitControls />
     <TresMesh ref="blobRef" :position="[0, 4, 0]">
       <TresSphereGeometry :args="[2, 32, 32]" />
       <TresShaderMaterial :vertex-shader="vertexShader" :fragment-shader="fragmentShader" :uniforms="uniforms" />

playground/src/pages/index.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts"></script>
 <template>
-  <MultipleCanvas />
+  <Suspense>
+    <AnimatedModel />
+  </Suspense>
 </template>