Skip to content

Commit

Permalink
feat: 331 new context for state (#333)
Browse files Browse the repository at this point in the history 
* feat: tres context provider

* feat: useContextProvider onMounted

* feat: revert width height composables

* feat: fixed renderer watch for aspectRatio changes

* chore: clean up

* feat: refactor raycaster

* feat: 331 new context for state  tino (#340)

* feat: refactored composables; seperated logic from TresCanvas

* chore: more changes concerning renderer composable

* feat: made window size reactive

* chore: made compasable params more uniform

* chore: refactored useRenderer

* chore: type cleanup

* feat: added user data key for active cameras

* feat: made renderer constructor params reactive

* feat: made multiple cameras work

* feat: made camera handling work properly and fixed event handler problem

* feat: added option to set a camera active by it's uuid and the object itself

* chore: moved composable to composables

* chore: removed obsolete todo comments

* chore: set antialias to be true by default in TresCanvas

* chore: fix debugUI playground

* chore: pnpm lock

* chore: added localOrbitControls

* chore: made render loop start initially

* chore: changes concerning PR review

* chore: changes concerning PR review

* chore: remove camera test for now

* chore: release v2.4.0-next.4

* chore: ci update for pnpm actions

* chore: correct typo on test action name

* chore: restored reactivity of renderer composable

* chore: replaced userData handling in keys.ts by types

* chore: made tests temporarily work

* chore: disabled test temporarily

* chore: removed readonly on scene for post-processing

* chore: release v2.4.0-next.5

* chore: restored readonly on scene and removed it from renderer

* chore: release v2.4.0-next.6

* chore: fixed hmr

* chore: made usePointerEventHandler more uniform to other composables

* feat: made renderer presets have less priority than explicitly defined props

---------

Co-authored-by: Tino Koch <[email protected]>
Co-authored-by: alvarosabu <[email protected]>

* chore: release v2.4.0-next.7

* feat: remove readonly for scene on state context

* chore: release v2.4.0-next.8

* feat: add defaults props for trescanvas to match renderer ones

* chore: release v2.4.0-next.9

* feat: changed camera behavior so that the first added camera is always the active one

* chore: release v2.4.0-next.10

* docs: updated docs concerning useTresContext composable

* feat: added useTres alias for useTresContext

* chore: changed useTresContext to useTres in the docs

* chore: removed wrong dependency

* fix: fixed issue caused by merge of main

* chore: switched camera from ref to shallowRef

* chore: removed obsolete comment

* fix: revert shallorRef for cameras

---------

Co-authored-by: Tino Koch <[email protected]>
Co-authored-by: Tino Koch <[email protected]>
  • Loading branch information
@alvarosabu @Tinoooo
3 people authored Jul 29, 2023
1 parent c594cfc commit 0e66f43
Show file tree
Hide file tree
Showing 38 changed files with 1,825 additions and 1,963 deletions.
2 changes: 0 additions & 2 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@


### [2.4.2](https://github.com/Tresjs/tres/compare/2.4.1...2.4.2) (2023-07-14)


Expand Down
7 changes: 4 additions & 3 deletions docs/.vitepress/theme/components/ExtendExample.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { useTres } from '@tresjs/core'
import { useTresContext } from '@tresjs/core'
const styles = {
width: '100%',
Expand All @@ -9,14 +9,15 @@ const styles = {
overflow: 'hidden',
}
const { state } = useTres()
const { camera, renderer } = useTresContext()
</script>
<template>
<ClientOnly>
<TresCanvas shadows clear-color="#fff" :style="styles">
<TresPerspectiveCamera :position="[0, 2, 4]" />
<TresScene>
<TresOrbitControls v-if="state.renderer" :args="[state.camera, state.renderer?.domElement]" />
<TresOrbitControls v-if="renderer" :args="[camera, renderer?.domElement]" />
<TresDirectionalLight :position="[0, 2, 4]" :intensity="2" cast-shadow />
<TresMesh :rotation="[-Math.PI / 4, -Math.PI / 4, Math.PI / 4]">
Expand Down
10 changes: 5 additions & 5 deletions docs/api/composables.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,14 +184,14 @@ watch(carRef, ({ model }) => {
This composable aims to provide access to the state model which contains the default renderer, camera, scene, and other useful properties.

```ts
const { state } = useTres()
const { camera, renderer } = useTres()

console.log(state.camera) // THREE.PerspectiveCamera
console.log(state.renderer) // THREE.WebGLRenderer
console.log(camera.value) // THREE.PerspectiveCamera
console.log(renderer.value) // THREE.WebGLRenderer
```

::: warning
useTres composable can be only be used between the context of `TresCanvas` (inside sub-components) since Canvas component is the provider.
useTres can be only be used inside of a `TresCanvas` since `TresCanvas` acts as the provider for the context data.
:::

```vue
Expand All @@ -206,6 +206,6 @@ useTres composable can be only be used between the context of `TresCanvas` (insi
<script lang="ts" setup>
import { useTres } from '@tresjs/core'
const { state } = useTres()
const context = useTres()
</script>
```
28 changes: 14 additions & 14 deletions docs/api/renderer.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,20 +70,20 @@ renderer.shadowMap.type: PCFSoftShadowMap

## Props

| Prop | Description | Default |
| :-------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| **shadows** | Enable shadows in the Renderer | `false` |
| **shadowMapType** | Set the shadow map type | `PCFSoftShadowMap` |
| **physicallyCorrectLights** | Whether to use physically correct lighting mode. See the [lights / physical example](https://threejs.org/examples/#webgl_lights_physical). | `false` |
| **outputColorSpace** | Defines the output encoding | `LinearEncoding` |
| **toneMapping** | Defines the tone mapping exposure used by the renderer. | `NoToneMapping` |
| **context** | This can be used to attach the renderer to an existing [RenderingContext](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext) | |
| **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` |
| **preserveDrawingBuffer** | Whether to preserve the buffers until manually cleared or overwritten.. | `false` |
| **clearColor** | The color the renderer will use to clear the canvas. | `#000000` |
| **windowSize** | Whether to use the window size as the canvas size or the parent element. | `false` |
| **disableRender** | Disable render on requestAnimationFrame, usefull for PostProcessing | `false` |
| **camera** | A manual camera to be used by the renderer. | |
| Prop | Description | Default |
| :------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| **shadows** | Enable shadows in the Renderer | `false` |
| **shadowMapType** | Set the shadow map type | `PCFSoftShadowMap` |
| **useLegacyLights** | Whether to use the legacy lighting mode or not | `true` |
| **outputColorSpace** | Defines the output encoding | `LinearEncoding` |
| **toneMapping** | Defines the tone mapping exposure used by the renderer. | `NoToneMapping` |
| **context** | This can be used to attach the renderer to an existing [RenderingContext](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext) | |
| **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` |
| **preserveDrawingBuffer** | Whether to preserve the buffers until manually cleared or overwritten.. | `false` |
| **clearColor** | The color the renderer will use to clear the canvas. | `#000000` |
| **windowSize** | Whether to use the window size as the canvas size or the parent element. | `false` |
| **disableRender** | Disable render on requestAnimationFrame, usefull for PostProcessing | `false` |
| **camera** | A manual camera to be used by the renderer. | |

## Defaults

Expand Down
3 changes: 3 additions & 0 deletions docs/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,8 @@
"devDependencies": {
"unocss": "^0.53.4",
"vite-svg-loader": "^4.0.0"
},
"dependencies": {
"@tresjs/core": "workspace:2.4.0-next.10"
}
}
13 changes: 13 additions & 0 deletions docs/vite.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,12 @@ import Unocss from 'unocss/vite'
import svgLoader from 'vite-svg-loader'
import Components from 'unplugin-vue-components/vite'

const whitelist = [
'TresCanvas',
'TresLeches',
'TresScene',
]

export default defineConfig({
plugins: [
svgLoader(),
Expand All @@ -16,4 +22,11 @@ export default defineConfig({
dts: 'components.d.ts',
}),
],
vue: {
template: {
compilerOptions: {
isCustomElement: (tag: string) => tag.startsWith('Tres') && !whitelist.includes(tag) || tag === 'primitive',
},
},
}
})
26 changes: 13 additions & 13 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@
},
"dependencies": {
"@alvarosabu/utils": "^3.1.1",
"@vueuse/core": "^10.2.0"
"@vueuse/core": "^10.2.1"
},
"devDependencies": {
"@alvarosabu/prettier-config": "^1.3.0",
Expand All @@ -73,17 +73,17 @@
"@stackblitz/sdk": "^1.9.0",
"@tresjs/cientos": "2.2.0",
"@types/three": "^0.152.1",
"@typescript-eslint/eslint-plugin": "^5.60.0",
"@typescript-eslint/parser": "^5.60.0",
"@typescript-eslint/eslint-plugin": "^5.60.1",
"@typescript-eslint/parser": "^5.60.1",
"@vitejs/plugin-vue": "^4.2.3",
"@vitest/coverage-c8": "^0.32.2",
"@vitest/ui": "^0.32.2",
"@vitest/coverage-c8": "^0.32.3",
"@vitest/ui": "^0.32.3",
"@vue/test-utils": "^2.4.0",
"eslint": "^8.43.0",
"eslint": "^8.44.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-vue": "^9.15.1",
"esno": "^0.16.3",
"gsap": "^3.12.1",
"gsap": "^3.12.2",
"jsdom": "^22.1.0",
"kolorist": "^1.8.0",
"ohmyfetch": "^0.4.21",
Expand All @@ -93,18 +93,18 @@
"rollup-plugin-analyzer": "^4.0.0",
"rollup-plugin-copy": "^3.4.0",
"rollup-plugin-visualizer": "^5.9.2",
"three": "^0.153.0",
"unocss": "^0.53.3",
"three": "^0.154.0",
"unocss": "^0.53.4",
"unplugin": "^1.3.1",
"unplugin-vue-components": "^0.25.1",
"vite": "^4.3.9",
"vite-plugin-banner": "^0.7.0",
"vite-plugin-dts": "2.3.0",
"vite-plugin-inspect": "^0.7.29",
"vite-plugin-require-transform": "^1.0.17",
"vite-plugin-dts": "3.0.2",
"vite-plugin-inspect": "^0.7.32",
"vite-plugin-require-transform": "^1.0.20",
"vite-svg-loader": "^4.0.0",
"vitepress": "1.0.0-beta.5",
"vitest": "^0.32.2",
"vitest": "^0.32.3",
"vue": "^3.3.4",
"vue-demi": "^0.14.5"
}
Expand Down
7 changes: 4 additions & 3 deletions playground/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,20 @@
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
import '@vue/runtime-core'

export {}

declare module '@vue/runtime-core' {
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']
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']
Expand All @@ -27,6 +27,7 @@ declare module '@vue/runtime-core' {
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']
Expand Down
9 changes: 5 additions & 4 deletions playground/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,13 @@
},
"dependencies": {
"@tresjs/cientos": "2.1.4",
"vue-router": "^4.2.2"
"@tresjs/core": "workspace:2.4.0-next.10",
"vue-router": "^4.2.4"
},
"devDependencies": {
"@tresjs/leches": "^0.3.1",
"unplugin-auto-import": "^0.16.4",
"@tresjs/leches": "^0.4.0",
"unplugin-auto-import": "^0.16.6",
"vite-plugin-glsl": "^1.1.2",
"vue-tsc": "^1.8.1"
"vue-tsc": "^1.8.4"
}
}
30 changes: 14 additions & 16 deletions playground/src/components/DebugUI.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,34 +2,32 @@
import { TresCanvas } from '@tresjs/core'
import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
import { OrbitControls, Box } from '@tresjs/cientos'
import { TresLeches, useControls } from '@tresjs/leches'
import '@tresjs/leches/styles'
// import { OrbitControls, Box } from '@tresjs/cientos'
/* import { TresLeches, useControls } from '@tresjs/leches' */
/* import '@tresjs/leches/styles' */
const gl = {
const gl = reactive({
clearColor: '#82DBC5',
shadows: true,
alpha: false,
shadowMapType: BasicShadowMap,
outputColorSpace: SRGBColorSpace,
toneMapping: NoToneMapping,
}
})
const boxPosition = ref([0, 0.5, 0])
useControls(gl)
useControls('Box', boxPosition.value)
/* useControls('fpsgraph') */
// useControls(gl)
// useControls('Box', boxPosition.value)
</script>

<template>
<TresLeches />
<TresCanvas v-bind="gl">
<TresPerspectiveCamera :position="[3, 3, 3]" />
<OrbitControls />
<Box :position-x="boxPosition[0]">
<TresMeshNormalMaterial />
</Box>
<TresCanvas v-bind="gl" :window-size="true">
<TresPerspectiveCamera :look-at="[0, 4, 0]" />
<TresMesh :position="[0, 4, 0]">
<TresBoxGeometry :args="[1, 1, 1]" />
<TresMeshToonMaterial color="teal" />
</TresMesh>
<TresGridHelper />
<TresAmbientLight :intensity="1" />
</TresCanvas>
Expand Down
Loading

0 comments on commit 0e66f43

Please sign in to comment.