TWEEN transformation on CSS3DObjects creates many sets but i only want one

scenaristeur · May 23, 2022, 12:22pm

I’m working on a 3D mindmap tool to provide everyone a simple way to express what is in its mind, and share an universal representation of those data.

i’ve use the great @vasturiano based on threejs 3d-force-graph to create and connect nodes.

code : GitHub - scenaristeur/agent
working app : agent
demo video
3D mindmap on your Solid pod - Getting started in 4 mins - YouTube
data is stored as jsonld on a Solid Pod, or ipfs, gundb
an exemple with data stored on a Solid Pod : agent

Now i want to be able to connect those nodes to a spiral/helix according to nodes representing timestamps when the node have been created, and/or to other timestamps if the node represent an event.

My idea was to use an exponential spiral/helix with 0 represent “now” and exponential timestamps from now : 1 seconds, 1 minute, 1 hour, 1 day, 1 week, 1 month, 1 year… and so on.
“minus 1 hour” saying the event has happend 1 hour ago, “plus 1"hour” saying the event will happend in 1 hour.
And it would be great if the “timestamp node” could swipe, accord to the new time every 10s.

for now the exponential idea is not essential, we can stay with one node per hour or day for example.

i’ve tweak the code CSS3D periodic table at three.js examples to add a spiral

and now i can connect “Data nodes” to “Timestamp nodes”

but i’ve now an issue when I click on different vizualisations (table/sphere/helix…) provided by the example,
The links that pointed to a “timestamp node” does not update and stay in place altought the “timestamp node” is moved according to the TWEEN transformation.
the issue is more described here with screenshots and links to my code.

github.com/vasturiano/3d-force-graph

efficiently tweening from one layout to another

opened 11:23PM - 07 Jul 20 UTC

FrissAnalytics

Hi Vasco, Hope you're doing well. Thanks again for your amazing project! …If possible, I have a question on efficiently tweening from one layout to another. Let's say the force layout creates a set of node positions and let's say there is another engine that creates an alternative layout, say a simple grid layout. Let's call the node arrays with the respective positions `d.x`, `d.y` and `d.z` say `start` and `end`. What is the most efficient way to tween between such two layouts? One way I guess is by running a tween function that creates a new nodes array with modified `fx`, `fy` and `fz` positions that are convex combinations of the two layouts, in which we tween a `lambda` value from 0 to 1, and re-binding a new data set at every tick. In pseudo code something like this: ```javascript let { nodes, links } = Graph.graphData(); nodes = nodes.map((d, i) => { d.fx = (1 - lambda) * start[i].x + lambda * end[i].x; d.fy = (1 - lambda) * start[i].y + lambda * end[i].y; d.fz = (1 - lambda) * start[i].z + lambda * end[i].z; return d; }) Graph.graphData({ nodes, links }); ``` From a performance standpoint, is this the best way given the current API? It seems a bit verbose and inefficient to create a new data set at every tick and binding it, however, it seems to work. I'm a bit worried that when the node set gets bigger this type of update is inefficient. Then again, I'm not really familiar with the internals of your implementation. If possible, can you comment on this? Clearly, unless someone calls `pauseAnimation()`, the engine keeps rendering the scene (using `requestAnimationFrame` I guess?). It would be nice if a user can manipulate the nodes data outside of running the force layout engine. For instance, in one of the examples, you rotate a camera, which is similar in that the renderer just keeps rendering the scene at approx. 60 fps. The way described above works for sure, but is there an easier / more effective way, or is this just how it works for now? Anyways, thanks again for your amazing work! kind regards, Herman

it seems that i have five sets of “timestamp nodes” and i’m a little bit lost with all of them as i only wanted to have one.
And it would be great if they were periodically updated, as the 0 node should normally walk through the spiral as each spended second.
I’ve just seen the notion of layer in threejs, but i think i will lost the translation effect if i add/remove “timestamp nodes” from a layer.

So my first question is how could I use TWEEN transformation using only one set of nodes, and update the links to them ?
second : what is the best way to update the walking 0 node ?

Thxs

Topic		Replies	Views
Unable to update the position/rotation/scale etc of deeply nested child nodes Questions transform , gltf , skeletal-animation	3	419	February 26, 2023
Child objects and shape keys Questions morph-targets	2	1557	May 13, 2019
Parametric Vertex Controls of MorphTargets Questions geometry , animation , buffergeometry , morph-targets	2	388	June 10, 2022
Css3d_periodictable add object by dynamically Questions css-renderer	2	457	December 1, 2020
From glTF to SkinnedMesh Questions skinned-mesh , bones , animation-skinning	6	5286	June 17, 2019

TWEEN transformation on CSS3DObjects creates many sets but i only want one

Related Topics