React Setup with Interaction Example

Grasshopper ShapeDiver
,
1

I have set up a simple working example using react next js that creates a session, a viewport and it lets me change a parameter using the range slider:

image
image1920×1222 59.9 KB

I used this React Setup example. I’m trying to test some other functionality like interactions and animations.

I tried to follow this example but because it’s written in typescript I’m not exactly sure how to write it in react js correctly.

I tried doing something like this:

Imports:

import * as SDV from "@shapediver/viewer";
import {InteractionEngine, SelectManager, InteractionData} from "@shapediver/viewer.features.interaction";

creating session:

  useEffect(() => {
    const getSession = async () => {
      const session = await SDV.createSession({
        ticket:
          "some ticket id...",
        modelViewUrl: "https://sdeuc1.eu-central-1.shapediver.com",
        id: "mySession4"
      });

      // pushing an object to data session node
      session.node.data.push(new InteractionData({ select: true }));

      return session;
    };
    getSession();
  }, []);

creating viewport:

  useEffect(() => {
    const getViewer = async () => {
      if (!containerRef.current) return;

      console.log(containerRef.current);

      const viewport = await SDV.createViewport({
        canvas: containerRef.current,
        id: "myViewport"
      });

    // instantiating interactionEngine and selectManager
    const interaction = new InteractionEngine(viewport)
    const selectManager = new SelectManager();
    selectManager.effectMaterial = new SDV.MaterialStandardData({ color: "#ffff00" });
    interaction.addInteractionManager(selectManager);

    return viewport;
    };
    console.log(getViewer());
  }, [containerRef]);

Doesn’t seem to be working when I click on my model. InteractionData seems to be pushed into
session.node.data when I log it in the console:

image
image1282×552 62.6 KB

I think I may be doing something wrong with react js. Would anyone please be able to create a react js example of this and share it? I think if I have one example with interactions then I’ll be able to do animations. Would be quite helpful

2

We are working on a best practice example, however it will likely take until the end of this week.

Quick troubleshooting question: In case you omit the interaction stuff, are you able to see your model and rotate it?

3

@snabela Thank you for the response. Looking forward to this. Is React JS implementation a recent feature of Shapediver?

The code I specified above doesn’t break anything, the model works as intended and I’m able to update the parameters fine.

4

Several users are using our viewer with React JS, i.e. I don’t expect a general problem, but we are currently working on some components that you will be able to reuse and should make your life easier. We will include interaction setup.

Maybe there is a problem with the layout of the page, such that the events don’t arrive where they should.

5

@Sebastian_Meckovski this should help you get started: GitHub - shapediver/ShapeDiverReactExample: Example setup using the ShapeDiver Viewer with React

6

@snabela thank you for the example. It’s now becoming clearer. It’s more complex than I thought but I managed to get the interactions working. I think it would be helpful to play around with it more so I can understand the underlying code more. The next thing I’d like to test is the animations.

I tried adding animations based on your example and implementing this.

Created SdSessionAnimationData.tsx in the scr/components folder:

import { AnimationData, IAnimationTrack } from "@shapediver/viewer";
import { useContext, useEffect } from "react";
import { SdSessionContext } from "./SdSessionContext";

export default function SdSessionAnimationData() : JSX.Element {

  const {state} = useContext(SdSessionContext);
  const session = state.session;  

  useEffect( () => {

    if (session) {

      const tracks: IAnimationTrack[] = [
        {
          times: [0, 2.5, 5],
          values: [0, 0, 0, 1000, 200, 0, 0, 0, 0],
          node: session.node,
          path: "translation",
          interpolation: "linear"
        }
      ];
      
      console.log('addning animations..')
      const animationData = new AnimationData("myAnimation", tracks, 0, 5);
      session.node.addData(animationData)
      animationData.repeat = false;
      animationData.startAnimation()
    } 
  });

  return (
    <>
    </>
  )
}

added that to the App.tsx component

          .....
          <SdSession
            ticket={ticket}
            modelViewUrl={modelViewUrl}
          >
            // adding animationData component here:
            <SdSessionAnimationData />
            <SdSessionInteractionData level={interactionLevel} interactionTypes={interactionTypes}/>
            <SdSessionParameterBridge/>
            <SdSessionParameterPanel/>
          </SdSession>
         ......

Animation works, but only if I click on the object. Which suggests that it’s being initiated by the selectManager. In this example, the animation is being initiated on page load without having to click anywhere. Any idea how can I control the animation start and stop?

7

@Sebastian_Meckovski sorry I didn’t have time yet to look into this, should be able to get to it next week.