Ver código fonte

docs: remove tres scene from everywhere

alvarosabu 2 anos atrás
pai
commit
9206229a25

+ 1 - 1
docs/cientos/abstractions/environment.md

@@ -1,4 +1,4 @@
-# Environment <Badge type="warning" text="^1.7.0" />
+# Environment
 
 
 ![Environment](/cientos/environment.png)
 ![Environment](/cientos/environment.png)
 
 

+ 3 - 5
docs/cientos/abstractions/pam-camera-mouse.md

@@ -12,11 +12,9 @@ You only need import it and use it `<PamCameraMouse />` additionally you can pas
 <template>
 <template>
   <TresCanvas>
   <TresCanvas>
     <PamCameraMouse />
     <PamCameraMouse />
-    <TresScene>
-      <Text3D text="TresJS" font="/fonts/FiraCodeRegular.json">
-        <TresMeshNormalMaterial />
-      </Text3D>
-    </TresScene>
+    <Text3D text="TresJS" font="/fonts/FiraCodeRegular.json">
+      <TresMeshNormalMaterial />
+    </Text3D>
   </TresCanvas>
   </TresCanvas>
 </template>
 </template>
 ```
 ```

+ 8 - 12
docs/cientos/abstractions/text-3d.md

@@ -1,4 +1,4 @@
-# Text3D <Badge type="warning" text="^1.1.0" />
+# Text3D
 
 
 `<Text3D />` is a component that renders a 3D text. It is a wrapper around the [TextGeometry](https://threejs.org/docs/#api/en/geometries/TextGeometry) class.
 `<Text3D />` is a component that renders a 3D text. It is a wrapper around the [TextGeometry](https://threejs.org/docs/#api/en/geometries/TextGeometry) class.
 
 
@@ -11,11 +11,9 @@ To use the `<Text3D />` component you need to pass the `font` prop with the URL
 ```vue
 ```vue
 <template>
 <template>
   <TresCanvas>
   <TresCanvas>
-    <TresScene>
-      <Text3D text="TresJS" font="/fonts/FiraCodeRegular.json">
-        <TresMeshNormalMaterial />
-      </Text3D>
-    </TresScene>
+    <Text3D text="TresJS" font="/fonts/FiraCodeRegular.json">
+      <TresMeshNormalMaterial />
+    </Text3D>
   </TresCanvas>
   </TresCanvas>
 </template>
 </template>
 ```
 ```
@@ -25,12 +23,10 @@ Notice that you need to pass the `<TresMeshNormalMaterial />` component as a chi
 ```vue
 ```vue
 <template>
 <template>
   <TresCanvas>
   <TresCanvas>
-    <TresScene>
-      <Text3D font="/fonts/FiraCodeRegular.json">
-        TresJS
-        <TresMeshNormalMaterial />
-      </Text3D>
-    </TresScene>
+    <Text3D font="/fonts/FiraCodeRegular.json">
+      TresJS
+      <TresMeshNormalMaterial />
+    </Text3D>
   </TresCanvas>
   </TresCanvas>
 </template>
 </template>
 ```
 ```

+ 1 - 1
docs/cientos/abstractions/use-animations.md

@@ -1,4 +1,4 @@
-# useAnimations <Badge type="warning" text="^1.5.0" />
+# useAnimations
 
 
 `useAnimation` is a composable that returns a `shallowReactive` with all the models actions based on the animations provided. It is a wrapper around the [AnimationMixer](https://threejs.org/docs/#api/en/animation/AnimationMixer) class.
 `useAnimation` is a composable that returns a `shallowReactive` with all the models actions based on the animations provided. It is a wrapper around the [AnimationMixer](https://threejs.org/docs/#api/en/animation/AnimationMixer) class.
 
 

+ 1 - 1
docs/cientos/controls/orbit-controls.md

@@ -14,7 +14,7 @@ It just works. 💯
 <template>
 <template>
   <TresCanvas shadows alpha>
   <TresCanvas shadows alpha>
     <OrbitControls />
     <OrbitControls />
-    <TresScene> ... </TresScene>
+
   </TresCanvas>
   </TresCanvas>
 </template>
 </template>
 ```
 ```

+ 5 - 7
docs/cientos/controls/transform-controls.md

@@ -15,13 +15,11 @@ const boxRef = shallowRef()
 <template>
 <template>
   <TresCanvas>
   <TresCanvas>
     <OrbitControls make-default />
     <OrbitControls make-default />
-    <TresScene>
-        <TransformControls :object="boxRef" />
-        <TresMesh ref="boxRef" :position="[0, 4, 0]" cast-shadow>
-            <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
-            <TresMeshToonMaterial color="#4F4F4F" />
-        </TresMesh>
-    </TresScene>
+      <TransformControls :object="boxRef" />
+      <TresMesh ref="boxRef" :position="[0, 4, 0]" cast-shadow>
+          <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
+          <TresMeshToonMaterial color="#4F4F4F" />
+      </TresMesh>
   </TresCanvas>
   </TresCanvas>
 </template>
 </template>
 ```
 ```

+ 0 - 1
docs/cientos/index.md

@@ -34,7 +34,6 @@ Now you can use the `OrbitControls` component in your scene.
 <template>
 <template>
   <TresCanvas shadows alpha>
   <TresCanvas shadows alpha>
     <OrbitControls />
     <OrbitControls />
-    <TresScene> ... </TresScene>
   </TresCanvas>
   </TresCanvas>
 </template>
 </template>
 ```
 ```

+ 4 - 6
docs/cientos/loaders/fbx-model.md

@@ -2,21 +2,19 @@
 
 
 The `FBXModel` component is a wrapper around [`useFBX`](./use-fbx.md) composable and accepts the same options as props.
 The `FBXModel` component is a wrapper around [`useFBX`](./use-fbx.md) composable and accepts the same options as props.
 
 
-```vue{2,10}
+```vue{2,9}
 <script setup lang="ts">
 <script setup lang="ts">
 import { OrbitControls, FBXModel } from '@tresjs/cientos'
 import { OrbitControls, FBXModel } from '@tresjs/cientos'
 </script>
 </script>
 <template>
 <template>
-  <Suspense>
     <TresCanvas clear-color="#82DBC5" shadows alpha>
     <TresCanvas clear-color="#82DBC5" shadows alpha>
       <TresPerspectiveCamera :position="[11, 11, 11]" />
       <TresPerspectiveCamera :position="[11, 11, 11]" />
       <OrbitControls />
       <OrbitControls />
-      <TresScene>
+      <Suspense>
         <FBXModel path="/models/AkuAku.fbx" />
         <FBXModel path="/models/AkuAku.fbx" />
-        <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
-      </TresScene>
+      </Suspense>
+      <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
     </TresCanvas>
     </TresCanvas>
-  </Suspense>
 </template>
 </template>
 ```
 ```
 
 

+ 4 - 6
docs/cientos/loaders/gltf-model.md

@@ -2,21 +2,19 @@
 
 
 The `GLTFModel` component is a wrapper around [`useGLTF`](./use-gltf.md) composable and accepts the same options as props.
 The `GLTFModel` component is a wrapper around [`useGLTF`](./use-gltf.md) composable and accepts the same options as props.
 
 
-```vue{2,10}
+```vue{2,9}
 <script setup lang="ts">
 <script setup lang="ts">
 import { OrbitControls, GLTFModel } from '@tresjs/cientos'
 import { OrbitControls, GLTFModel } from '@tresjs/cientos'
 </script>
 </script>
 <template>
 <template>
-  <Suspense>
     <TresCanvas clear-color="#82DBC5" shadows alpha>
     <TresCanvas clear-color="#82DBC5" shadows alpha>
       <TresPerspectiveCamera :position="[11, 11, 11]" />
       <TresPerspectiveCamera :position="[11, 11, 11]" />
       <OrbitControls />
       <OrbitControls />
-      <TresScene>
+      <Suspense>
         <GLTFModel path="/models/AkuAku.gltf" draco />
         <GLTFModel path="/models/AkuAku.gltf" draco />
-        <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
-      </TresScene>
+      </Suspense>
+      <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
     </TresCanvas>
     </TresCanvas>
-  </Suspense>
 </template>
 </template>
 ```
 ```
 
 

+ 6 - 8
docs/cientos/loaders/use-fbx.md

@@ -12,12 +12,10 @@ const model = await useFBX('/models/AkuAku.fbx')
 
 
 Then is as straightforward as adding the scene to your scene:
 Then is as straightforward as adding the scene to your scene:
 
 
-```html{4}
-<Suspense>
-  <TresCanvas shadows alpha>
-    <TresScene>
-      <TresMesh v-bind="scene" />
-    </TresScene>
-  </TresCanvas>
-</Suspense>
+```html{3}
+<TresCanvas shadows alpha>
+  <Suspense>
+    <TresMesh v-bind="scene" />
+  </Suspense>
+</TresCanvas>
 ```
 ```

+ 6 - 8
docs/cientos/loaders/use-gltf.md

@@ -12,14 +12,12 @@ const { scene } = await useGLTF('/models/AkuAku.gltf')
 
 
 Then is as straightforward as adding the scene to your scene:
 Then is as straightforward as adding the scene to your scene:
 
 
-```html{4}
-<Suspense>
-  <TresCanvas shadows alpha>
-    <TresScene>
-      <TresMesh v-bind="scene" />
-    </TresScene>
-  </TresCanvas>
-</Suspense>
+```html{3}
+<TresCanvas shadows alpha>
+  <Suspense>
+    <TresMesh v-bind="scene" />
+  </Suspense>
+</TresCanvas>
 ```
 ```
 
 
 An advantage of using `useGLTF`is that you can pass a `draco` prop to enable [Draco compression](https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader) for the model. This will reduce the size of the model and improve performance.
 An advantage of using `useGLTF`is that you can pass a `draco` prop to enable [Draco compression](https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader) for the model. This will reduce the size of the model and improve performance.

+ 14 - 18
docs/examples/load-textures.md

@@ -26,12 +26,10 @@ Then you can pass the texture to a material:
 ```html
 ```html
 <Suspense>
 <Suspense>
   <TresCanvas>
   <TresCanvas>
-    <TresScene>
-      <TresMesh>
-        <TresSphereGeometry :args="[1,32,32]" />
-        <TresMeshStandardMaterial :map="texture" />
-      </TresMesh>
-    </TresScene>
+    <TresMesh>
+      <TresSphereGeometry :args="[1,32,32]" />
+      <TresMeshStandardMaterial :map="texture" />
+    </TresMesh>
   </TresCanvas>
   </TresCanvas>
 </Suspense>
 </Suspense>
 ```
 ```
@@ -61,18 +59,16 @@ Similar to the previous example, we can pass all the textures to a material via
 ```html
 ```html
 <Suspense>
 <Suspense>
   <TresCanvas>
   <TresCanvas>
-    <TresScene>
-      <TresMesh>
-        <TresSphereGeometry :args="[1,32,32]" />
-        <TresMeshStandardMaterial
-          :map="pbrTexture.map"
-          :displacementMap="pbrTexture.displacementMap"
-          :roughnessMap="pbrTexture.roughnessMap"
-          :normalMap="pbrTexture.normalMap"
-          :ambientOcclusionMap="pbrTexture.ambientOcclusionMap"
-        />
-      </TresMesh>
-    </TresScene>
+    <TresMesh>
+      <TresSphereGeometry :args="[1,32,32]" />
+      <TresMeshStandardMaterial
+        :map="pbrTexture.map"
+        :displacementMap="pbrTexture.displacementMap"
+        :roughnessMap="pbrTexture.roughnessMap"
+        :normalMap="pbrTexture.normalMap"
+        :ambientOcclusionMap="pbrTexture.ambientOcclusionMap"
+      />
+    </TresMesh>
   </TresCanvas>
   </TresCanvas>
 </Suspense>
 </Suspense>
 ```
 ```

+ 1 - 1
package.json

@@ -52,7 +52,7 @@
     "@changesets/cli": "^2.25.2",
     "@changesets/cli": "^2.25.2",
     "@stackblitz/sdk": "^1.8.1",
     "@stackblitz/sdk": "^1.8.1",
     "@tresjs/cientos": "workspace:^2.0.0-alpha.1",
     "@tresjs/cientos": "workspace:^2.0.0-alpha.1",
-    "@tresjs/core": "workspace:^2.0.0-alpha.1",
+    "@tresjs/core": "workspace:2.0.0-alpha.1",
     "@typescript-eslint/eslint-plugin": "^5.42.0",
     "@typescript-eslint/eslint-plugin": "^5.42.0",
     "@typescript-eslint/parser": "^5.42.0",
     "@typescript-eslint/parser": "^5.42.0",
     "conventional-changelog-cli": "^2.2.2",
     "conventional-changelog-cli": "^2.2.2",

+ 1 - 1
pnpm-lock.yaml

@@ -9,7 +9,7 @@ importers:
       '@changesets/cli': ^2.25.2
       '@changesets/cli': ^2.25.2
       '@stackblitz/sdk': ^1.8.1
       '@stackblitz/sdk': ^1.8.1
       '@tresjs/cientos': workspace:^2.0.0-alpha.1
       '@tresjs/cientos': workspace:^2.0.0-alpha.1
-      '@tresjs/core': workspace:^2.0.0-alpha.1
+      '@tresjs/core': workspace:2.0.0-alpha.1
       '@typescript-eslint/eslint-plugin': ^5.42.0
       '@typescript-eslint/eslint-plugin': ^5.42.0
       '@typescript-eslint/parser': ^5.42.0
       '@typescript-eslint/parser': ^5.42.0
       conventional-changelog-cli: ^2.2.2
       conventional-changelog-cli: ^2.2.2