rgalindox Posted July 25, 2017 Share Posted July 25, 2017 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!!!!! Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted July 25, 2017 Share Posted July 25, 2017 Hey you should configure your tsc to not generate modules Quote Link to comment Share on other sites More sharing options...
brianzinn Posted July 26, 2017 Share Posted July 26, 2017 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 Quote Link to comment Share on other sites More sharing options...
rgalindox Posted July 26, 2017 Author Share Posted July 26, 2017 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.