How to call animate() to add CSS2DRenderer labels

Hi @RaphaelVouilloz

Cool project! I’ve read your post from showcase and I’m very happy to hear you’re finding Speckle useful! :partying_face:

The example you are mentioning is using a custom viewer extension to display the labels. Generally, extensions are the goto approach on adding/customizing viewer functionality. Extensions offer out-of-the-box frame callbacks like onRender which is being used in the example

I’m not entirely sure what you mean by this, but my assumption is that you are not developing viewer extensions, but rather customizing the viewer library entirely. Maybe you want to give extensions a chance, see if they can make your life easier :wink:

The animate function in that three.js example is just a callback for the browser’s requestAnimationFrame. There are multiple ways you can get yourself an animation frame callback. One way would be to extend the SpeckleRenderer and override it’s render or update functions that get automatically called by the viewer. But probably an easier approach would be to just stack your own animation frame callback like they do in the three.js example:

function animate() {
  requestAnimationFrame( animate );
  // You code here
}

Just remember that you need to manually call animate once in order to get the loop going

Let us know if you need more help!

Cheers

2 Likes