Angular and babylon project

Questions
, ,
1

Hi Everyone,

I am very new to babylon, but having experience in Angular. I am going to do a POC with Angular and babylon for following concept, and need your advise on how to go ahead with.

  1. Loading a solar plant stl having boundaries drawn on which will show where the inverters and transformers are. I figured out we can do this like
    BABYLON.SceneLoader.ImportMesh("", "./files/", "uploads_files_2562013_Grassland.stl");

  2. On those boundaries, I need to draw the 3d models of inverter and transformers. The information about number of transformers and inverters will be available in a json file from which I need to read and draw. Reading json can be done in Angular. Drawing 3d models can be achieved by const fountain = BABYLON.MeshBuilder.CreateLathe. Is this correct?

  3. This json file will also have coordinates of each inverter and transformer. Can we pass those directly to created lathe like this fountain.position.x = -4;?

  4. I want to attach click event to these created models (inverters and trafos) which then will open a popup and show certain info regarding that model. How can I bind click event to these models which eventually be created dynamically?

2

Let me ping our Angular expert @brianzinn

3

hi @komal.shinde - Welcome to the forums!! Well I’m pretty decent with Vue and React, but nobody has suggested I could be considered an Angular expert before :grinning_face_with_smiling_eyes: . Most of your questions look more general as opposed to Angular specific. You’ll likely get better answers if you ask direct questions without referencing Angular and perhaps with a playground.

From what you have posted I would suggest to go with all ES6 - it will help a lot with bundle size via tree shaking. So, do not do BABYLON.MeshBuilder or BABYLON.SceneLoader and to use the @babylonjs/core NPM without the legacy import. Also, if all of your models are STL that you import from @babylonjs/loaders just the STL as a side-effect. You can read more about that in the ES6 page:
Babylon.js ES6 support with Tree Shaking | Babylon.js Documentation

Some comments as well - there are various different MeshBuilders, so it will depend on the shapes you are trying to make. After which you can assign position to the mesh itself (as you posted). For meshes clicking you can use ActionManager - you can do so when the mesh is created and also from the callback to SceneLoader. The scene itself has a pointer down, so if you track everything loaded then you can dynamically do mesh clicking from there (also can do raycasting that way, etc.) I tend to promisify all of my SceneLoader and AssetManager stuff as it’s easier to work with and can be awaited. Here is an example in TypeScript for you:

import { AbstractMesh, AnimationGroup, IParticleSystem, ISceneLoaderPlugin, ISceneLoaderPluginAsync, ISceneLoaderProgressEvent, Scene, SceneLoader, Skeleton } from "@babylonjs/core";

type Nullable<T> = T | null; // or import from BabylonJS

type SceneLoaderResponse = {
  meshes: AbstractMesh[]
  particleSystems: IParticleSystem[]
  skeletons: Skeleton[]
  animationGroups: AnimationGroup[]
}

const loadWithSceneLoader = async(rootUrl: string, sceneFilename: string, scene: Scene, pluginExtension?: string /* for only STL you can just hard-code below */): Promise<SceneLoaderResponse> => {
  const sceneLoaderPromise = new Promise<SceneLoaderResponse>((resolve, reject) => {
    const loader: Nullable<ISceneLoaderPlugin | ISceneLoaderPluginAsync> = SceneLoader.ImportMesh(
      undefined,
      rootUrl,
      sceneFilename,
      scene,
      (meshes: AbstractMesh[], particleSystems: IParticleSystem[], skeletons: Skeleton[], animationGroups: AnimationGroup[]): void => {
          resolve({
            meshes,
            particleSystems,
            skeletons,
            animationGroups
          });
      },
      (event: ISceneLoaderProgressEvent): void => {
          // you can opt-in here for progress events 
      },
      (_: Scene, message: string, exception?: any): void => {
          reject(exception ?? message);
      },
      pluginExtension
    )

    return loader;
  })
  return sceneLoaderPromise;
};

var scene: Nullable<Scene> = null;
const sceneLoaderResponse: SceneLoaderResponse = (async function() {
  const iifeResponse: SceneLoaderResponse = await loadWithSceneLoader('xx', 'yy', scene!);
  return iifeResponse;
})();

Let us know if you have more questions. I would repost the other questions directly and explicitly and the community will be able to guide you along your journey better! Cheers.

2 Likes