Comments (3)
I spent more time reproducing it and the only reason why was working on the playground it was because it was wrapped with Suspense
wtf 😂
from tres.
Brilliant catch @andretchen0 thanks for the detailed reproduction!
Every new instance of TresCanvas could create a new nodeOps instance that contains a unique TresContext (i.e., with the appropriate Scene) within its scope.
This was the original purpose, but it seems we didn't implement it correctly, I think your idea about refactoring nodeOps
to a function will potentially solve this, but I will need to test it
The weirdest thing is that I managed to reproduce the behavior only in stackblitz, in the playground we have a demo for multiple canvases, and it is not happening @andretchen0.
I'm using a v-if
to show/hide the box, here is working as expected
Screen.Recording.2024-03-06.at.19.53.50.mov
from tres.
This was the original purpose, but it seems we didn't implement it correctly
No worries. Bugs happen.
In the hope that it's helpful to mention: looking at the code, I have a hunch that some of the Vue SFC model has rubbed off on the way some plain ES modules were written. (It happens to me, so I'm assuming others, too.) Like the code in src/core/renderer.ts:
import * as THREE from 'three'
import { createRenderer } from 'vue'
import { extend } from './catalogue'
import { nodeOps } from './nodeOps'
export const { render } = createRenderer(nodeOps)
If one has the Vue <script setup>
mental model, it might look like render
will be unique every time the script is imported. Because every time you create <MyVueComponent>
, its <script setup>
is run again.
But ES modules are something like singletons. They're only evaluated the first time they're imported. In this case, it means all render
are the same.
Mostly that wasn't a problem because mostly the Vue renderer (nodeOps) functions just work on the arguments passed to them ... just not in the case of let scene
. Lol.
from tres.
Related Issues (20)
- `TresPerspectiveCamera` `lookAt` not working with `CameraControls` HOT 9
- Recipe using `tweakpane`
- Events not registering on dynamically added objects HOT 2
- Library override the DPR setting in autonomy without chances to clamp / control it HOT 2
- Component: The setting parameter disableRender of TresCanvas is ineffective when renderMode is set to always. HOT 4
- Docs/playgrounds: change `ref(TresObject)` to `shallowRef(TresObject)` HOT 1
- When there is an annotated tag, the children of the scene will generate _Object3D model information HOT 2
- [Vue warn]: onUnmounted ... after upgrading to `4.2.0` - cached model fails to reload
- Vscode intellisense autocompletion not getting Tres components props HOT 10
- Portal HOT 1
- reactive property bug HOT 1
- DirectionalLightHelpers breaks devtools
- Unmount the Canvas component instant mount children again even if canvas is not mounted HOT 1
- Adding event to primitive test/nuxt lagging model HOT 2
- Support for kebab-case style component naming
- Type error HOT 2
- `pointer-{leave,out}` fired multiple times on single "leave"
- Error when using empty TresCanvas HOT 3
- `nodeOps.createElement` throws when `props === null`
- useSeek functions should not trigger a warning (in production) if no objects were found
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tres.