this question has already been asked but it hasn’t really been effectively answered. (at least not for my issue).
I am trying to import meshes from a .glb file that was exported from blender. As I load the meshes in, I want to highlight them in the scene. I am doing this for now just to get highlighting going. I want to highlight the mesh’s family of meshes when the user moves their mouse over a mesh, and have the highlight persist if the user clicks on a mesh. When I print out the highlight layer, it seems meshes are being added, but none of the meshes are highlighted in the scene.
this is the code I have now:
//class MyComponent implements AfterViewInit
ngAfterViewInit() {
const self = this;
document.addEventListener("DOMContentLoaded", () => {
this._canvas = this.setupCanvas();
//initialize the babylon scene and engine
this._engine = new Engine(this._canvas, true);
this._scene = this.setupScene();
this.loading = false; //loading the scene is done
console.log("loading: ", this.loading);
this.hl1 = new HighlightLayer("hl1", this._scene);
if (this.modelID) {
//setTimeout(() => {
this.load();
console.log("load finished");
//}, 1000);
}
console.log("HIGHLIGHT LAYER: ", this.hl1);
// run the main render loop
this._engine.runRenderLoop(() => {
this.updateCamera(this._camera);
this._scene.render();
});
window.addEventListener("resize", function () {
self._engine.resize();
});
// hide/show the Inspector
window.addEventListener("keydown", (ev) => {
// Shift+Ctrl+Alt+I
if (ev.shiftKey && ev.ctrlKey && ev.altKey && ev.keyCode === 73) {
if (this._scene.debugLayer.isVisible()) {
this._scene.debugLayer.hide();
} else {
this._scene.debugLayer.show();
}
}
});
},false);
}
private setupCanvas(): any {
var canvas = this.renderCanvas.nativeElement;
canvas.style.width = “100%”;
canvas.style.height = “100%”;
console.log(canvas.id);
return canvas;
}
private setupScene(): any {
var scene = new Scene(this._engine);
scene.collisionsEnabled = true;
var cameraStartPos = new Vector3(2.25,1.5,0); //6ft = 1.8m
this._camera = new UniversalCamera("Camera", cameraStartPos, scene);
scene.gravity = new Vector3(0, -9.81, 0);
// camera.applyGravity = true;
this._camera.ellipsoid = new Vector3(0.1, 0.01, 0.1);
this._camera.speed = .1;
this._camera.keysDown = [83, 40];
this._camera.keysUp = [87, 38];
this._camera.keysLeft = [65, 37];
this._camera.keysRight = [68, 39];
this._camera.keysDownward = [81];
this._camera.keysUpward = [69];
this._camera.minZ = 0;
this._camera.collisionMask = 1; //check to see if needed
this._camera.checkCollisions = true;
this._camera.attachControl(true);
var light1: HemisphericLight = new HemisphericLight("light1", new Vector3(1, 1, 0), scene);
return scene;
}
//Load all necessary meshes for the environment
public async _loadAsset() {
//loads game environment
const result = await SceneLoader.ImportMeshAsync(null, "assets/babylon-models/", this.modelID, this._scene);
//const result = await SceneLoader.LoadAssetContainerAsync("assets/babylon-models/", this.modelID, this._scene);
console.log("_loadAsset()", result);
let env = result.meshes[0];
let allMeshes = env.getChildMeshes();
console.log("allMeshes", allMeshes);
return {
env: env,
allMeshes: allMeshes
}
}
public async load() {
console.log(“load reached”);
const assets = await this._loadAsset();
const self = this;
//Loop through all environment meshes that were imported
assets.allMeshes.forEach(m => {
if(m.getClassName() == "Mesh"){
var mesh = m as Mesh;
//self.hl1.addMesh(mesh.subMeshes[0].getRenderingMesh(), Color3.Green(), true);
self.hl1.addMesh(mesh, Color3.Green(), true);
}
else if(m.getClassName() == "InstancedMesh"){
var im = m as InstancedMesh;
const newMesh = im.sourceMesh.clone(im.name, im.parent)
// newMesh.position = im.position.clone();
// newMesh.rotation = im.rotation.clone(); // Make sure this is not rotationQuaternion instead
// newMesh.scaling = im.scaling.clone();
// newMesh.parent = im.parent;
// im.dispose()
newMesh.position = im.position.clone();
if(im.rotationQuaternion){
newMesh.rotationQuaternion = im.rotationQuaternion.clone();
}
newMesh.scaling = im.scaling.clone();
//self.hl1.addMesh(newMesh.subMeshes[0].getRenderingMesh(), Color3.Green(), true);
self.hl1.addMesh(newMesh, Color3.Green(), true);
}
console.log("highlights:", self.hl1);
}