Skip to content

Commit

Permalink
fix: localstate for objects with events and manual register/unregiste…
Browse files Browse the repository at this point in the history
…r from nodeOps using ctx (#767)

* fix: localstate for objects with events and manual register/unregister from nodeOps using ctx

* chore: remove unused imports

* feat: use shallowRef for objects with events

* chore: remove unused import
  • Loading branch information
alvarosabu authored Jul 12, 2024
1 parent f637bf3 commit 9a53e60
Show file tree
Hide file tree
Showing 9 changed files with 1,743 additions and 2,005 deletions.
38 changes: 19 additions & 19 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -68,49 +68,49 @@
},
"dependencies": {
"@alvarosabu/utils": "^3.2.0",
"@vue/devtools-api": "^6.6.2",
"@vueuse/core": "^10.10.0"
"@vue/devtools-api": "^6.6.3",
"@vueuse/core": "^10.11.0"
},
"devDependencies": {
"@release-it/conventional-changelog": "^8.0.1",
"@stackblitz/sdk": "^1.10.0",
"@stackblitz/sdk": "^1.11.0",
"@tresjs/cientos": "3.9.0",
"@tresjs/eslint-config": "^1.1.0",
"@types/three": "^0.165.0",
"@typescript-eslint/eslint-plugin": "^7.11.0",
"@typescript-eslint/parser": "^7.11.0",
"@types/three": "^0.166.0",
"@typescript-eslint/eslint-plugin": "^7.16.0",
"@typescript-eslint/parser": "^7.16.0",
"@vitejs/plugin-vue": "^5.0.5",
"@vitest/coverage-c8": "^0.33.0",
"@vitest/coverage-v8": "^1.6.0",
"@vitest/ui": "^1.6.0",
"@vitest/coverage-v8": "^2.0.1",
"@vitest/ui": "^2.0.1",
"@vue/test-utils": "^2.4.6",
"eslint": "^9.4.0",
"eslint-plugin-vue": "^9.26.0",
"eslint": "^9.6.0",
"eslint-plugin-vue": "^9.27.0",
"esno": "^4.7.0",
"gsap": "^3.12.5",
"husky": "^9.0.11",
"jsdom": "^24.1.0",
"kolorist": "^1.8.0",
"ohmyfetch": "^0.4.21",
"pathe": "^1.1.2",
"release-it": "^17.3.0",
"release-it": "^17.5.0",
"rollup-plugin-analyzer": "^4.0.0",
"rollup-plugin-copy": "^3.5.0",
"rollup-plugin-visualizer": "^5.12.0",
"sponsorkit": "^0.14.6",
"three": "^0.165.0",
"unocss": "^0.60.4",
"unplugin": "^1.10.1",
"unplugin-vue-components": "^0.27.0",
"vite": "^5.2.12",
"three": "^0.166.1",
"unocss": "^0.61.3",
"unplugin": "^1.11.0",
"unplugin-vue-components": "^0.27.2",
"vite": "^5.3.3",
"vite-plugin-banner": "^0.7.1",
"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.2.2",
"vitest": "^1.6.0",
"vue": "^3.4.27",
"vitepress": "1.3.0",
"vitest": "^2.0.1",
"vue": "^3.4.31",
"vue-demi": "^0.14.8"
}
}
61 changes: 61 additions & 0 deletions playground/src/pages/events/DynamicObjects.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<script setup lang="ts">
import { reactive } from 'vue'
import { TresCanvas } from '@tresjs/core'
import { Box, OrbitControls, Sphere, StatsGl } from '@tresjs/cientos'
const hotspots = reactive([
{
position: [-2, 0, -2],
},
{
position: [0, 0, -2],
},
{
position: [2, 0, -2],
},
])
const addHotspot = () => {
const newHotspot = reactive({
position: [-2, 0, 0],
})
hotspots.push(newHotspot)
}
const removeHotspot = () => {
hotspots.pop()
}
const grow = (event) => {
event.object.scale.set(1.5, 1.5, 1.5)
}
const shrink = (event) => {
event.object.scale.set(1, 1, 1)
}
</script>

<template>
<TresCanvas>
<Suspense>
<StatsGl />
</Suspense>
<OrbitControls />
<TresPerspectiveCamera />
<TresAmbientLight :args="['white', 0.5]" />
<Box :position="[0, 0, 0]" :scale="[1, 1, 1]" @click="addHotspot" @context-menu="removeHotspot">
<TresMeshNormalMaterial />
</Box>
<Sphere
v-for="(hotspot, index) in hotspots"
:key="index"
:args="[0.5, 16, 16]"
:position="hotspot.position"
@click="console.log('click', index)"
@pointer-enter="grow"
@pointer-leave="shrink"
>
<TresMeshNormalMaterial />
</Sphere>
</TresCanvas>
</template>
5 changes: 4 additions & 1 deletion playground/src/pages/events/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { ThreeEvent } from '@tresjs/core'
import { TresCanvas } from '@tresjs/core'
import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
import { TresLeches, useControls } from '@tresjs/leches'
import { OrbitControls } from '@tresjs/cientos'
import { OrbitControls, StatsGl } from '@tresjs/cientos'
import '@tresjs/leches/styles'
const gl = {
Expand Down Expand Up @@ -64,6 +64,9 @@ function onPointerMissed(ev: ThreeEvent<MouseEvent>) {
window-size
v-bind="gl"
>
<Suspense>
<StatsGl />
</Suspense>
<TresPerspectiveCamera
:position="[11, 11, 11]"
:look-at="[0, 0, 0]"
Expand Down
5 changes: 5 additions & 0 deletions playground/src/router/routes/events.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,9 @@ export const eventsRoutes = [
name: 'FSP Drops Reproduction',
component: () => import('../../pages/events/FpsDropsReproduction.vue'),
},
{
path: '/events/dynamic-objects',
name: 'Dynamic Objects',
component: () => import('../../pages/events/DynamicObjects.vue'),
},
]
Loading

0 comments on commit 9a53e60

Please sign in to comment.