Recommended Posts

Hi,

I was able to make scenes using vanilla javascript and BabylonJS. Now I want to refactor all in Typescript as my background is with C#.

Anyone has an example how to import a class from another file including what loader do you use, I'm getting this error on the web browser:

Uncaught ReferenceError: define is not defined at game.js

 

This are extract of the files:

 

index.html

<!DOCTYPE html>
<head>
    <script src="js/babylon.3.0.js"></script>
<script src="js/hand-1.3.7.js"></script>
<script src="./scripts/game.js"></script>
<style>
 
game.ts
 
/// <reference path=".././js/babylon.3.0.d.ts"/>
import { SceneUtils } from './sceneutils';
 
class Game {
private _canvas: HTMLCanvasElement;
private _engine: BABYLON.Engine;
private _scene: BABYLON.Scene;
private _camera: BABYLON.ArcRotateCamera;
private _light: BABYLON.Light;
 
constructor(canvasElement : string) {
// Create canvas and engine
this._canvas = <HTMLCanvasElement>document.getElementById(canvasElement);
this._engine = new BABYLON.Engine(this._canvas, true);
}
 
createScene() : void {
console.log("Start create scene");
// create a basic BJS Scene object
this._scene = new BABYLON.Scene(this._engine);
 
// create a FreeCamera, and set its position to (x:0, y:5, z:-10)
//this._camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), this._scene);
 
this._camera = new BABYLON.ArcRotateCamera('camera1', 0, 0, 0, BABYLON.Vector3.Zero(), this._scene);
this._camera.setPosition(new BABYLON.Vector3(0, 15, -30));
 
 
// target the camera to scene origin
this._camera.setTarget(BABYLON.Vector3.Zero());
 
// attach the camera to the canvas
this._camera.attachControl(this._canvas, false);
 
// create a basic light, aiming 0,1,0 - meaning, to the sky
this._light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), this._scene);
 
// create a built-in "sphere" shape; with 16 segments and diameter of 2
let sphere = BABYLON.MeshBuilder.CreateSphere('sphere1',
{segments: 16, diameter: 2}, this._scene);
 
// move the sphere upward 1/2 of its height
sphere.position.y = 1;
 
// create a built-in "ground" shape
let ground = BABYLON.MeshBuilder.CreateGround('ground1',
{width: 6, height: 6, subdivisions: 2}, this._scene);
 
 
}

 

sceneutils.ts

/// <reference path=".././js/babylon.3.0.d.ts"/>
 
export class SceneUtils
{
constructor(){}
 
public SetSceneBackground(backgroundColor: string, scene): void
{
scene.clearColor = new BABYLON.Color3(1,0,0);
}
 
public GetCurrentBKColor(): string
{
return '#556789';
}
}

 

If I don't use the import declaration in game.ts, I don't get any errors and I can see my scene. However my project will have a lot of classes that I need to import in game.ts and other files. I was playing with require.js but I can't make it work.

Thank you very much for your feedback!!!!!

 

 

Share this post


Link to post
Share on other sites

Since you are a c# dev looking to build a BJS project in typescript - I have a github repo that might interest you.  It's a c# MVC project that uses webpack and will bundle all the TypeScript files you import automatically.  The way you are doing it now may be easier for addons (like GUI), but otherwise you would import even babylons JS as a node module.

https://github.com/brianzinn/dotnet-new-babylonjs-starte

Share this post


Link to post
Share on other sites
3 minutes ago, brianzinn said:

Since you are a c# dev looking to build a BJS project in typescript - I have a github repo that might interest you.  It's a c# MVC project that uses webpack and will bundle all the TypeScript files you import automatically.  The way you are doing it now may be easier for addons (like GUI), but otherwise you would import even babylons JS as a node module.

https://github.com/brianzinn/dotnet-new-babylonjs-starte

Thank you very much! I appreciate your help.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.