How to Change "View Mode" and Configure Mouse Actions in Speckle Viewer

Speckle Help
,
1

Hi everyone, how are you?

I have two questions that I couldn’t find answers to, either here in the forum or in the documentation. If these topics have already been discussed somewhere, please send me the link.

My first question is about the “View Modes” in the Speckle Viewer. After updating the @speckle/viewer library to version 2.25.7, I noticed that the elements changed their visualization type, with the default now being “Rendered + Edge”.

I’d like to know how I can change the “View Modes” using the @speckle/viewer API.

My second question (or suggestion) is about the mouse wheel button action. Is there a way to change the default action from rotating to moving the loaded model inside the viewer?

Thanks in advance for your help!

2

Have you found our documentation?

I think that, as we are in the process of migrating documents to the new site, the very latest additions may not be fully described, but adding behaviours is covered there for sure.

3

Hi @RafaelMayer

We’ve updated the docs with the new additions regarding the rendering pipeline API of the viewer.

There are two options when it comes to controlling the rendering pipeline:

You can work with pipelines directly, which can be as simple as:

const renderer = viewer.getRenderer()
/** Say if you want to disable edges/outlines */
const pipelineOptions = { edges: false } 
renderer.pipeline = new DefaultPipeline(renderer, pipelineOptions)

Alternatively you can use the ViewModes extension which simplifies the interfacing a bit and it’s also used by our web app

Some examples of working with the viewer rendering pipelines can be seen in the sandbox here where we also define a custom ad-hoc rendering pipeline

Cheers

4

Sorry, I missed your second question the first time.

There is currently no direct way of re-mapping input for the camera controller. There have been discussions around it but there is nothing planned.

5

Hey Alex,

Thanks for your reply.

Following your suggestion and the documentation, I was able to do what I wanted. I’m sharing the code below:

const viewModes = viewer.createExtension(ViewModes);

viewModes.setViewMode(ViewMode.DEFAULT, {
  edges: false,
});

About the mouse button, that’s fine, no problem. I’ll keep an eye out for updates on that.

Thanks again for your response, Alex.

1 Like