Viewer API & Tweakpane - changing color on some objects

Help
1

Hello !

I am very new to Speckle, js, and typescript and I am trying to use Speckle Viewer new API. I would like to change the color of selected objects, to display various temperatures in a house for example. I used the function “setUserObjectColors()” and it is working. But then I wanted to display various colors by using a slider from “tweakpane”, but the color of the object stayed the same. I tried to use “removeUserObjectColors()” and “removeColorFilter()” before changing the colors, but no chance.
I was wondering if I need to use “material.needsupdate = true” for three.js ? If this is the case, I don’t know how to use it in the viewer-sandbox project, and would greatly appreciate any help :slight_smile:

My code in Sandbox.ts:

public makeTemperatureUI() {
    const container = this.tabs.pages[6];
    container
    .addInput(this.temperaturesParams, 'Slider', {
        label: 'Slider',
        step: 1,
        min: 0,
        max: 40
      })
    .on('change',(value) => {
      this.viewer.getExtension(FilteringExtension).removeUserObjectColors()
      this.viewer.getExtension(FilteringExtension).setUserObjectColors([{objectIds: [this.objectId], color: this.temperature_to_color(this.temperaturesParams.Slider)}])
  
    })

public getObjectId(node: TreeNode){
    return [node.model.id]
  }


  public temperature_to_color(temp: number){
    let res_color = "#b8cc33"
    if (temp <= 18){
      res_color = "#33c2cc"
    }
    else if (temp >=26){
      res_color = "#cc3333"
    }
    return res_color;
  }

Thanks !

3 Likes
2

Hello @i0np

First of all, thank you for your interest in the viewer’s API 2.0! :slight_smile: We’re always glad to see people trying things out!
The issue you are describing is a valid one, and it’s already being tracked in this issue. API 2.0 is still not thoroughly tested and it’s likely you may encounter bugs like this one

Fortunately, API 2.0 provides another way to achieve what you are describing, by using the viewer-core directly and it’s setMaterial functionality. Here is a working example to get you started ( I suggest you use Chrome to open it, it seems there is currently an issue with their sandbox website on Firefox and possibly other browsers)

Additionally, I recommend you have a look over API2.0’s quick reference guide to get an idea of the available functionalities in the viewer

If you have any further questions, just let me know and I’ll gladly assist

Cheers

4 Likes