Hi,
I would like to add functionality of creating curve as it is shown in this ShapeDiver API webinar https://www.youtube.com/watch?v=d4wUdc4G5sE at time 51:48 (creating classroom for the classroomdesigner.spaceforme.co.uk website). How to do that? How grasshopper definition for creating polygonal line should look like ?
What API developer should look in ShapeDiver docs for creating this? Interactions part 1,2,3? Interactions - Part 1 ?
Thanks in advanced,
Bojan
The curve drawing tool shown at 51:48 is a part of one of a specific web application and was created independently from ShapeDiver. The only ShapeDiver-related step consists in exporting the curve description as a JSON object and importing it in a ShapeDiver model using a text input component to drive the geometry created in Grasshopper.
If you want to work strictly inside the 3D viewer of Shapediver, you can take a look at this code example, and the interactions part of the documentation that you are mentioning.
Note that we are working on a Grasshopper-only way to create interactive points and lines in the viewer, I will update this topic once this feature is released.
Thanks Mathieu,
Ok. If I want to stay inside viewer of ShapeDiver and use functionality from code example that you show me (bench with the shape controlled with points), how to export curve as a JSON? Should I use “Direct data output” component? Or should I use construct JSON? Can you send some grassshopper example code or send some reference/link?
Thanks in advanced
There are many ways to do this, depending on your application. In the code example above, a Direct Text Input component is used to import a JSON object with the point locations:
On the output side, a list of spheres is sent to a display component, in which we stored attributes to identify each of them:
The viewer API can now be used to find the spheres according to this naming scheme and make them draggable, as you can see in the code.
Great thanks! Second example is perfect for me.
Hi, I tried to implement dragable object to ShapeDiver API and create grasshopper definition as it is shown on image. However, my web developer can’t see the atribute sphere. Am I doing something wrong?
Please post a full example, in particular including the output and/or display components which you send the geometry to. The above screenshot is not sufficient to help, in particular because the geometry including attributes does not seem to be connected to further output components.
Dragable object test.gh (23.5 KB)
I didn’t from your previous example, what kind of output do I need further, in order to be readable in API. I am sending grasshopper definition attached.
Thanks in advanced,
Bojan
This example seems to be correct. Please give more information about how your developer is not able to find the various named assets using the API. There are several examples on how to do that in our documentation.
She says she can see glTFDisplay and Item but no spheres. She tried to find spheres using getOutputByName with all these names Spheres, Sphere_1 … but returns undefined.
const sphereOutput = session.getOutputByName(“Spheres”)[0];
Hello @Bojan_T,
as the item you want to access is not an output, you have to do it a bit differently. I created a small example where you can search for nodes within an output by name. In this way you can find the correct spheres you are searching for. Here is the example.
You can also search for nodes with a RegExp as I show in this advanced example.
Cheers, Michael
Hi,
We are still struggle with creating interaction without success. We want to do exact same thing as it is given on this example: https://codesandbox.io/p/sandbox/simple-sphere-dragging-db5bsh
( few spheres that affect the design as in this case )
I made very simple grasshopper code with 2 spheres, name them as in this example, use/copy your code example and just replace the ticket to see if it works, but didn’t get any interaction at all.
Can you send me grasshopper definition that corresponds with this ShapeDiver API example, so we can see how shapediver outputs are defined and named in grasshopper definition. (the code with 5 spheres that change the shape of the curve is sufficient, the bench part is not necessary).
Thanks in advanced.
Here is a Grasshopper file that contains the whole workflow to create draggable spheres and use them to display a spline curve.
240404_PointDragging.gh (10.1 KB)
I just uploaded this file on ShapeDiver and replaced the ticket in the code sandbox, everything worked as expected.
Please let me know if this solves your issue and if it does, I would appreciate some details on which part of the process was not clear and could be improved.
Hi Mathieu,
Thank you for code. We generate ticket from this grasshopper definition, use your example code from sandbox and replace ticket with new one generated on my account, but it works only for one drag. After moving one sphere, it doesn’t work/interact anymore.
You can test it here: ShapeDiver Sandbox
One more thing: There is flowbite.js in index.html. Our scene can not be loaded if flowbite.js is in inedex.html, so we remove it.
Hello @Bojan_T
there was a small issue in the codesandbox with a newer viewer version. You can see the updated code here. This should now work continuously!
Cheers, Michael
Hi Michael, it finaly works, thank you!
@mathieu1 Sharing grasshopper definition was crucial, because we can find problem and analize both codes. I suggest you to share other grashopper code examples at the documentation page that are related with API.
I tried to use the same method for another problem but it doesn’t work. I create ShapeDiver Grasshopper definition that generate centroid of input mesh. And I wanted to use this point as a centher of draggable sphere. Dragable sphere should change lines that connect mesh vertices and center of dragable sphere.
I am sending grasshopper code. However, After applying Michael’s code, I get 2 sphere, one that is static and another draggable that doesnt change lines. See here: Konfigurator (ignore parameters on the right side
test point.gh (15.5 KB)
)
How to make dragable sphere that change lines ( move line endpoints closest to sphere) ?
I am not sure what you are trying to achieve exactly. In your definition attached, I see several issues:
My recommendation would be to wait a few weeks until our drawing tools feature is released, which will allow this type of workflow without having to write any code. I will update this topic once the feature is released.
I wanted to avoid using text input component since that positioning points in that way is not user friendly. I wanted to get coordinate from center of imported mesh and use it as a starting point for draggable functionality.
I have error in code, I need only one output Sphere as it is in this code.
test point.gh (17.3 KB)
I will be happy to see how your new drawing tool works. Lookinf forward for update.
