Hello Forma Team!,
We are currently working on a feature that involves the Forma canvas, and I am looking to implement a feature similar to the place markers seen in Google Maps (akin to pins). The goal is to show a list of markers to the canvas (based on an array of coordinates) and enable interactions such as clicking, removing, and moving them around within the canvas.
Some approaches i took:
- Using the Render Api and the addMesh() method (see code below) where I created a shape of a pyramid to represent a specific point in the canvas but the downside is that the object created is not interactable , meaning you cannot click on it and get an event it is a hustle to create the shape of a map marker. Also the canvas gets cleaned when exiting the extension.
const geometryData = {
position: new Float32Array([
-5, -5, 0,// triangle 1 (0,1,2)
5, -5, 0,
5, 5, 0,
....
]),
color,
}
if (point && point.x && point.y) {
const res = await Forma.render.addMesh({
geometryData,
transform: [
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
point.x, point.y, elevation + 20, 1
]
});
}
2. Uploading a GLB as library item and use it inside the canvas. This I have not managed to implement successfully .
I am uploading a 3D model of a marker using the integrateElements.uploadFile() method, the file gets uploaded successfully , but I have not managed to successfully display the uploaded GLB file as a marker on the canvas.Attempts to use createElementHierarchy() to integrate the library item have not yielded visible results on the canvas.
Given these attempts, I would greatly appreciate your insights on the approaches I've taken
Are there improvements or alternative methods you would recommend?
Thanks you kindly
Giannis