Comments (14)
Hi @darkvertex the event issue with dynamic components should be fixed with #763, hasn't being released yet. Probably today
from tres.
Also to be clear, I don't believe this is an issue with threejs as there is an official example showing dynamically changing instance counts on the same InstancedMesh working no problem:
https://threejs.org/examples/?q=inst#webgl_instancing_dynamic
from tres.
Hey buddy @Neosoulink, not yet, but it would be great if you could help us with it.
from tres.
Thanks for taking a look, @Neosoulink!
You are indeed right that "count" cannot go higher than the value fed to the constructor. I missed that in the docs, my bad. -- It turns out that the "count" property is editable however, so as long it is a lower or equal value than what was given to the constructor.
With this corrected knowledge, I forked my bug repro stackblitz and got it working given the "count" prop never exceeds the value of the constructor. I give it a higher number (10) at consturction and track the desired count separate from the max (initial) count, and ensure my desired count does not exceed the initial.
This works reasonably well now:
https://stackblitz.com/edit/tresjs-instanced-mesh-vwhmkx?file=src%2Fcomponents%2FTheExperience.vue
(click on the monkey idling in the center, and it will add up to 10 instances.)
Now, what if the stuff fed to ":args=..." (constructor) changes? Would it be a crazy expectation that if constructor (":args=...") change because the given props changed upstream, the old threejs InstancedMesh object ought to be cleanly disposed of and a new one recreated in its place?
If you hold the Shift key while clicking on the monkey in the middle in my example above, it will attempt to set the "maxCount" to a higher number (1000 instead of 10), which was passed to the ":args", so I would have thought TresJS would handle re-syncing, but instead you will see this error below:
![image](https://private-user-images.githubusercontent.com/941331/348062116-91bf2cea-b6f3-48ba-9394-7cc6e1abb9ee.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxNzUwMDMsIm5iZiI6MTcyNDE3NDcwMywicGF0aCI6Ii85NDEzMzEvMzQ4MDYyMTE2LTkxYmYyY2VhLWI2ZjMtNDhiYS05Mzk0LTdjYzZlMWFiYjllZS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODIwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyMFQxNzI1MDNaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1iY2U4Y2FiN2E1ZDQwNjc1YzAzYjA1ZmZkNzQ0NGY0OTcxYjNhN2U0NjQxODE2M2Y2YThkMmY2OTBhMTBhZjU3JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.09tVBLlGQxqbPcNhvO1f0NnigkurXMk1B7pxajO3hWw)
I can kinda work around my issues by setting a very high initial count, but it would be nice if TresJS could autorecreate the InstancedMesh should the constructor's reactive values change.
Thoughts?
from tres.
@darkvertex, nice to know you partially solved the issue!
But this issue is more about ThreeJs itself,
If you want to increase the max-count, you have to recreate a new InstancedMesh
See my Tres
examples integration
https://stackblitz.com/edit/tresjs-instanced-mesh-pwbt4l?file=src%2Fcomponents%2FTheExperience.vue
from tres.
Hey @alvarosabu, is someone working on this?
I can Investigate and work on this
from tres.
@darkvertex it's important you understand that the count
of instancedMesh
can not be resized to a higher level
As mugen87 mentionned it here: https://discourse.threejs.org/t/modified-three-instancedmesh-dynamically-instancecount/18124/10
Keep in mind that InstancedMesh.count represents the maximum count of instances. You need to init the mesh with this number but can then alter the property to a lower value.
Buffers can not be resized!
From the Doc InstancedMesh.count
You can change the number of instances at runtime to an integer value in the range [0, count].
If you need more instances than the original count value, you have to create a new InstancedMesh.
With that said, why are you getting the error:
"Cannot assign to read only property
position
of object#<InstancedMesh>
"
I'm unsure, but the error is triggered after the count
is modified. count
being an argument of an instance, it can not be modified again.
Now let's see alternatives,
Understand that even if the count was working, you wouldn't be able to increase the count like that.
Here I've created an alternative solution to increase InstancedMesh
in Tres
const material = new MeshNormalMaterial();
const count = shallowRef(1);
const instancedMesh = shallowRef();
const createPrimitiveInstance = () =>
h('primitive', {
ref: instancedMesh,
object: new InstancedMesh(susane, material, count.value ?? 1),
});
const InstancedComponent = shallowRef(() => createPrimitiveInstance());
const resetInstancedComp = () => {
instancedMesh.value?.dispose();
InstancedComponent.value = () => createPrimitiveInstance();
};
onLoop(({ elapsed }) => {
// codes ...
});
onMounted(() => {
setInterval(() => {
if (count.value < 100) {
count.value++;
resetInstancedComp();
console.log('instancedMesh updated', count.value);
}
}, 3000);
});
//////////
<template>
<TresCanvas v-bind="stateCanvas">
<InstancedComponent />
</TresCanvas>
</template>
The above code will add each 3 sec a new instance to the scene.
See the complete example here: https://stackblitz.com/edit/tresjs-instanced-mesh-pwbt4l?file=src%2Fcomponents%2FTheExperience.vue
@alvarosabu, I don't think it's related to Tres
didn't find anything
Error coming from patchProp
property of nodeOps
precisely in the root Object.assign.
from tres.
@Neosoulink Ah, I get what you did now. Okay.
With your approach of having a swapable "component", do you know how could I get @click
events working again on the <InstancedComponent>
? -- I incorporated your technique but they do not appear to trigger anymore (and they did when it was on the direct <TresInstancedMesh>
component.)
from tres.
@alvarosabu Oh, que bueno! ❤️
Will I need to do any code gymnastics to make the raycast click stuff detect the instanceid under the click, given that this is a dynamic component? Or does TresJS figure it out by the threejs object type?
from tres.
I don't have a bug repro stackblitz for you at this time, but I wanted to share some oddities:
I tried to update my real app code to 4.2.0 and it goes into an infinite loop of recreating the InstancedMesh, whereas 4.0.2 works fine but had no working click events in my component.
The trick of using a function to return a primitive seems to be the culprit somehow, as when I change directly to having a <primitive :object="myInstancedMesh" />
in my <template>
instead of referencing a dynamic component then I can point it to a mesh almost the same way and the infinite creation loop goes away.
When I test with static data it seems I have click events with it, but when I have the whole thing hooked up, my instances are updating nicely, and on-demand rendering is working nicely too, but I cannot get any click events to fire at all... I'm stumped. 🤔
Is there a special debug verbosity flag or something I can enable to get more visibility on what's happening inside Tres?
from tres.
Is there a special debug verbosity flag or something I can enable to get more visibility on what's happening inside Tres?
Hi @darkvertex have you tried checking the scene graph on the vue devtools?
from tres.
Yes.
When I was having the issue of the instancedmesh being regenerated in perpetuity the devtools for Tres showed the mesh in question flickering in the Scene breakdown, which was probably from being trashed and recreated over and over.
Now with my functional but unclickable setup there's no flickering of the mesh and there does seem to have the click event attached:
but the click event is not firing.
from tres.
Ok, I think I found my issue with click events not firing.
Calling .computeBoundingSphere()
on the InstancedMesh after doing all my instances matrix updates (.setMatrixAt(...)
) seems to make clicking work again. I didn't know this was necessary.
Curiously, doing .computeBoundingBox()
does not help, only .computeBoundingSphere()
fixes it. Odd.
from tres.
When I tested just manually setting two instances at the root of the component without anything dynamic, click events worked without having to recompute any bounding volumes.
It's as if the bounding spheres are computed the very very first render and then that's it.
from tres.
Related Issues (20)
- How to use vue-cli HOT 3
- Mesh that are delayed Join in the scene cannot trigger events HOT 5
- Sprite - Raycast events not firing if inside group HOT 5
- `TresPerspectiveCamera` `lookAt` not working with `CameraControls` HOT 7
- 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 2
- 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
- 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
- `pointer-{leave,out}` fired multiple times on single "leave"
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.