Typescript noob question

Questions
1

Help a noob feel good :slight_smile:

Trying to use Typescript but I am wondering how to load a mesh using the SceneLoader

var scene = new Scene(engine);

BABYLON.SceneLoader.ImportMesh( 'china', './public', 'china.gltf', scene, function(s) { // Error: .Scene' is not assignable to parameter of type 'BABYLON.Scene'. });

It’s clear that BABYLON.Scene and new Scene(engine) are not the same type, so which type/API should I be using?

Thanks

2

it looks like you are mixinig import and global usage of Babylon creating the issue. You should also import the SceneLoader or use everything through namespace :slight_smile:

1 Like
3

I figured this much, maybe I should avoid TypeScript altogether when it comes to BabylonJS. All samples are using vanilla JS.

4

Code in the samples is so different from…

import {
    Engine
} from "@babylonjs/core/Engines/engine";
import {
    Scene
} from "@babylonjs/core/scene";
import {
    Vector3
} from "@babylonjs/core/Maths/math";
import {
    FreeCamera
} from "@babylonjs/core/Cameras/freeCamera";
import {
    HemisphericLight
} from "@babylonjs/core/Lights/hemisphericLight";
import {
    Mesh
} from "@babylonjs/core/Meshes/mesh";

import {
    GridMaterial
} from "@babylonjs/materials/grid";

// import "@babylonjs/core/Meshes/meshBuilder";

import {
    GLTF2, GLTFFileLoader, GLTFValidation
} from "@babylonjs/loaders/glTF";

(async () => {
    const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
    const engine = new Engine(canvas);


    const scene = new Scene(engine);
    const camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);

    camera.setTarget(Vector3.Zero());
    camera.attachControl(canvas, true);


    const light = new HemisphericLight("light1", new Vector3(0, 1, 0), scene);
    light.intensity = 0.7;

    // Create a grid material
    const material = new GridMaterial("grid", scene);
    const sphere = Mesh.CreateSphere("sphere1", 16, 2, scene);
    sphere.position.y = 2;
    sphere.material = material;

    // Our built-in 'ground' shape. Params: name, width, depth, subdivs, scene
    const ground = Mesh.CreateGround("ground1", 6, 6, 2, scene);
    ground.material = material;

    // const validator = new GLTFValidation();
    const validations = await GLTFValidation.ValidateAsync("sample", "./public/", "china.gltf", ((url: string) => {
        console.log('here!!!', url);
        return new Promise((resolve, reject) => {
            return resolve(new ArrayBuffer(0));
        });
    }));

    // Render every frame
    engine.runRenderLoop(() => {
        scene.render();
    });
})();
5

Hi @nolascoin and welcome to the forum from me. This might prove useful if you want to work in typescript GitHub - pandadelphin/babylonjs-typescript-webpack-starter: babylonjs-typescript-webpack-starter

1 Like
6

I think I made the wrong turn sort of speak. The example illustrated here
https://doc.babylonjs.com/features/es6_support

It is not what the majority of the examples illustrate. E.g.

this._canvas = <HTMLCanvasElement>document.getElementById(canvasElement);
this._engine = new BABYLON.Engine(this._canvas, true);
this._scene = new BABYLON.Scene(this._engine);

For newcomers wanting to use TypeScript, should we use the BABYLON.* or GitHub - pandadelphin/babylonjs-typescript-webpack-starter: babylonjs-typescript-webpack-starter?

BTW, that link helped… thank you

7

How well do you know Typescript?

There are playgrounds that use Typescript Introduction to the Playground - Babylon.js Documentation however the full Babylonjs is preloaded.

Personally although I know there are efficiency benefits, especially for large projects, I rarely use Typescript. I haven’t fully got comfortable with modules and compiling to Javascript before I can test what I have written.

8

I am quite comfortable with TS and its tooling. As a new user, I went straight to Babylon.js ES6 support with Tree Shaking | Babylon.js Documentation which doesn’t use the BABYLON namespace and yet all the samples do – so, that’s a head scratcher.

For new projects, I guess the best choice is to use the BABYLON namespace even with TS, but I am still intrigued if the team is encouraging the use of es6_support for future projects.

Links related to my question

9

Ok I got it to load the OBJ after some reading. Using es2017, esNext, and TS 3.9.3.

import { Engine } from "@babylonjs/core/Engines/engine";
import { Scene } from "@babylonjs/core/scene";
import { Vector3 } from "@babylonjs/core/Maths/math";
import { FreeCamera } from "@babylonjs/core/Cameras/freeCamera";
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
import { Mesh } from "@babylonjs/core/Meshes/mesh";
// Required side effects to populate the Create methods on the mesh class. Without this, the bundle would be smaller but..
import "@babylonjs/core/Meshes/meshBuilder" 
import { GridMaterial } from "@babylonjs/materials/grid";
import { SceneLoader } from "@babylonjs/core/Loading";


import "@babylonjs/loaders";

(async () => {
    const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
    const engine = new Engine(canvas);

    const scene = new Scene(engine);
    const camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);

    camera.setTarget(Vector3.Zero());
    camera.attachControl(canvas, true);

    const light = new HemisphericLight("light1", new Vector3(0, 1, 0), scene);
    light.intensity = 1.0;

    // Create a grid material
    const material = new GridMaterial("grid", scene);
    
    // Our built-in 'ground' shape. Params: name, width, depth, subdivs, scene
    const ground = Mesh.CreateGround("ground1", 6, 6, 2, scene);
    ground.material = material;


    await SceneLoader.ImportMeshAsync("", "./public/", "shape.obj", scene, (prog)=> {
        console.log(prog.loaded);
    }, ".obj");

    // Render every frame
    engine.runRenderLoop(() => {
        scene.render();
    });
})();
1 Like
10

Yup exactly this.

The goal is really simply to reduce the size of your output. If you do not mind it during your dev. you could use the none es version (babylonjs - npm)

and import * as BABYLON from “babylonjs”;

to get closer from the samples.