Integration and Development

Grasshopper ShapeDiver
1

Hi people :waving_hand:

I have a web application that have a viewer of model 3D with animations but I unknow how apply programatically the animations.

In general, the model is loaded and is make the read from outputs that have the data of animation

            const VIEWPORT = await createViewport({
                id: "product-shapediver-viewport",
                canvas: canvas,
                visibility: VISIBILITY_MODE.SESSION,
            });

            const VIEWPORT_SESSION = await createSession({
                id: `product-shapediver-session-${productSlug}`,
                modelViewUrl: "😎",
                ticket: "👀",
                throwOnCustomizationError: true,
            })

            const OUTPUT_DADOS_MOVEL = vwS.getOutputByName('dados_movel')[0].content
            const OUTPUT_DOOR_GEOMETRY = vwS.getOutputByName('door')[0].content as TModelGeometry[] | undefined
            const OUTPUT_DRAWER_GEOMETRY = vwS.getOutputByName('drawer')[0].content as TModelGeometry[] | undefined

At this moment, I don’t how get the node target from model to apply the animation data/track

have focus on the push operation in ANIMATION_DATA_DOOR/DRAWER and NODE constant


        d.forEach((mad, i) => {
                // 3 AND 2 ARE KNOW POSITION FROM STRUCTURE OF URL FROM 
                // SHAPEDIVER TO GET THE ID NODE
                const NODE_ID = OUTPUT_DOOR_GEOMETRY[i].href.split('/')[3 + 2]
                // const NODE = vwS.node.children.find(d => d.name === NODE_ID)
                const NODE = vwS.node.children?.[i] || NODE_ID

                // if (!NODE) return;

                if (mad['rotation_side']) {
                    ANIMATION_DATA_DOOR.push({
                        node: NODE as unknown as ITreeNode,
                        interpolation: 'linear',
                        pivot: [mad.point.X, mad.point.Y, mad.point.Z],
                        path: 'rotation',
                        times: [0, 2.5, 7.5, 10],
                        values: [
                            0, 0, 0,
                            14, 16, 10,
                            -90, -30, -12,
                            0, 0, 0
                        ]
                    })
                }

                if (mad['depth']) {
                    ANIMATION_DATA_DRAWER.push({
                        node: NODE as unknown as ITreeNode,
                        interpolation: 'linear',
                        pivot: [mad.point.X, mad.point.Y, mad.point.Z],
                        path: 'translation',
                        times: [0, 2.5, 7.5, 10],
                        values: [
                            0, 0, 0,
                            0, 0, (mad?.depth as number) || 0,
                            0, 0, (mad?.depth as number) || 0,
                            0, 0, 0,
                        ]
                    })
                }
            })

            const data1 = new AnimationData('doors', ANIMATION_DATA_DOOR, 0, 10)
            const data2 = new AnimationData('drawers', ANIMATION_DATA_DRAWER, 0, 10)

            data1.repeat = true
            data2.repeat = true

            console.table({ data1, tracks: ANIMATION_DATA_DOOR, 
             am:viewport.current?.animations });

            vwS.node.addData(data1)
            vwS.node.addData(data2)

            data1.startAnimation()
            data2.startAnimation()
            viewport.current?.update()

image
image1155×653 31.2 KB

Above have the constant NODE this node should be the reference that will receive the animation, a Door and a Drawer. but how i explain above, don’t know how get the node of door and drawer

Someone with a light?

2

Hello @PEDRO_GUILHERME_FARI!

Thank you for your question.

So there is two parts to doing this:

  1. On the GrassHopper side, you can use out attribute system to add a name to geometry. You can read more about that here.
  2. On the viewer side you can then read out the names via various functions in the API like getNodesByName or getNodesByNameWithRegex

Like this you can name nodes on the GrassHopper side and retrieve them on the viewer side.

Let me know if that helped you!

PS: If you are facing further coding issues, please provide a minimal example in a CodeSandBox (or something similar) so that we can debug it properly.

Cheers, Michael