docs(app): Improve docs examples with code group to avoid confusion (#…

…463) * feat(AnimatedSprite): add AnimatedSprite, playground, docs * chore(AnimatedSprite): fix linter errors * chore(AnimatedSprite): update docs * feat(AnimatedSprite): allow [numCols, numRows] as atlas prop * docs(AnimatedSprite): reorder sections, improve clarity * docs(AnimatedSprite): format type names * docs(AnimatedSprite): update no-atlas example to use [cols, rows] * chore(AnimatedSprite): run linter, remove console.log * refactor(AnimatedSprite): create new animation frames if props.reversed is toggled * docs(AtlasAnimationDefinitionParser): change 'delay' to 'duration' * refactor(AtlasAnimationDefinitionParser): make parse function private to module * refactor(AtlasAnimationDefinitionParser): use destructuring * refactor(AtlasAnimationDefinitionParser): use destructuring * refactor(AtlasAnimationDefinitionParser): rename returned value 'result' * chore: run linter * refactor(AtlasAnimationDefinitionParser): rename private error logging functions * refactor(Atlas): rename private functions * fix(Atlas): add missing argument to function call * refactor(AnimatedSprite): merge FrameData types as single type * refactor(AnimatedSprite): change callbacks to emits * chore(AnimatedSprite): run linter * chore(AnimatedSprite): format Atlas error message * fix(AnimatedSprite): return nullFrame animation if requested animation not found * refactor(AnimatedSprite): simplify component onLoop * chore(AnimatedSprite): run lint --fix * refactor(AnimatedSprite): add Atlasish type * refactor(AnimatedSprite): remove onLoad prop * feat(app)!: 227 Change the keyboardcontrols implementation * docs(AnimatedSprite): update docs and demos * docs(AnimatedSprite): update playground demo * refactor(AnimatedSprite): remove TresSprite * refactor(AnimatedSprite): rename prop, anchor -> center * refactor(AnimatedSprite): remove asSprite prop, improve clarity * docs(AnimatedSprite): update docs * refactor(AnimatedSprite): update playground * refactor(AnimatedSprite): rename 'page' -> 'atlas' * refactor(AnimatedSprite): make definitions reactive * feat(AnimatedSprite): change default fps * docs(AnimatedSprite): mark props as 'not reactive' * feat(AnimatedSprite): always emit last frame name on loop and on end * docs(AnimatedSprite): correct and update docs/demos * chore(AnimatedSprite): run linter * docs(AnimatedSprite): improve wording * feat: add arrow keys support * refactor(AnimatedSprite): improve variable name * refactor(AnimatedSprite): use degrees instead of radians in example * chore(AnimatedSprite): fix linter errors * refactor(app)!: 349 Remove directives from cientos * docs(app): 227 Add documentation for new KeyboardControls * feat(app): 227 Final details, ready to go * refactor: move in the right position a piece of code * chore: update core to `v4` * chore: release v4.0.0-next.0 * fix(MeshReflectionMaterial)!: add features/docs, reorganize * feat(AnimatedSprite): add asSprite prop * feat(AnimatedSprite): dispose texture onUnmounted * feat(AnimatedSprite): remove explicit click event * feat(AnimatedSprite): remove unnecessary Suspense * docs(AnimatedSprite): add asSprite control to demo * docs(AnimatedSprite): update demo code line highlights * docs(AnimatedSprite): update atlas path, image names * refactor: defineExpose * refactor: change value.value -> value.instance in defineExpose * fix: uncomment section * refactor(app): 160 Add Global audio, stats, statsGl * refactor: remove extra semi-colon, lint issue * chore: Fix Lint (console.logs should be disabled in playground) * chore: update lint * chore: fix lints * chore: fix demos * chore: fix lint * feat(app): 421 Adapt components to use useLoop instead of useRenderLoop * Revert "feat(app): 421 Adapt components to use useLoop instead of useRenderLoop" This reverts commit 24e9812. * feat(app): 421 Update components to use useLoop instead of useRenderLoop * chore: update statsGl y stats * fix lint * chore: update useEnviroment * chore: update fbo * chore: lint * feat: re-remove tweakpane (#425) * feat(app)!: 313 re-uninstall tweakpane * chore: fix lint * docs: update enviroment and useEnviroment docs * fix: remove hardcoded speed number, that setting at 0 doesn't stop the effect * update lock * chore: add Cylinder to v4 (#439) * chore: add Cylinder to v4 * chore: fix playground link * fix(Lensflare demo): add camera #435 (#441) * feat: update to core v4.2 * chore(ci): update node version to 20 for linting * chore: fix lints * feat: 423 enable on demand render mode usage (#436) * chore(deps): update deps to latest * chore: on demand invalidation composable with prop change detection * feat: on-demand orbit-controls * feat: on-demand camera controls * feat: invalidate also on autoRotate * feat: on-demand map controls and refactor * feat: on-demand transform controls * feat: on-demand keyboard controls * feat: on-demand keybaord controls * chore: added demo suffix to control pages to avoid confusions * feat: on-demand pointer lock controls * feat: on-demand scroll controls * feat: on-demand levioso * feat: correct orbit controls auto rotate invalidation * feat: on-demand text3d * feat: on-demand mouse-parallax * feat: on-demand fbo and size watcher refactor * chore(playground): refactor to use useLoop and sub components * chore: remove unused import for lint fix * chore(playground): refactor lensflare demo to use useLoop * feat: on-demand sampler * feat: on-demand invaldiation on reflector prop change * chore: added render activity graph and try to make on-demand work on AnimatedSprite * chore: renamed positional audio demo * chore: on-demand smoke * feat: on-demand precipitation * feat: on-dermand stars * feat: on-demand Environment * feat: on-demand sky * feat: on-demand Ocean component * chore: testing on-demand on fit * feat: on-demand Wobble Material * feat: on-demand invalidation holographic material * feat: on-demand reflection material * feat: on-demand custom shader material * chore: rename bakeshadows demo * chore: misc route * chore: ci, update action setup * docs: add migration guide from v3 in cientos (to do grammar check, ad… (#428) * docs: add migration guide from v3 in cientos (to do grammar check, add img) * docs: grammar corrections * fix lint * docs: rename migration-guide.md -> migrating-from-v3.md * docs: update wording/formatting --------- Co-authored-by: Peter <[email protected]> * fix(types): fixed types generics for `useGLTF` (#448) * feat(app): Add the option for x and y in mouseparallax component (#444) * feat(app): Add the option for x and y in mouseparallax component * fix reactivity, grammar corrections * change ref for shallowRef * chore: release v4.0.0-next.1 * docs(SVG): set playground render-mode to on-demand * refactor(HolographicMaterial): remove useOnDemandInvalidation, use invalidate * refactor(CustomShaderMaterial): remove useOnDemandInvalidated, use invalidate * refactor(MeshReflectionmaterial): remove useOnDemandInvalidated, use invalidate * refactor: call invalidate on props update * docs: add on-demand shapes playground demo * fix: reimplement ContactShadows for v4 (#449) * chore(deps): update deps to latest * chore: on demand invalidation composable with prop change detection * feat: on-demand orbit-controls * feat: on-demand camera controls * feat: invalidate also on autoRotate * feat: on-demand map controls and refactor * feat: on-demand transform controls * feat: on-demand keyboard controls * feat: on-demand keybaord controls * chore: added demo suffix to control pages to avoid confusions * feat: on-demand pointer lock controls * feat: on-demand scroll controls * feat: on-demand levioso * feat: correct orbit controls auto rotate invalidation * feat: on-demand text3d * feat: on-demand mouse-parallax * feat: on-demand fbo and size watcher refactor * chore(playground): refactor to use useLoop and sub components * chore: remove unused import for lint fix * chore(playground): refactor lensflare demo to use useLoop * feat: on-demand sampler * feat: on-demand invaldiation on reflector prop change * chore: added render activity graph and try to make on-demand work on AnimatedSprite * chore: renamed positional audio demo * chore: on-demand smoke * feat: on-demand precipitation * feat: on-dermand stars * feat: on-demand Environment * feat: on-demand sky * feat: on-demand Ocean component * chore: testing on-demand on fit * feat: on-demand Wobble Material * feat: on-demand invalidation holographic material * feat: on-demand reflection material * feat: on-demand custom shader material * chore: rename bakeshadows demo * chore: misc route * chore: ci, update action setup * chore: update Tres core * fix: reimplement ContactShadows for v4 core * docs: change link name * fix(ContactShadows): add invalidate to updates --------- Co-authored-by: alvarosabu <[email protected]> * feat(Sparkles): invalidate on update (#446) * feat(Sparkles): invalidate on update * chore: fix linter error * refactor(Sparkles): remove renderMode predicate before invalidate * chore: remove on demand composable (#452) * chore: remove `useOnDemandInvalidation` on Levioso * chore: remove composable `useOnDemandInvalidation` * chore: remove composable from Ocean * chore: remove composable on Precipitation * chore: remove composable from sky * chore: remove from Fit * chore: remove from smoke * chore: remove from orbit-controls * chore: remove composable from Text3D * chore: remove from mouse parallax * chore: remove composable from Reflector * chore: only needed fbo invalidation * chore: remove composable from useSurfaceSampler * chore: remove composable from all controls * chore: add invalidation on loop * chore: remove prop speed check on loop for Levioso * chore: remove invalidateOnDemand on MapControls * chore: remove `invalidateOnDemand` from Keyboard controls * chore: add invalidate on fit method, remove watch props * chore: invalidation refactor leftovers * chore(types): fixes some type issues * fix: update to core v4.2.2 to remove warning on invalidation * chore: fix lint * chore: release v4.0.0-rc.0 * feat(fbo): add autoRender flag as an option to useFBO (#458) This PR adds an `autoRender` flag to `FBOOptions`. This flag allows consumers of `useFBO` who want to take control of when and where to render the render target instead of always rendering it with the default scene and camera. Co-authored-by: Alvaro Saburido <[email protected]> * chore: fix lint * chore: release v4.0.0-rc.1 * docs: added recipe for tweakpane to migration guides * chore(playground): added same scale as default * chore: release v4.0.0-rc.2 * chore: linter fix * chore: update deps to fix docs build * docs(app): Improve docs examples with code group to avoid confusion * fix: change name to the async components --------- Co-authored-by: Peter <[email protected]> Co-authored-by: alvarosabu <[email protected]> Co-authored-by: Chau Tran <[email protected]>
Tresjs · Aug 29, 2024 · 38213d7 · 38213d7
1 parent 535bd86
commit 38213d7
Show file tree

Hide file tree

Showing 5 changed files with 5,069 additions and 6,129 deletions.
diff --git a/docs/guide/loaders/use-fbx.md b/docs/guide/loaders/use-fbx.md
@@ -8,4 +8,43 @@ A composable that allows you to easily load glTF models into your **TresJS** sce
 
 ## Usage
 
-<<< @/.vitepress/theme/components/UseFBXDemo.vue{3,7,14-19}
+::: code-group
+```vue [app.vue]
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+import TheModel from './TheModel.vue'
+</script>
+
+<template>
+  <TresCanvas clear-color="#1F90FF">
+    <TresPerspectiveCamera :position="[11, 11, 11]" />
+    <OrbitControls />
+    <Suspense>
+      <TheModel />
+    </Suspense>
+    <TresDirectionalLight
+      :intensity="2"
+      :position="[3, 3, 3]"
+    />
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>
+```
+```vue{2,6} [TheModel.vue]
+<script setup lang="ts">
+import { useFBX } from '@tresjs/cientos'
+
+const path = 'https://raw.githubusercontent.com/'
+  + 'Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx'
+const { scene } = await useFBX(path)
+</script>
+
+<template>
+  <primitive
+    :object="scene"
+    :scale="0.025"
+  />
+</template>
+```
+:::
diff --git a/docs/guide/loaders/use-gltf.md b/docs/guide/loaders/use-gltf.md
@@ -8,7 +8,43 @@ A composable that allows you to easily load glTF models into your **TresJS** sce
 
 ## Usage
 
-<<< @/.vitepress/theme/components/UseGLTFDemo.vue{3,7,14-16}
+::: code-group
+```vue [app.vue]
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+import TheModel from './TheModel.vue'
+</script>
+
+<template>
+  <TresCanvas clear-color="#F78B3D">
+    <TresPerspectiveCamera :position="[3, 2, 5]" />
+    <OrbitControls />
+    <Suspense>
+      <TheModel />
+    </Suspense>
+    <TresDirectionalLight
+      :intensity="2"
+      :position="[3, 3, 3]"
+    />
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>
+```
+```vue{2,6} [TheModel.vue]
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+
+const path = 'https://raw.githubusercontent.com/'
+  + 'Tresjs/assets/main/models/gltf/blender-cube.glb'
+const { scene } = await useGLTF(path, { draco: true })
+</script>
+
+<template>
+  <primitive :object="scene" />
+</template>
+```
+:::
 
 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.
 

diff --git a/docs/guide/loaders/use-progress.md b/docs/guide/loaders/use-progress.md
@@ -44,3 +44,7 @@ Then you can use the `progress` value to show a loading bar or a spinner:
   </TresCanvas>
 </template>
 ```
+
+:::warning
+This component use top level await. Please check the [Suspense API](https://vuejs.org/guide/built-ins/suspense.html#suspense) for more info
+:::
diff --git a/docs/guide/loaders/use-video-texture.md b/docs/guide/loaders/use-video-texture.md
@@ -10,7 +10,47 @@ This composable is based on the Drei [useVideoTexture](https://github.com/pmndrs
 
 ## Usage
 
-<<< @/.vitepress/theme/components/VideoTextureDemo.vue{4,8-9,20}
+::: code-group
+```vue [app.vue]
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+import TheModel from './TheModel.vue'
+</script>
+
+<template>
+  <TresCanvas clear-color="#333">
+    <TresPerspectiveCamera
+      :position="[0, 5, 9]"
+      :look-at="[0, 1, 0]"
+    />
+    <OrbitControls />
+    <Suspense>
+      <TheModel />
+    </Suspense>
+    <TresGridHelper />
+    <TresAmbientLight />
+  </TresCanvas>
+</template>
+```
+```vue{3,8,13} [TheVideoTexture.vue]
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Sphere, useVideoTexture } from '@tresjs/cientos'
+
+const videoPath = 'https://raw.githubusercontent.com/'
+  + 'Tresjs/assets/main/textures/video-textures/useVideoTexture.mp4'
+const texture = ref()
+texture.value = await useVideoTexture(videoPath, { loop: false })
+</script>
+
+<template>
+   <Sphere :position="[0, 2, 0]">
+      <TresMeshBasicMaterial :map="texture" />
+    </Sphere>
+</template>
+```
+:::
 
 ## Props