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

**URL:** <https://discourse.threejs.org/t/tween-transformation-on-css3dobjects-creates-many-sets-but-i-only-want-one/38440>\
**Category:** Questions\
**Tags:** transformations, object3d, css3d, 3d-force-graph, animation\
**Created:** [May 23, 2022, 12:22pm UTC](https://discourse.threejs.org/t/tween-transformation-on-css3dobjects-creates-many-sets-but-i-only-want-one/38440 "2022-05-23T12:22:12Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![scenaristeur](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/scenaristeur/32/24439_2.png) [@scenaristeur](https://discourse.threejs.org/u/scenaristeur)\
**Post date:** [May 23, 2022, 12:22pm UTC](https://discourse.threejs.org/t/tween-transformation-on-css3dobjects-creates-many-sets-but-i-only-want-one/38440/1 "2022-05-23T12:22:12Z")

</div>

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](https://github.com/vasturiano/3d-force-graph) to create and connect nodes.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/b/bb60dc61b085c76ad69b61b0639a8cbbb8385f89.png)

code : [GitHub - scenaristeur/agent](https://github.com/scenaristeur/agent)  
working app : [agent](https://scenaristeur.github.io/agent/)  
demo video  
[3D mindmap on your Solid pod - Getting started in 4 mins - YouTube](https://youtu.be/YT61BcjGfwc)  
data is stored as jsonld on a Solid Pod, or ipfs, gundb  
an exemple with data stored on a Solid Pod : [agent](https://scenaristeur.github.io/agent/?source=https%3A%2F%2Fspoggy-test2.solidcommunity.net%2Fpublic%2Fbrains%2FSolidEcosystem)

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](https://threejs.org/examples/?q=css3d#css3d_periodictable) to add a spiral

 ![169402186-a91ca6b2-59bb-43d6-a8de-f4f52185f090](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/4/e4c3d174c939c32b75a06b1889b95753af3e82b7.jpeg)

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.

> <https://github.com/vasturiano/3d-force-graph/issues/344#issuecomment-1133173238>
>
> 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