I have using a jQuery library to make a sample like moving the text on the 3D model (download the file below, extract and run the file index.html, drag the rectangle to see the result), this sample I make sample value with the value of size circle is 28 mm, the text size is 2.8 mm (this value to know how the height is it), the total text character is 14 with each character have the size is 1mm (this value to know how long the text is it). (I have used this site https://www.unitconverters.net/typography/millimeter-to-pixel-x.htm to convert mm to px to use for the width and height on the DIV of HTML), when I try to drag the rectangle in the circle to get the coordinates, but the coordinates not correct when using it to apply to the 3D model.
I have some problems:
With the value I have taken for above example, I don’t know whether these values is taken correctly or not. I just guess based on testing progress on 3D model. The font size is always is mm on the 3D model?
The size converts from mm to px may be wrong. It also makes the values of coordinates wrong too.
I don’t know how the algorithm of the ShapeDiver to calculate the coordinates and render that on the 3D model. Because with the coordinates when I applied it into the 3D model is not the same result with the result of the rectangle on the circle in the example.
Are you both coding the application and creating the Grasshopper definition? If you need to convert the position and size of your external 2D interface into model coordinates, it is up to the Grasshopper definition to correctly interpret the information coming from your application. You should try to work in Grasshopper and adapt the algorithm to make sure the data coming from the web side maps correctly to the 3D model in Grasshopper.
Alternatively, I would suggest that you drag and drop and resize the text directly in the 3D model by using the API to make elements draggable. This would remove the need to map data from an external interface.
Thank you for your answer.
Can you explain more about your suggestion above:
Alternatively, I would suggest that you drag and drop and resize the text directly in the 3D model by using the API to make elements draggable. This would remove the need to map data from an external interface.
How I can do it by drag and drop directly on the 3D model?
Thank you for your answer.
But in my case, this is a text on the 3D model, but on your tutorial, it is only for moving the single point on the 3D model. I want to move the text on the 3D model, do you have any idea for my case?
Hi @thangnm, using an external user interface to drag the text to position it and then send the data to Grasshopper is not the ideal solution. ShapeDiver supports dragging of objects directly in the viewer which will give you a response with the new object position which you can send to the model to recalculate it. You can learn how to do so in the tutorial @mathieu1suggested. However, your Grasshopper model requires a few changes to be able to support dragging of the text independently to each other. We have made this change in this new model (It is a private model so please log in your account where you will be able to see the ticket): https://app.shapediver.com/m/210104-coinconfigurator-2
There is a couple of new parameters called Show Text Placeholders and Text Placeholders Color which you can use to define how the text placeholders look. The placeholders are stored in the 3D assets named frontTextPlaceholders and backTextPlaceholders and they are a list of objects which has the same order that you provide in the parameters engravedTextFrontJSON and engravedTextBackJSON. I recommend you to hide these placeholders by using the function toggleGeometry and just show them on hover.
If you want to continue with the external user interface solution, if you need to know the exact size of the text tags or any other information, this can be easily calculated by the Grasshopper model and it can send you this data so that you can use it and have an exact link between these two user interfaces. This also requires a small change in the Grasshopper model which we have made in the mentioned link.
To access the size of the text you need to use the function getData with a filter with the name frontTextDimensions and backTextDimensions which contain an array of objects with the same order provided in the inputs. Learn more abut how to get data from a model here.
Please let me know if you have any further questions.
Hi @edsahergom, Thank you so much for your help.
I have checked on my new model, I think I don’t need 2 new parameters Show Text Placeholders and Text Placeholders Color, maybe I don’t understand about how these parameters work. Can you help me to explain why these parameters I need for my case (the moving text on model)?
I have more question, How I can calculate the length and height of the text before sending to API ShapeDiver because currently I only have 2 values after I sent the settings of the text to API and get those values from API by using the function getData, I checked with some fonts on my model with some fonts with the same value size but on the 3D model show big than other fonts? So I can not pre-calculate those values before sending to your API
For example, you can check between font Fira San with the font Digital Numbers.
The solution I recommend is to make the dragging directly in the 3D view, not using your external 2D canvas. That is why you need to have some placeholders of the text so that you can move them in the 3D viewer. The placeholders are stored in the 3d assets frontTextPlaceholdersand backTextPlaceholders and those are the ones you need to make hoverable and draggable. There is when this tutorial becomes relevant: https://support.shapediver.com/hc/en-us/articles/360030890392-Tutorial-Pick-and-Drag-Points-on-an-Object. This is just a tutorial so you need to see how to adapt it to your case.
Regarding how to get values without sending to API, there is no way as the calculation is made in the servers.
Why do you prefer to do the dragging in the 2d canvas instead of the 3d view?
With the URL tutorial, this only can add and moving the single point at the same time. With my case, I have 4 points to make a rectangle to bound the text area. So do you have any suggestion for me to adding and moving 4 points at the same time with the width and height of the rectangle not changed when moving.
About why I need to use the dragging in the 2d canvas instead of the 3d view, I have 3 reasons:
I need synchronizing with my current plugin already have on my website. I’m using cropperjs to crop an image before sending to ShapeDiver API, this extension is shown as an external interface. So that the reason why I need to do did like that.
Currently after change the coordinates the 3D model will recalculate again, so if we send many requests to ShapeDiver API the user have to wait for the lastest model to check he settings changed yet. So with my case, the user can move to somewhere he wants after the user drag end I will calculate the value of X and Y and send it into ShapeDiver API by one time.
As my explain above, I don’t know how to move 4 points at the same time with the width and height of the rectangle not changed when moving.
Hi @thangnm you dont need 4 points, you just need a single one to send to the position attribute in the engravedTextFrontJSON parameter. The tutoral simply shows how to move a point but as I said, you need to adapt this to your case. You are not moving a point, you are moving a mesh which represents a text and that mesh is the placeholders. Additionally, you dont need to send the request to update the model every single time the mesh gets dragged, you can just do it when the user is happy with the result.
