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:
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
private async createElementHierarchyInForma(projectId: string, fileId: string, name: string, coordinates: [number,number][]): Promise<string> {
const geom: CreateElementHierarchy.Geometry.Glb = {
type: "File",
format: "glb",
s3Id: fileId,
};
const element: CreateElementHierarchy.Element = {
id: "0000",
children: [],
properties: {
geometry: geom,
name,
category: "buildings" // e.g. site_limit / constraints
},
};
const scalingElement: CreateElementHierarchy.Element = {
id: "root",
children: [
{
id: element.id,
transform: this.createTransform(coordinates)
},
],
};
const elementHierarchy: CreateElementHierarchy = {
rootElement: scalingElement.id,
elements: { [scalingElement.id]: scalingElement, [element.id]: element }
};
const { urn } = await Forma.integrateElements.createElementHierarchy( {
authcontext: projectId,
data: elementHierarchy,
});
return urn;
}
The Transform is a standard 4x4 Matrix. You can also look it up in the SDK.
Hey Paul thanks for your reply
Is there a way to access the file Id ? Meaning if the file was uploaded successfully in the past and the etension starts how do I know the fileId so i can use it in the following code?
const geom: CreateElementHierarchy.Geometry.Glb = {
type: "File",
format: "glb",
s3Id: fileId,
};
Thanks a lot
Giannis
Can't find what you're looking for? Ask the community or share your knowledge.