How to group Buffer Geometry Object in Autodesk Forge - three.js

Question

I wondering is it posssible to add group of model group from scenebuilder. Initially I used a overlay.addMesh but I wanted to interact with a custom object that I created. Unfortunately the object must be a grouping. This is my code. Nothing appear on my Viewer.
this.sceneBuilder = await this.viewer.loadExtension(
"Autodesk.Viewing.SceneBuilder"
);
this.modelBuilder = await this.sceneBuilder.addNewModel({
modelNameOverride: "Beacon",
conserveMemory: false,
});
const sphereGeometry = new THREE.BufferGeometry().fromGeometry(
new THREE.SphereGeometry(5, 8, 8)
);
const sphereMaterial = new THREE.MeshPhongMaterial({
color: new THREE.Color(0.647, 0.165, 0.165),
});
this.meshBeacon = new THREE.Mesh(sphereGeometry, sphereMaterial);
this.meshBeacon2 = new THREE.Mesh(sphereGeometry, sphereMaterial);
this.meshBeacon.matrix = new THREE.Matrix4().compose(
position1,
quaternion,
scale
);
this.meshBeacon2.matrix = new THREE.Matrix4().compose(
position2,
quaternion,
scale
);
this.group = new THREE.Group();
this.group.add(this.meshBeacon);
this.group.add(this.meshBeacon2);
console.log(this.group);
this.group.dbId = 666666;
this.modelBuilder.addMesh(this.group);

Answer 1

We need to create single Geometry first. All done by this code.
let modelGeometry = new THREE.Geometry();
const globalMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const head = new THREE.SphereGeometry(0.5, 32, 16);
const body = new THREE.SphereGeometry(0.5, 32, 16);
const textGeometry = new THREE.TextGeometry("text ID", {
font: "monaco",
size: 1,
height: 0,
curveSegments: 3,
});
textGeometry.computeBoundingBox();
const textMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const workerId = new THREE.Mesh(textGeometry, textMaterial);
const headMesh = new THREE.Mesh(head, globalMaterial);
const bodyMesh = new THREE.Mesh(body, globalMaterial);
headMesh.matrix.setPosition(new THREE.Vector3(0, 0, 3));
bodyMesh.matrix.scale(new THREE.Vector3(1, 1, 4));
// bodyMesh.matrix.scale(new THREE.Vector3(0.1, 0.1, 0.1));
modelGeometry.merge(headMesh.geometry, headMesh.matrix);
modelGeometry.merge(bodyMesh.geometry, bodyMesh.matrix);
modelGeometry.merge(workerId.geometry, workerId.matrix);