diff --git a/CHANGELOG.md b/CHANGELOG.md index 0728bfa42..d65ea2776 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,83 @@ +## [4.0.0-rc.2](https://github.com/Tresjs/tres/compare/4.0.0-rc.1...4.0.0-rc.2) (2024-05-24) + + +### Bug Fixes + +* 686 useloop callback state missing controls ([#687](https://github.com/Tresjs/tres/issues/687)) ([a41f532](https://github.com/Tresjs/tres/commit/a41f532b0c8d717e4bc3ec11fa73bd58df871fa8)) +* manual rendering blank ([#685](https://github.com/Tresjs/tres/issues/685)) ([0720d18](https://github.com/Tresjs/tres/commit/0720d186e92ca9faa9e5f4e51a3269504bed2a09)) + +## [4.0.0-rc.1](https://github.com/Tresjs/tres/compare/4.0.0-rc.0...4.0.0-rc.1) (2024-05-15) + + +### Features + +* 633 use loop ([#673](https://github.com/Tresjs/tres/issues/673)) ([1b2fa70](https://github.com/Tresjs/tres/commit/1b2fa70e9999eb64395b3e7e9f2489ceab035a7a)) + + +### Bug Fixes + +* make on* callbacks settable ([#672](https://github.com/Tresjs/tres/issues/672)) ([ac152df](https://github.com/Tresjs/tres/commit/ac152dfa91c6ba347cbe0566fb4afbe19f50dd2b)) +* **utils:** reorder object disposal to avoid issue with Helper `dispose` methods ([#683](https://github.com/Tresjs/tres/issues/683)) ([e5a2cef](https://github.com/Tresjs/tres/commit/e5a2cef0e450196abaa6d18380a5aadbc9cd057d)) + +## [4.0.0-rc.0](https://github.com/Tresjs/tres/compare/3.9.0...4.0.0-rc.0) (2024-04-25) + + +### ⚠ BREAKING CHANGES + +* **events:** pointerevents manager and state (#529) + +### Features + +* 499 better memory management ([#606](https://github.com/Tresjs/tres/issues/606)) ([e98ca6d](https://github.com/Tresjs/tres/commit/e98ca6dea15973b3a00e4b485199d9906eb772eb)) +* devtools renderer improvements ([#614](https://github.com/Tresjs/tres/issues/614)) ([cdf6b6f](https://github.com/Tresjs/tres/commit/cdf6b6fefbd58dbf1dfbe396f219ac6f7c6fc92d)) +* **events:** pointerevents manager and state ([#529](https://github.com/Tresjs/tres/issues/529)) ([b536ab1](https://github.com/Tresjs/tres/commit/b536ab19d1f4082c2db926e24d8c52f92949964b)) + + +### Bug Fixes + +* do not change pierced props case ([#608](https://github.com/Tresjs/tres/issues/608)) ([906f2e1](https://github.com/Tresjs/tres/commit/906f2e157aab7aa6daef5682c3282cf6e84fa891)) + +## [4.0.0-next.2](https://github.com/Tresjs/tres/compare/3.9.0...4.0.0-rc.0) (2024-03-27) + + +### Bug Fixes + +* refactor nodeOps to return methods at the end of the function ([#602](https://github.com/Tresjs/tres/issues/602)) ([cd0c3bc](https://github.com/Tresjs/tres/commit/cd0c3bcd891f019cf91f30e5fdd547630332a065)) + +## [4.0.0-next.1](https://github.com/Tresjs/tres/compare/3.9.0...4.0.0-rc.0) (2024-03-18) + + +### Features + +* 140 on demand rendering ([#497](https://github.com/Tresjs/tres/issues/497)) ([f688c64](https://github.com/Tresjs/tres/commit/f688c6447be887c4675a57ecabb5182d8b7d02cf)) +* 492 set tone mapping default to acesfilmictonemapping ([#498](https://github.com/Tresjs/tres/issues/498)) ([c4547f9](https://github.com/Tresjs/tres/commit/c4547f92615a43b7b56b34c0e1ee9f4b78a2230b)) +* 503 conditional rendering of primitives ([#514](https://github.com/Tresjs/tres/issues/514)) ([79d8a76](https://github.com/Tresjs/tres/commit/79d8a762da6b6e23771a20314f7902eff4635acf)) +* 516 localstate for custom renderer node instances instead of userdata ([#522](https://github.com/Tresjs/tres/issues/522)) ([08717ef](https://github.com/Tresjs/tres/commit/08717efd0f631c085340b1fea4eb6c154c63608b)) +* remove default camera warning ([#499](https://github.com/Tresjs/tres/issues/499)) ([8bbafde](https://github.com/Tresjs/tres/commit/8bbafde48a33753f0b6560da36a4d128aaa83cc6)) +* update to three `v160` and vue `v3.4` ([#488](https://github.com/Tresjs/tres/issues/488)) ([5fad3b8](https://github.com/Tresjs/tres/commit/5fad3b8095c09cfe758e2553da3df49b29b1ce1a)) + + +### Bug Fixes + +* `nodeOps` is now a function ([#579](https://github.com/Tresjs/tres/issues/579)) ([ddc229e](https://github.com/Tresjs/tres/commit/ddc229e6e492b9e7887add0fcc679a9ae4e47f5c)) +* camera aspect ([52dad5c](https://github.com/Tresjs/tres/commit/52dad5c98271f80f4d454bbcce1bb5844960f943)) +* **types:** added `Object3DEventMap` to `Object3D` generics for point event handling ([#491](https://github.com/Tresjs/tres/issues/491)) ([a63eb90](https://github.com/Tresjs/tres/commit/a63eb9099fcaf97b1c96abe5667ee71ca2fd611f)) + +## [4.0.0-next.0](https://github.com/Tresjs/tres/compare/3.9.0...4.0.0-rc.0) (2023-12-22) + + +### Features + +* 474 vue chrome devtools plugin ([#479](https://github.com/Tresjs/tres/issues/479)) ([224ab06](https://github.com/Tresjs/tres/commit/224ab06a4404e2ae5a0cbd2f43041961862b09fd)) + +## [4.0.0-next.2](https://github.com/Tresjs/tres/compare/4.0.0-next.1...4.0.0-next.2) (2024-03-27) + +## [4.0.0-next.1](https://github.com/Tresjs/tres/compare/3.7.0...4.0.0-next.1) (2024-03-18) +* correct type exporting issues ([#625](https://github.com/Tresjs/tres/issues/625)) ([8e52cf1](https://github.com/Tresjs/tres/commit/8e52cf1935d7b725b87c9a41e44ba61e33bd3e85)) + + ## [3.9.0](https://github.com/Tresjs/tres/compare/3.8.1...3.9.0) (2024-04-24) @@ -17,7 +95,8 @@ ### Bug Fixes -* correct type exporting issues ([#625](https://github.com/Tresjs/tres/issues/625)) ([8e52cf1](https://github.com/Tresjs/tres/commit/8e52cf1935d7b725b87c9a41e44ba61e33bd3e85)) +* refactor nodeOps to return methods at the end of the function ([#602](https://github.com/Tresjs/tres/issues/602)) ([cd0c3bc](https://github.com/Tresjs/tres/commit/cd0c3bcd891f019cf91f30e5fdd547630332a065)) + ## [3.8.0](https://github.com/Tresjs/tres/compare/3.7.0...3.8.0) (2024-04-03) @@ -38,6 +117,31 @@ ### Features +* 140 on demand rendering ([#497](https://github.com/Tresjs/tres/issues/497)) ([f688c64](https://github.com/Tresjs/tres/commit/f688c6447be887c4675a57ecabb5182d8b7d02cf)) +* 492 set tone mapping default to acesfilmictonemapping ([#498](https://github.com/Tresjs/tres/issues/498)) ([c4547f9](https://github.com/Tresjs/tres/commit/c4547f92615a43b7b56b34c0e1ee9f4b78a2230b)) +* 503 conditional rendering of primitives ([#514](https://github.com/Tresjs/tres/issues/514)) ([79d8a76](https://github.com/Tresjs/tres/commit/79d8a762da6b6e23771a20314f7902eff4635acf)) +* 516 localstate for custom renderer node instances instead of userdata ([#522](https://github.com/Tresjs/tres/issues/522)) ([08717ef](https://github.com/Tresjs/tres/commit/08717efd0f631c085340b1fea4eb6c154c63608b)) +* remove default camera warning ([#499](https://github.com/Tresjs/tres/issues/499)) ([8bbafde](https://github.com/Tresjs/tres/commit/8bbafde48a33753f0b6560da36a4d128aaa83cc6)) +* update to three `v160` and vue `v3.4` ([#488](https://github.com/Tresjs/tres/issues/488)) ([5fad3b8](https://github.com/Tresjs/tres/commit/5fad3b8095c09cfe758e2553da3df49b29b1ce1a)) + + +### Bug Fixes + +* `nodeOps` is now a function ([#579](https://github.com/Tresjs/tres/issues/579)) ([ddc229e](https://github.com/Tresjs/tres/commit/ddc229e6e492b9e7887add0fcc679a9ae4e47f5c)) +* camera aspect ([52dad5c](https://github.com/Tresjs/tres/commit/52dad5c98271f80f4d454bbcce1bb5844960f943)) +* **types:** added `Object3DEventMap` to `Object3D` generics for point event handling ([#491](https://github.com/Tresjs/tres/issues/491)) ([a63eb90](https://github.com/Tresjs/tres/commit/a63eb9099fcaf97b1c96abe5667ee71ca2fd611f)) + +## [4.0.0-next.0](https://github.com/Tresjs/tres/compare/3.7.0...4.0.0-next.1) (2023-12-22) + + +### Features + +* 474 vue chrome devtools plugin ([#479](https://github.com/Tresjs/tres/issues/479)) ([224ab06](https://github.com/Tresjs/tres/commit/224ab06a4404e2ae5a0cbd2f43041961862b09fd)) + +## [3.7.0](https://github.com/Tresjs/tres/compare/3.6.1...3.7.0) (2024-01-29) + +### Features + * 474 vue chrome devtools plugin ([#526](https://github.com/Tresjs/tres/issues/526)) ([0185bfa](https://github.com/Tresjs/tres/commit/0185bfa6f04faff5eabbc526616713ef7747ebeb)) * 524 feat add directives to core ([#525](https://github.com/Tresjs/tres/issues/525)) ([5268e9f](https://github.com/Tresjs/tres/commit/5268e9f13bf65c61d5ddfe7153b71b335449b81d)) diff --git a/docs/.vitepress/config/en.ts b/docs/.vitepress/config/en.ts index d1122645c..6d0e285be 100644 --- a/docs/.vitepress/config/en.ts +++ b/docs/.vitepress/config/en.ts @@ -43,7 +43,8 @@ export const enConfig: LocaleSpecificConfig = { items: [ { text: 'Extending', link: '/advanced/extending' }, - { text: 'Primitive', link: '/advanced/primitive' }, + { text: 'Primitives', link: '/advanced/primitive' }, + { text: 'Scaling Performance 🚀', link: '/advanced/performance' }, { text: 'Caveats', link: '/advanced/caveats', @@ -77,9 +78,7 @@ export const enConfig: LocaleSpecificConfig = { items: [ { text: 'v-log', link: '/directives/v-log' }, { text: 'v-light-helper', link: '/directives/v-light-helper' }, - { text: 'v-always-look-at', link: '/directives/v-always-look-at' }, { text: 'v-distance-to', link: '/directives/v-distance-to' }, - { text: 'v-rotate', link: '/directives/v-rotate' }, ], }, { diff --git a/docs/.vitepress/theme/components/BlenderCube.vue b/docs/.vitepress/theme/components/BlenderCube.vue new file mode 100644 index 000000000..349fee298 --- /dev/null +++ b/docs/.vitepress/theme/components/BlenderCube.vue @@ -0,0 +1,17 @@ + + + diff --git a/docs/.vitepress/theme/components/GraphPane.vue b/docs/.vitepress/theme/components/GraphPane.vue new file mode 100644 index 000000000..79110e0f2 --- /dev/null +++ b/docs/.vitepress/theme/components/GraphPane.vue @@ -0,0 +1,101 @@ + + + diff --git a/docs/.vitepress/theme/components/OnDemandRendering.vue b/docs/.vitepress/theme/components/OnDemandRendering.vue new file mode 100644 index 000000000..c739c11e6 --- /dev/null +++ b/docs/.vitepress/theme/components/OnDemandRendering.vue @@ -0,0 +1,37 @@ + + + diff --git a/docs/.vitepress/theme/components/RenderingLogger.vue b/docs/.vitepress/theme/components/RenderingLogger.vue new file mode 100644 index 000000000..0fca78844 --- /dev/null +++ b/docs/.vitepress/theme/components/RenderingLogger.vue @@ -0,0 +1,23 @@ + + + diff --git a/docs/.vitepress/theme/composables/state.ts b/docs/.vitepress/theme/composables/state.ts new file mode 100644 index 000000000..227164b7c --- /dev/null +++ b/docs/.vitepress/theme/composables/state.ts @@ -0,0 +1,11 @@ +import { reactive, toRefs } from 'vue' + +const state = reactive({ + renderingTimes: 0, +}) +export function useState() { + return { + ...toRefs(state), + + } +} diff --git a/docs/advanced/performance.md b/docs/advanced/performance.md new file mode 100644 index 000000000..1925eacd1 --- /dev/null +++ b/docs/advanced/performance.md @@ -0,0 +1,157 @@ +# Scaling performance 🚀 + +> Quick guide with tips to improve performance of your Tres.js application. + +We are running WebGL on the browser, which can be quite expensive and it will depend on how powerful the user's device is. To make 3D accessible to everyone, we need to make sure our applications are optimized to run also on low-end devices. This guide will provide some tips to improve the performance of your Tres.js application. + +## On-demand rendering + +By default, Tres.js will render your scene on every frame. This is great for most applications, but if you are building a game or a complex application, you might want to control when the scene is rendered. + +Otherwise it might drain your device battery 🔋 🔜 đŸĒĢ and make your computer sound like an airplane đŸ›Ģ. + +Ideally, you only want to **render the scene when necessary**, for example when the user interacts with the scene and the camera moves, or when objects in the scene are animated. + +You can do that by setting the `renderMode` prop to `on-demand` or `manual`: + +### Mode `on-demand` + + +
+ +
+ + +```vue + + + +``` + +#### Automatic Invalidation + +When using `render-mode="on-demand"`, Tres.js will automatically invalidate the current frame by observing component props and lifecycle hooks like `onMounted` and `onUnmounted`. It will also invalidate the frame when resizing the window or changing any prop from the `` component like `clearColor` or `antialias`. + +The code below updates TresMesh's position-x prop every second, triggering a new render. + +```vue + + + +``` + +#### Manual Invalidation + +Since it is not really possible to observe all the possible changes in your application, you can also manually invalidate the frame by calling the `invalidate()` method from the [`useTresContext` composable](../api/composables.md#usetrescontext): + +::: code-group + +```vue [App.vue] + + + +``` + +```vue [Scene.vue] + + + +``` + +::: + +### Mode `always` + +In this rendering mode, Tres will continously render the scene on every frame. This is the default mode and the easiest to use, but it's also the most resource expensive one. + +### Mode `manual` + +If you want to have full control of when the scene is rendered, you can set the `render-mode` prop to `manual`: + +```vue + + + +``` + +In this mode, Tres will not render the scene automatically. You will need to call the `advance()` method from the [`useTresContext` composable](../api/composables.md#usetrescontext) to render the scene: + +```vue + +``` + +## Dispose resources `dispose()` + +When you are done with a resource, like a texture, geometry, or material, you should dispose of it to free up memory. This is especially important when you are creating and destroying resources frequently, like in a game. + +TresJS will automatically dispose of resources recursively when the component is unmounted, but you can also perform this manually by calling the `dispose()` directly from the package: + +::: warning +To avoid errors and unwanted sideeffects, resources created programatically with the use of `primitives` need to be manually disposed. +::: + +```html {2,12} + + + +``` diff --git a/docs/api/composables.md b/docs/api/composables.md index e4beb5fe4..acfa67314 100644 --- a/docs/api/composables.md +++ b/docs/api/composables.md @@ -4,73 +4,213 @@ Vue 3 [Composition API](https://vuejs.org/guide/extras/composition-api-faq.html# **TresJS** takes huge advantage of this API to create a set of composable functions that can be used to create animations, interact with the scene and more. It also allows you to create more complex scenes that might not be possible using just the Vue Components (Textures, Loaders, etc.). -The core of **TresJS** uses these composables internally, so you would be using the same API that the core uses. For instance, components that need to updated on the internal render loop use the `useRenderLoop` composable to register a callback that will be called every time the renderer updates the scene. +The core of **TresJS** uses these composables internally, so you would be using the same API that the core uses. -## useRenderLoop - -The `useRenderLoop` composable is the core of **TresJS** animations. It allows you to register a callback that will be called on native refresh rate. This is the most important composable in **TresJS**. +## useTresContext +This composable aims to provide access to the state model which contains multiple useful properties. ```ts -const { onLoop, resume } = useRenderLoop() +const { camera, renderer, camera, cameras } = useTresContext() +``` -onLoop(({ delta, elapsed, clock }) => { - // I will run at every frame ~60FPS (depending of your monitor) -}) +::: warning +`useTresContext` can be only be used inside of a `TresCanvas` since this component acts as the provider for the context data. +::: + +::: code-group + +```vue [App.vue] + + + ``` +```vue [SubComponent.vue] + +``` + +::: + +### Properties of context +| Property | Description | +| --- | --- | +| **camera** | The currently active camera | +| **cameras** | The cameras that exist in the scene | +| **controls** | The controls of your scene | +| **deregisterCamera** | A method to deregister a camera. This is only required if you manually create a camera. Cameras in the template are deregistered automatically. | +| **extend** | Extends the component catalogue. See [extending](/advanced/extending) | +| **raycaster** | the global raycaster used for pointer events | +| **registerCamera** | a method to register a camera. This is only required if you manually create a camera. Cameras in the template are registered automatically. | +| **renderer** | the [WebGLRenderer](https://threejs.org/docs/#api/en/renderers/WebGLRenderer) of your scene | +| **scene** | the [scene](https://threejs.org/docs/?q=sce#api/en/scenes/Scene). | +| **setCameraActive** | a method to set a camera active | +| **sizes** | contains width, height and aspect ratio of your canvas | +| **invalidate** | a method to invalidate the render loop. This is only required if you set the `render-mode` prop to `on-demand`. | +| **advance** | a method to advance the render loop. This is only required if you set the `render-mode` prop to `manual`. | +| **loop** | the renderer loop | + +### useLoop + +This composable allows you to execute a callback on every rendered frame, similar to `useRenderLoop` but unique to each `TresCanvas` instance and with access to the [context](#usetrescontext). + ::: warning -Be mindful of the performance implications of using this composable. It will run at every frame, so if you have a lot of logic in your callback, it might impact the performance of your app. Specially if you are updating reactive states or references. +`useLoop` can be only be used inside of a `TresCanvas` since this component acts as the provider for the context data. ::: -The `onLoop` callback receives an object with the following properties based on the [THREE clock](https://threejs.org/docs/?q=clock#api/en/core/Clock): +#### Register update callbacks -- `delta`: The delta time between the current and the last frame. This is the time in seconds since the last frame. -- `elapsed`: The elapsed time since the start of the render loop. +The user can register update callbacks (such as animations, fbo, etc) using the `onBeforeRender` -This composable is based on `useRafFn` from [vueuse](https://vueuse.org/core/useRafFn/). Thanks to [@wheatjs](https://github.com/wheatjs) for the amazing contribution. +::: code-group -### Before and after render +```vue [App.vue] + -You can also register a callback that will be called before and after the renderer updates the scene. This is useful if you add a profiler to measure the FPS for example. + +``` + +```vue [AnimatedBox.vue] + + + +``` + +::: + +Your callback function will be triggered just before a frame is rendered and it will be deregistered automatically when the component is destroyed. + +#### Take over the render loop + +You can take over the render call by using the `render` method. ```ts -const { onBeforeLoop, onAfterLoop } = useRenderLoop() +const { render } = useLoop() -onBeforeLoop(({ delta, elapsed }) => { - // I will run before the renderer updates the scene - fps.begin() +render(({ renderer, scene, camera }) => { + renderer.render(scene, camera) }) +``` -onAfterLoop(({ delta, elapsed }) => { - // I will run after the renderer updates the scene - fps.end() +::: warning +Consider that if you take over the render loop, you will need to manually render the scene and take care of features like the conditional rendering yourself. +::: + +#### Register after render callbacks (ex physics calculations) + +You can also register callbacks which are invoked after rendring by using the `onAfterRender` method. + +```ts +const { onAfterRender } = useLoop() + +onAfterRender(({ renderer }) => { + // Calculations }) ``` -### Pause and resume +#### Render priority -You can pause and resume the render loop using the exposed `pause` and `resume` methods. +Both useBeforeRender and useAfteRender provide an optional priority number. This number could be anything from `Number.NEGATIVE_INFINITY` to `Number.POSITIVE_INFINITY` being the 0 by default. The lower the number, the earlier the callback will be executed. ```ts -const { pause, resume } = useRenderLoop() +onBeforeRender(() => { + console.count('triggered first') +}, -1) -// Pause the render loop -pause() +onBeforeRender(() => { + console.count('triggered second') +}, 1) +``` -// Resume the render loop -resume() +#### Params of the callback + +All callbacks receive an object with the following properties: + +- `delta`: The delta time between the current and the last frame. This is the time in miliseconds since the last frame. +- `elapsed`: The elapsed time since the start of the render loop. +- `clock`: The [THREE clock](https://threejs.org/docs/?q=clock#api/en/core/Clock) instance. +- `renderer`: The [WebGLRenderer](https://threejs.org/docs/#api/en/renderers/WebGLRenderer) of your scene. +- `scene`: The [scene](https://threejs.org/docs/?q=sce#api/en/scenes/Scene) of your scene. +- `camera`: The currently active camera. +- `raycaster`: The global raycaster used for pointer events. +- `controls`: The controls of your scene. +- `invalidate`: A method to invalidate the render loop. This is only required if you set the `render-mode` prop to `on-demand`. +- `advance`: A method to advance the render loop. This is only required if you set the `render-mode` prop to `manual`. + +#### Pausing and resuming the update loop + +You can use `pause` and `resume` methods: + +```ts +const { onBeforeRender, pause, resume } = useLoop() + +onBeforeRender(({ elapsed }) => { + sphereRef.value.position.y += Math.sin(elapsed) * 0.01 +}) + +pause() // This will pause the loop +resume() // This will resume the loop ``` -Also you can get the active state of the render loop using the `isActive` property. +#### Pausing and resuming the render + +You can use `pauseRender` and `resumeRender` methods: ```ts -const { resume, isActive } = useRenderLoop() +const { pauseRender, resumeRender } = useLoop() -console.log(isActive) // false +onBeforeRender(({ elapse }) => { + sphereRef.value.position.y += Math.sin(elapsed) * 0.01 +}) -resume() +pauseRender() // This will pause the renderer +resumeRender() // This will resume the renderer +``` -console.log(isActive) // true +#### Unregistering callbacks + +You can unregister a callback by calling the method `off` returned by the `onBeforeRender` or `onAfterRender` method. + +```ts +const { onBeforeRender } = useLoop() + +const { off } = onBeforeRender(({ elapsed }) => { + sphereRef.value.position.y += Math.sin(elapsed) * 0.01 +}) ``` ## useLoader @@ -197,44 +337,73 @@ watch(character, ({ model }) => { }) ``` -## useTresContext -This composable aims to provide access to the state model which contains multiple useful properties. +## useRenderLoop + +The `useRenderLoop` composable can be use for animations that don't require access to the [context](#usetrescontext). It allows you to register a callback that will be called on native refresh rate. + +::: warning + Since v4.0.0, `useRenderLoop` is no longer used internally to control the rendering, if you want to use conditional rendering, multiple canvases or need access to state please `useLoop` instead. [Read why](#useloop) +::: ```ts -const { camera, renderer, camera, cameras } = useTresContext() +const { onLoop, resume } = useRenderLoop() + +onLoop(({ delta, elapsed, clock }) => { + // I will run at every frame ~60FPS (depending of your monitor) +}) ``` ::: warning -`useTresContext` can be only be used inside of a `TresCanvas` since `TresCanvas` acts as the provider for the context data. Use [the context exposed by TresCanvas](tres-canvas#exposed-public-properties) if you find yourself needing it in parent components of TresCanvas. +Be mindful of the performance implications of using this composable. It will run at every frame, so if you have a lot of logic in your callback, it might impact the performance of your app. Specially if you are updating reactive states or references. ::: -```vue - - - +The `onLoop` callback receives an object with the following properties based on the [THREE clock](https://threejs.org/docs/?q=clock#api/en/core/Clock): + +- `delta`: The delta time between the current and the last frame. This is the time in milliseconds since the last frame. +- `elapsed`: The elapsed time since the start of the render loop. + +This composable is based on `useRafFn` from [vueuse](https://vueuse.org/core/useRafFn/). Thanks to [@wheatjs](https://github.com/wheatjs) for the amazing contribution. + +### Before and after render + +You can also register a callback that will be called before and after the renderer updates the scene. This is useful if you add a profiler to measure the FPS for example. + +```ts +const { onBeforeLoop, onAfterLoop } = useRenderLoop() + +onBeforeLoop(({ delta, elapsed }) => { + // I will run before the renderer updates the scene + fps.begin() +}) + +onAfterLoop(({ delta, elapsed }) => { + // I will run after the renderer updates the scene + fps.end() +}) ``` -```vue -// MyModel.vue +### Pause and resume - +```ts +const { pause, resume } = useRenderLoop() + +// Pause the render loop +pause() + +// Resume the render loop +resume() ``` -### Properties of context -| Property | Description | -| --- | --- | -| **camera** | The currently active camera | -| **cameras** | The cameras that exist in the scene | -| **controls** | The controls of your scene | -| **deregisterCamera** | A method to deregister a camera. This is only required if you manually create a camera. Cameras in the template are deregistered automatically. | -| **extend** | Extends the component catalogue. See [extending](/advanced/extending) | -| **raycaster** | The global raycaster used for pointer events | -| **registerCamera** | A method to register a camera. This is only required if you manually create a camera. Cameras in the template are registered automatically. | -| **renderer** | The [WebGLRenderer](https://threejs.org/docs/#api/en/renderers/WebGLRenderer) of your scene | -| **scene** | The [scene](https://threejs.org/docs/?q=sce#api/en/scenes/Scene). | -| **setCameraActive** | A method to set a camera active | -| **sizes** | Contains width, height and aspect ratio of your canvas | +Also you can get the active state of the render loop using the `isActive` property. + +```ts +const { resume, isActive } = useRenderLoop() + +console.log(isActive.value) // false + +resume() + +console.log(isActive.value) // true +``` diff --git a/docs/api/events.md b/docs/api/events.md index c83019df8..b2e874981 100644 --- a/docs/api/events.md +++ b/docs/api/events.md @@ -6,22 +6,62 @@ ## Pointer Events +The following pointer events are available on `v3` and previous: + +- `click` +- `pointer-move` +- `pointer-enter` +- `pointer-leave` + +From `v4.x` on, the following pointer events are been added to the list: + +- `context-menu` (right click) +- `double-click` +- `pointer-down` +- `pointer-up` +- `wheel` +- `pointer-missed` + ```html ``` -| Event | fires when ... | Event Handler Parameter Type(s) | -| ------------- | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| click | ... the events pointerdown and pointerup fired on the same object one after the other | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) | -| pointer-move | ... the pointer is moving above the object | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) | -| pointer-enter | ... the pointer is entering the object | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) | -| pointer-leave | ... the pointer is leaves the object | [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) | +|
Event
| fires when ... | Event Handler Parameter Type(s) | +| ---------------- | ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| click | the events pointerdown and pointerup fired on the same object one after the other | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) | +| contextMenu | the user triggers a context menu, often by right-clicking | [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) | +| double-click | the user clicks the mouse button twice in quick succession on the same object | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) | +| wheel | the mouse wheel or similar device is rotated | [WheelEvent](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent) | +| pointer-down | the pointer is pressed down over the object | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) | +| pointer-up | the pointer is released over the object | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) | +| pointer-leave | the pointer is leaves the object | [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) | +| pointer-move | the pointer is moving above the object | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) | +| pointer-missed | the pointer interaction is attempted but misses the object | [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) | + +## Event Propagation (Bubbling đŸĢ§) + +Propagation of events on 3D scenes works differently than in the DOM because objects can **occlude each other in 3D**. The `intersections` array contains all the objects that the raycaster intersects with, sorted by distance from the camera. The first object in the array is the closest one to the camera. -The returned [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16) includes the [Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) that triggered the event. You can access it via `intersection.object`. +When an event is triggered, the event is propagated to the closest object in the `intersections` array. If the event is not handled by the object, it will be propagated to the next object in the array. -By default, objects positioned in front of others with event handlers do not prevent those events from being triggered. This behavior can be achieved by using the prop `blocks-pointer-events`. +`event.stopPropagation()` can be used to stop the event from propagating to the next object in the array, stoping the event from bubbling up and reaching to farther objects (the oens behind the first one). + +```html + +``` diff --git a/docs/api/tres-canvas.md b/docs/api/tres-canvas.md index 6aa8fa612..71677b7e4 100644 --- a/docs/api/tres-canvas.md +++ b/docs/api/tres-canvas.md @@ -77,12 +77,13 @@ renderer.shadowMap.type = PCFSoftShadowMap | **clearColor** | The color the renderer will use to clear the canvas. | `#000000` | | **context** | This can be used to attach the renderer to an existing [RenderingContext](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext) | | | **depth** | Whether the drawing buffer has a [depth buffer](https://en.wikipedia.org/wiki/Z-buffering) of at least 16 bits. | `true` | +| **renderMode** | Render mode, can be `always`, `on-demand` or `manual`. See [Performance](../advanced/performance) | `always` | | **disableRender** | Disable render on requestAnimationFrame, useful for PostProcessing | `false` | | **failIfMajorPerformanceCaveat** | Whether the renderer creation will fail upon low performance is detected. See [WebGL spec](https://registry.khronos.org/webgl/specs/latest/1.0/#5.2) for details. | `false` | | **logarithmicDepthBuffer** | Whether to use a logarithmic depth buffer. It may be necessary to use this if dealing with huge differences in scale in a single scene. Note that this setting uses gl_FragDepth if available which disables the [Early Fragment Test](https://www.khronos.org/opengl/wiki/Early_Fragment_Test) optimization and can cause a decrease in performance. | `false` | | **outputColorSpace** | Defines the output encoding | `LinearEncoding` | -| **powerPreference** | Provides a hint to the user agent indicating what configuration of GPU is suitable for this WebGL context. Can be "high-performance", "low-power" or "default". | `default` | -| **precision** | Shader precision. Can be "highp", "mediump" or "lowp". | "highp" if supported by the device | +| **powerPreference** | Provides a hint to the user agent indicating what configuration of GPU is suitable for this WebGL context. Can be `high-performance`, `low-power` or `default`. | `default` | +| **precision** | Shader precision. Can be `highp`, `mediump` or `lowp`. | "highp" if supported by the device | | **premultipliedAlpha** | Whether the renderer will assume that colors have [premultiplied alpha](https://en.wikipedia.org/wiki/Glossary_of_computer_graphics#premultiplied_alpha). | `true` | | **preserveDrawingBuffer** | Whether to preserve the buffers until manually cleared or overwritten.. | `false` | | **shadows** | Enable shadows in the renderer | `false` | diff --git a/docs/components.d.ts b/docs/components.d.ts index 4368e2a4d..a67752554 100644 --- a/docs/components.d.ts +++ b/docs/components.d.ts @@ -1,21 +1,25 @@ /* eslint-disable */ -/* prettier-ignore */ // @ts-nocheck // Generated by unplugin-vue-components // Read more: https://github.com/vuejs/core/pull/3399 export {} +/* prettier-ignore */ declare module 'vue' { export interface GlobalComponents { + BlenderCube: typeof import('./.vitepress/theme/components/BlenderCube.vue')['default'] Cookbook: typeof import('./.vitepress/theme/components/Cookbook.vue')['default'] DonutExample: typeof import('./.vitepress/theme/components/DonutExample.vue')['default'] EmbedExperiment: typeof import('./.vitepress/theme/components/EmbedExperiment.vue')['default'] ExtendExample: typeof import('./.vitepress/theme/components/ExtendExample.vue')['default'] FirstScene: typeof import('./.vitepress/theme/components/FirstScene.vue')['default'] FirstSceneLightToon: typeof import('./.vitepress/theme/components/FirstSceneLightToon.vue')['default'] + GraphPane: typeof import('./.vitepress/theme/components/GraphPane.vue')['default'] HomeSponsors: typeof import('./.vitepress/theme/components/HomeSponsors.vue')['default'] LocalOrbitControls: typeof import('./.vitepress/theme/components/LocalOrbitControls.vue')['default'] LoveVueThreeJS: typeof import('./.vitepress/theme/components/LoveVueThreeJS.vue')['default'] + OnDemandRendering: typeof import('./.vitepress/theme/components/OnDemandRendering.vue')['default'] + RenderingLogger: typeof import('./.vitepress/theme/components/RenderingLogger.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] SandboxDemo: typeof import('./.vitepress/theme/components/SandboxDemo.vue')['default'] diff --git a/docs/cookbook/basic-animations.md b/docs/cookbook/basic-animations.md index 79e1f31c9..2b2d81c9a 100644 --- a/docs/cookbook/basic-animations.md +++ b/docs/cookbook/basic-animations.md @@ -12,54 +12,68 @@ This guide will help you get started with basic animations in TresJS. We will build a simple scene with a cube. We will then animate the cube to rotate around the Y and Z axis. - + -## useRenderLoop + -The `useRenderLoop` composable is the core of TresJS animations. It allows you to register a callback that will be called every time the renderer updates the scene with the browser's refresh rate. +## useLoop -To see a detailed explanation of how it works, please refer to the [useRenderLoop](/api/composables#userenderloop) documentation. +The `useLoop` composable is the core of TresJS updates, which includes: **animations**. It allows you to register a callback that will be called every time the renderer updates the scene with the browser's refresh rate. + +To see a detailed explanation of how it works, please refer to the [useRenderLoop](/api/composables#useloop) documentation. ```ts -const { onLoop } = useRenderLoop() +const { onBeforeRender } = useLoop() -onLoop(({ delta, elapsed }) => { +onBeforeRender(({ delta, elapsed }) => { // I will run at every frame ~ 60FPS (depending of your monitor) }) ``` ## Getting the reference to the cube -To animate the cube, we need to get a reference to it. We can do it by passing a [Template Ref](https://vuejs.org/guide/essentials/template-refs.html) using `ref` prop to the `TresMesh` component. This will return the THREE instance. +To animate the cube, we need to get a reference to it. We can do it by passing a [Template Ref](https://vuejs.org/guide/essentials/template-refs.html) using `ref` prop to the `TresMesh` component. This will return the plain `THREE instance`. -To improve the performance, we will use a [Shallow Ref](https://v3.vuejs.org/guide/reactivity-fundamentals.html#shallow-reactivity) to store the reference instead of a regular Ref. See why [here](../advanced/caveats.md#reactivity) +::: code-group -```vue - + + +``` -const boxRef: ShallowRef = shallowRef(null) +```vue [App.vue] + ``` +::: ## Animating the cube -Now that we have a reference to the cube, we can animate it. We will use the `onLoop` callback to update the cube's rotation. +Now that we have a reference to the cube, we can animate it. We will use the `onBeforeRender` method to update the cube's rotation. ```ts -onLoop(({ delta, elapsed }) => { +const { onBeforeRender } = useLoop() + +onBeforeRender(({ delta, elapsed }) => { if (boxRef.value) { boxRef.value.rotation.y += delta boxRef.value.rotation.z = elapsed * 0.2 @@ -73,18 +87,14 @@ You can also use the `delta` from the internal [THREE clock](https://threejs.org You might be wondering why we are not using reactivity to animate the cube. The answer is simple, performance. -```vue +```ts // This is a bad idea ❌ - ``` We can be tempted to use reactivity to animate the cube. But it would be a bad idea. diff --git a/docs/debug/devtools.md b/docs/debug/devtools.md index cc9b854e1..53fcecd41 100644 --- a/docs/debug/devtools.md +++ b/docs/debug/devtools.md @@ -24,3 +24,9 @@ From we are introducing the TresJS Devtools, a customize ![](/devtools-scene-inspector.png) Enjoy the new Devtools and let us know what you think! 🎉 + +## Renderer info + +From `v4` it's possible to see the renderer information in the Devtools when inspecting the root object (Scene). This is useful to know what renderer is being used and its properties including the programs (shaders) and the capabilities of the renderer. + +![](/devtools-v4.png) diff --git a/docs/directives/v-always-look-at.md b/docs/directives/v-always-look-at.md index fb0cb272b..b0c97e1f2 100644 --- a/docs/directives/v-always-look-at.md +++ b/docs/directives/v-always-look-at.md @@ -1,4 +1,8 @@ -# v-always-look-at 👀 +# v-always-look-at 👀 + +::: warning +This directive has been removed on the `v4` due incompatibility with the new renderer loop. +::: With the new directive v-always-look-at provided by **TresJS**, you can add easily command an [Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) to always look at a specific position, this could be passed as a Vector3 or an Array. diff --git a/docs/directives/v-light-helper.md b/docs/directives/v-light-helper.md index e3193764e..b3d266edb 100644 --- a/docs/directives/v-light-helper.md +++ b/docs/directives/v-light-helper.md @@ -7,6 +7,7 @@ The following lights are supported: - PointLight - SpotLight - HemisphereLight +- RectAreaLightHelper ## Usage diff --git a/docs/directives/v-rotate.md b/docs/directives/v-rotate.md index 9f71795eb..a313ff71f 100644 --- a/docs/directives/v-rotate.md +++ b/docs/directives/v-rotate.md @@ -1,4 +1,8 @@ -# v-rotate +# v-rotate + +::: warning +This directive has been removed on the `v4` due incompatibility with the new renderer loop. +::: ## Problem diff --git a/docs/guide/index.md b/docs/guide/index.md index 13a2b2049..a42f418ec 100644 --- a/docs/guide/index.md +++ b/docs/guide/index.md @@ -87,25 +87,8 @@ We also have a showcase lab of examples made with TresJS. Check it out [here](ht The React ecosystem has an impressive **custom render** solution called [React-three-fiber](https://docs.pmnd.rs/react-three-fiber) that allows you build your scenes declaratively with re-usable, self-contained components that react to state. -In my search for something similar in the VueJS ecosystem, I found this amazing library called [Lunchbox](https://github.com/breakfast-studio/lunchboxjs), which works with the same concept as R3F, it provides a [custom Vue3 Renderer](https://vuejs.org/api/custom-renderer.html). I'm also contributing to improve this library so it gets as mature and feature-rich as R3F. +In my search for something similar in the VueJS ecosystem, I found this amazing library called [Lunchbox](https://github.com/breakfast-studio/lunchboxjs), which works with the same concept as R3F, it provides a [custom Vue3 Renderer](https://vuejs.org/api/custom-renderer.html). -The only issue with this is, mixing compilers renderers in Vue 3 is something the Vue community is still working on - see [here](https://github.com/vuejs/vue-loader/pull/1645) for more information. +But none of them was actively maintained or had the same level of abstraction as R3F. -```ts -// Example Vite setup -import { createApp } from 'vue' -import { createApp as createLunchboxApp } from 'lunchboxjs' -import App from './App.vue' -import LunchboxApp from './LunchboxApp.vue' - -// html app -const app = createApp(App) -app.mount('#app') - -// lunchbox app -const lunchboxApp = createLunchboxApp(LunchboxApp) -// assuming there's an element with ID `lunchbox` in your HTML app -lunchboxApp.mount('#lunchbox') -``` - -So I was inspired by both libraries to create a Vue custom renderer for ThreeJS. That's **TresJS v2**. +So I was inspired by both libraries to create a Vue custom renderer for ThreeJS. That's **TresJS**. diff --git a/docs/package.json b/docs/package.json index 33675a58c..33bde1079 100644 --- a/docs/package.json +++ b/docs/package.json @@ -9,12 +9,12 @@ "preview": "vitepress preview" }, "dependencies": { - "@tresjs/core": "workspace:*" + "@tresjs/core": "workspace:^" }, "devDependencies": { "@iconify-json/logos": "^1.1.42", "@iconify-json/mdi": "^1.1.66", - "unocss": "^0.59.4", + "unocss": "^0.60.3", "vite-svg-loader": "^5.1.0" } } diff --git a/docs/public/devtools-v4.png b/docs/public/devtools-v4.png new file mode 100644 index 000000000..36b79be87 Binary files /dev/null and b/docs/public/devtools-v4.png differ diff --git a/docs/public/logo.svg b/docs/public/logo.svg index 809472a68..035ffd955 100644 --- a/docs/public/logo.svg +++ b/docs/public/logo.svg @@ -1,5 +1,27 @@ - - - - - + + + + + + + + + \ No newline at end of file diff --git a/package.json b/package.json index 7fb905aa1..01c1ede05 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@tresjs/core", "type": "module", - "version": "3.9.0", + "version": "4.0.0-rc.2", "packageManager": "pnpm@8.15.6", "description": "Declarative ThreeJS using Vue Components", "author": "Alvaro Saburido (https://github.com/alvarosabu/)", @@ -50,7 +50,7 @@ "playground": "cd playground && npm run dev", "test": "vitest", "test:ci": "vitest run", - "test:ui": "vitest --ui", + "test:ui": "vitest --ui --coverage.enabled=true", "release": "release-it", "coverage": "vitest run --coverage", "lint": "eslint .", @@ -64,52 +64,52 @@ }, "peerDependencies": { "three": ">=0.133", - "vue": ">=3.3" + "vue": ">=3.4" }, "dependencies": { - "@alvarosabu/utils": "^3.1.1", + "@alvarosabu/utils": "^3.2.0", "@vue/devtools-api": "^6.6.1", - "@vueuse/core": "^10.7.0" + "@vueuse/core": "^10.10.0" }, "devDependencies": { "@release-it/conventional-changelog": "^8.0.1", - "@stackblitz/sdk": "^1.9.0", - "@tresjs/cientos": "3.8.0", - "@tresjs/eslint-config": "^1.0.0", - "@tresjs/eslint-config-vue": "^0.2.1", - "@types/three": "^0.163.0", - "@typescript-eslint/eslint-plugin": "^7.7.1", - "@typescript-eslint/parser": "^7.7.1", + "@stackblitz/sdk": "^1.10.0", + "@tresjs/cientos": "3.9.0", + "@tresjs/eslint-config": "^1.1.0", + "@types/three": "^0.164.1", + "@typescript-eslint/eslint-plugin": "^7.11.0", + "@typescript-eslint/parser": "^7.11.0", "@vitejs/plugin-vue": "^5.0.4", "@vitest/coverage-c8": "^0.33.0", - "@vitest/ui": "^1.5.0", - "@vue/test-utils": "^2.4.3", - "eslint": "^9.1.1", - "eslint-plugin-vue": "^9.25.0", - "esno": "^4.0.0", - "gsap": "^3.12.3", + "@vitest/coverage-v8": "^1.6.0", + "@vitest/ui": "^1.6.0", + "@vue/test-utils": "^2.4.6", + "eslint": "^9.3.0", + "eslint-plugin-vue": "^9.26.0", + "esno": "^4.7.0", + "gsap": "^3.12.5", "husky": "^9.0.11", - "jsdom": "^24.0.0", + "jsdom": "^24.1.0", "kolorist": "^1.8.0", "ohmyfetch": "^0.4.21", - "pathe": "^1.1.1", - "release-it": "^17.2.0", + "pathe": "^1.1.2", + "release-it": "^17.3.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-copy": "^3.5.0", - "rollup-plugin-visualizer": "^5.11.0", - "three": "^0.163.0", - "unocss": "^0.59.4", + "rollup-plugin-visualizer": "^5.12.0", + "three": "^0.164.1", + "unocss": "^0.60.3", "unplugin": "^1.10.1", - "unplugin-vue-components": "^0.26.0", - "vite": "^5.2.10", + "unplugin-vue-components": "^0.27.0", + "vite": "^5.2.12", "vite-plugin-banner": "^0.7.1", - "vite-plugin-dts": "3.9.0", + "vite-plugin-dts": "3.9.1", "vite-plugin-inspect": "^0.8.4", "vite-plugin-require-transform": "^1.0.21", "vite-svg-loader": "^5.1.0", - "vitepress": "1.1.3", - "vitest": "^1.5.0", - "vue": "^3.4.24", - "vue-demi": "^0.14.6" + "vitepress": "1.2.2", + "vitest": "^1.6.0", + "vue": "^3.4.27", + "vue-demi": "^0.14.7" } } diff --git a/playground/components.d.ts b/playground/components.d.ts index 33c0bcd9c..4e1478c2a 100644 --- a/playground/components.d.ts +++ b/playground/components.d.ts @@ -1,49 +1,28 @@ /* eslint-disable */ -/* prettier-ignore */ // @ts-nocheck // Generated by unplugin-vue-components // Read more: https://github.com/vuejs/core/pull/3399 export {} +/* prettier-ignore */ declare module 'vue' { export interface GlobalComponents { - AnimatedModel: typeof import('./src/components/AnimatedModel.vue')['default'] - CameraOperator: typeof import('./src/components/CameraOperator.vue')['default'] - Cameras: typeof import('./src/components/Cameras.vue')['default'] - copy: typeof import('./src/components/TheBasic copy.vue')['default'] - DanielTest: typeof import('./src/components/DanielTest.vue')['default'] - DebugUI: typeof import('./src/components/DebugUI.vue')['default'] - DeleteMe: typeof import('./src/components/DeleteMe.vue')['default'] - FBXModels: typeof import('./src/components/FBXModels.vue')['default'] - Gltf: typeof import('./src/components/gltf/index.vue')['default'] + AkuAku: typeof import('./src/components/AkuAku.vue')['default'] + AnimatedObjectUseUpdate: typeof import('./src/components/AnimatedObjectUseUpdate.vue')['default'] + BlenderCube: typeof import('./src/components/BlenderCube.vue')['default'] + Box: typeof import('./src/components/Box.vue')['default'] + DirectiveSubComponent: typeof import('./src/components/DirectiveSubComponent.vue')['default'] + DynamicModel: typeof import('./src/components/DynamicModel.vue')['default'] + FBOCube: typeof import('./src/components/FBOCube.vue')['default'] + GraphPane: typeof import('./src/components/GraphPane.vue')['default'] LocalOrbitControls: typeof import('./src/components/LocalOrbitControls.vue')['default'] - MeshWobbleMaterial: typeof import('./src/components/meshWobbleMaterial/index.vue')['default'] - MultipleCanvas: typeof import('./src/components/MultipleCanvas.vue')['default'] - PortalJourney: typeof import('./src/components/portal-journey/index.vue')['default'] - Responsiveness: typeof import('./src/components/Responsiveness.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] - ShadersExperiment: typeof import('./src/components/shaders-experiment/index.vue')['default'] + TakeOverLoopExperience: typeof import('./src/components/TakeOverLoopExperience.vue')['default'] TestSphere: typeof import('./src/components/TestSphere.vue')['default'] Text3D: typeof import('./src/components/Text3D.vue')['default'] - TheBasic: typeof import('./src/components/TheBasic.vue')['default'] TheCameraOperator: typeof import('./src/components/TheCameraOperator.vue')['default'] - TheConditional: typeof import('./src/components/TheConditional.vue')['default'] - TheEnvironment: typeof import('./src/components/TheEnvironment.vue')['default'] - TheEvents: typeof import('./src/components/TheEvents.vue')['default'] TheExperience: typeof import('./src/components/TheExperience.vue')['default'] - TheFireFlies: typeof import('./src/components/portal-journey/TheFireFlies.vue')['default'] - TheFirstScene: typeof import('./src/components/TheFirstScene.vue')['default'] - TheGizmos: typeof import('./src/components/TheGizmos.vue')['default'] - TheGroups: typeof import('./src/components/TheGroups.vue')['default'] - TheModel: typeof import('./src/components/gltf/TheModel.vue')['default'] - TheParticles: typeof import('./src/components/TheParticles.vue')['default'] - 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'] - TresLechesTest: typeof import('./src/components/TresLechesTest.vue')['default'] - Udsz: typeof import('./src/components/udsz/index.vue')['default'] - VectorSetProps: typeof import('./src/components/VectorSetProps.vue')['default'] } } diff --git a/playground/package.json b/playground/package.json index c2676be52..49ab2186f 100644 --- a/playground/package.json +++ b/playground/package.json @@ -5,11 +5,11 @@ "private": true, "scripts": { "dev": "vite --host", - "build": "vue-tsc && vite build", + "build": "vite build", "preview": "vite preview" }, "dependencies": { - "@tresjs/cientos": "3.8.0", + "@tresjs/cientos": "3.9.0", "@tresjs/core": "workspace:^", "vue-router": "^4.3.2" }, @@ -19,7 +19,7 @@ "unplugin-auto-import": "^0.17.2", "vite-plugin-glsl": "^1.2.1", "vite-plugin-qrcode": "^0.2.3", - "vite-plugin-vue-devtools": "7.1.2", - "vue-tsc": "^2.0.14" + "vite-plugin-vue-devtools": "7.2.1", + "vue-tsc": "^2.0.19" } } diff --git a/playground/public/logo.svg b/playground/public/logo.svg new file mode 100644 index 000000000..035ffd955 --- /dev/null +++ b/playground/public/logo.svg @@ -0,0 +1,27 @@ + + + + + + + + + \ No newline at end of file diff --git a/playground/src/App.vue b/playground/src/App.vue index c0482986b..1db6204f5 100644 --- a/playground/src/App.vue +++ b/playground/src/App.vue @@ -1,6 +1,17 @@ diff --git a/playground/src/components/AkuAku.vue b/playground/src/components/AkuAku.vue new file mode 100644 index 000000000..da35e1437 --- /dev/null +++ b/playground/src/components/AkuAku.vue @@ -0,0 +1,17 @@ + + + diff --git a/playground/src/components/AnimatedObjectUseUpdate.vue b/playground/src/components/AnimatedObjectUseUpdate.vue new file mode 100644 index 000000000..c775616c1 --- /dev/null +++ b/playground/src/components/AnimatedObjectUseUpdate.vue @@ -0,0 +1,95 @@ + + + + diff --git a/playground/src/components/BlenderCube.vue b/playground/src/components/BlenderCube.vue new file mode 100644 index 000000000..66b7630b7 --- /dev/null +++ b/playground/src/components/BlenderCube.vue @@ -0,0 +1,29 @@ + + + diff --git a/playground/src/components/Box.vue b/playground/src/components/Box.vue new file mode 100644 index 000000000..02f1a097e --- /dev/null +++ b/playground/src/components/Box.vue @@ -0,0 +1,44 @@ + + + diff --git a/playground/src/components/DirectiveSubComponent.vue b/playground/src/components/DirectiveSubComponent.vue new file mode 100644 index 000000000..ec4b9a4ff --- /dev/null +++ b/playground/src/components/DirectiveSubComponent.vue @@ -0,0 +1,7 @@ + + + diff --git a/playground/src/components/DynamicModel.vue b/playground/src/components/DynamicModel.vue new file mode 100644 index 000000000..bb99cee45 --- /dev/null +++ b/playground/src/components/DynamicModel.vue @@ -0,0 +1,22 @@ + + + diff --git a/playground/src/components/FBOCube.vue b/playground/src/components/FBOCube.vue new file mode 100644 index 000000000..f6ba89fe4 --- /dev/null +++ b/playground/src/components/FBOCube.vue @@ -0,0 +1,27 @@ + + + + diff --git a/playground/src/components/GraphPane.vue b/playground/src/components/GraphPane.vue new file mode 100644 index 000000000..79110e0f2 --- /dev/null +++ b/playground/src/components/GraphPane.vue @@ -0,0 +1,101 @@ + + + diff --git a/playground/src/components/MultipleCanvas.vue b/playground/src/components/MultipleCanvas.vue deleted file mode 100644 index 5006e17d6..000000000 --- a/playground/src/components/MultipleCanvas.vue +++ /dev/null @@ -1,98 +0,0 @@ - - - diff --git a/playground/src/components/TakeOverLoopExperience.vue b/playground/src/components/TakeOverLoopExperience.vue new file mode 100644 index 000000000..5acf39670 --- /dev/null +++ b/playground/src/components/TakeOverLoopExperience.vue @@ -0,0 +1,57 @@ + + + diff --git a/playground/src/components/TheExperience.vue b/playground/src/components/TheExperience.vue index 6a6d42e4d..b579e613a 100644 --- a/playground/src/components/TheExperience.vue +++ b/playground/src/components/TheExperience.vue @@ -1,34 +1,26 @@ @@ -39,23 +31,27 @@ watchEffect(() => { v-bind="gl" ref="canvas" class="awiwi" - :style="{ background: '#008080' }" > + @@ -66,22 +62,20 @@ watchEffect(() => { /> - - + + - + + diff --git a/playground/src/components/TheSphere.vue b/playground/src/components/TheSphere.vue index 9c1761fcc..e5d6e2107 100644 --- a/playground/src/components/TheSphere.vue +++ b/playground/src/components/TheSphere.vue @@ -1,7 +1,21 @@ - + +