Babylon with .ts and MEAN

[Winter God]

[ You can skip to the questions - at your discretion]
Hey, I am a total amateur to coding. But, I do understand and move around real fast. So, I am working on a project that is not for a game, it is an interactive portal on a web page and I need 3d rendering for that. I know a bit of java and just figured a few things about javascript. I started diving into MEAN stack. 
Why?. Sorry, for a bit of extended prologue. I am a startup founder, my domain is business and electronics. But, am an engineer and there is only one experienced coder on my team and he is working on the basics features. I want to finish the 3d side of the code so that he can integrate it into the main code when he is done. He hasn't looked into 3d scripts, WebGL & engines related topics yet. If any of you have questions why I am jumping way ahead of what I should start from, I do that a lot. It's my comfort to run before I can crawl - the only way it seems that I learn effectively...

So, my questions:
       1. To render the 3d on a webpage, I had a bit of my confusion to add Babylon either to frontend angular or backend node js. But, I started creating angular structure along with intentions of integrating Babylon into angular [ Rendering is going to happen on the front end, so I guess am on right track? ]. Still wondering about it though. 

       2. So, jumped into Typescript, ES6, Angular where I just started to understand Javascript. Anyway, I am not able to get a scene rendered still... 

 

         package.json

"private": true,
    "dependencies": {
        "@angular/animations": "~7.1.0",
        "@angular/common": "~7.1.0",
        "@angular/compiler": "~7.1.0",
        "@angular/core": "~7.1.0",
        "@angular/forms": "~7.1.0",
        "@angular/platform-browser": "~7.1.0",
        "@angular/platform-browser-dynamic": "~7.1.0",
        "@angular/router": "~7.1.0",
        "@types/jest": "^23.3.10",
        "@types/mocha": "^5.2.5",
        "babylon": "^6.18.0",
        "babylonjs": "^3.3.0",
        "babylonjs-gui": "^3.3.0",
        "babylonjs-materials": "^3.3.0",
        "core-js": "^2.5.4",
        "rxjs": "~6.3.3",
        "tslib": "^1.9.0",
        "zone.js": "~0.8.26"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "~0.11.0",
        "@angular/cli": "~7.1.1",
        "@angular/compiler-cli": "~7.1.0",
        "@angular/language-service": "~7.1.0",
        "@types/node": "~8.9.4",
        "@types/jasmine": "~2.8.8",
        "@types/jasminewd2": "~2.0.3",
        "codelyzer": "~4.5.0",
        "jasmine-core": "~2.99.1",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~3.1.1",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "~2.0.1",
        "karma-jasmine": "~1.1.2",
        "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "~5.4.0",
        "ts-node": "~7.0.0",
        "tslint": "~5.11.0",
        "typescript": "~3.1.6"
    }
}

     tsconfig.json

  
  "compilerOptions": {
    .
    .
    .
    .
    "types": [
      "babylonjs",
      "babylonjs-gui",
      "babylonjs-materials"
    ],

         app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import * as BABYLON from 'babylonjs';
import * as GUI from 'babylonjs-gui';
import 'babylonjs-materials';



import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BabylonMainComponent } from './3D Rendering/babylon-main.component';

@NgModule({
  declarations: [
    AppComponent,
    BabylonMainComponent,
    ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
    ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

   babylon-main.component.html

<div>
    <canvas #renderCanvas>
        Your browser does not support HTML5
    </canvas>
</div>
<!--<p ()="initiate(renderCanvas)"> </p>-->
<br />
<h2>3D Settings</h2>
<h4>Shape: Sphere / Cube</h4>

<textarea rows="1" [(ngModel)]="newShape"></textarea>
<br>

<button (click)='onShapeInput()'>Submit</button>

<p>{{ shape }}</p>

babylon-main.component.ts

import { Component, AfterViewInit, ViewChild } from '@angular/core';
const BABYLON = require('babylonjs');

@Component({
  selector: 'app-babylon-main',
  templateUrl: './3D Rendering/babylon-main.component.html'
})

@Component({
  selector: 'app-canvas',
  template: '<div #renderCanvas> </div>'
})
export class BabylonMainComponent implements AfterViewInit {
  @ViewChild('renderCanvas') renderCanvas: HTMLCanvasElement;
  newShape = '';
  shape = 'Sphere';
  camera; light1; light2; engine; canvas;

  ngAfterViewInit() {
   this.canvas = this.renderCanvas;
   const scene = this.initiateScene();
   this.camera = this.initiateCameraLight(scene);
   this.camera.attachControl(this.canvas, true);
   console.log('ngAfterViewInit');
   scene.render();
   const loop = this.engine.runRenderloop(function() {
     scene.render();
   });
   return loop;
  }

  initiateScene() {
    this.engine = new BABYLON.Engine(this.canvas, true);
    const scene = new BABYLON.Scene(this.engine);
    console.log('initiateScene');
    return scene;
  }

  initiateCameraLight(scene) {
    const camera = new BABYLON.ArcRotateCamera('Camera', Math.PI / 2, Math.PI / 2, 2, BABYLON.Vector3.Zero(), scene);
    // camera.attachControl(Canvas, true);
    this.light1 = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(1, 1, 0), scene);
    this.light2 = new BABYLON.PointLight('light2', new BABYLON.Vector3(0, 1, -1), scene);
    return camera;
  }


  onShapeInput() {
    this.shape = this.newShape;

  }


}

• In Babylon-main-component.ts and HTML how do I tie canvas as in how do I getElementById('renderCanvas') on the .ts 
• I believe even if I did, I would still be getting an undefined addEventListener or undefined attachControl on camera.

[Sebavan]

I am not familiar enough with angular but did you have a look at this procject ? 

They might help you with the angular<->babylon setup :

https://github.com/inigoiparragirre/ng4-babylonjs

 

[Winter God]

Yea checked it, maybe it worked when they committed it over a year and a half ago. it is on angular 4 and I am using angular 7. Even then they just converted it a couple of times and still used DOMs getElementById. Which I believe is the not the proper or efficient way to do with angular. Since then I tried few things and am stuck with this on ng serve... 

ERROR in node_modules/babylonjs/babylon.d.ts(252,5): error TS2687: All declarations of 'fullscreen' must have identical modifiers.
node_modules/babylonjs/babylon.d.ts(303,14): error TS2717: Subsequent property declarations must have the same type.  Property 'orientation' must be of type 'ScreenOrientation', but here has type 'string'.
src/app/3D Rendering/babylon-main.component.ts(2,17): error TS2580: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i @types/node`.

but I am trying to integrate jquery since that is meant for DOM or so it says on the internet.

[Guest]

This seems to be due to some breaking changes introduced by recent TypeScript versions

Can you try with bjs 4.0? We added some workarounds for this issues

[Winter God]

I would like to try out the preview, but this is why I said my background at the top. I totally don't know how to install ver 4.0 no documents and can't through npm I suppose.

[Guest]

no worry, it is already on npm: https://www.npmjs.com/package/babylonjs/v/4.0.0-alpha.10

[Winter God]

So, I have 3.3.0 version files and 4.0.0 version files separately. I had only 1 issue left with 3.3. I wasn't getting the getElementById("Canvas") right in Angular's Typescript. The same issue persists. It will take a while for me to fix jquery in 4.0.0. Some issue on my side about that. 
Meanwhile, if you could please take a look at my code. Let me know if you find anything.

Babylon-main.Component.html

<canvas id="renderCanvas">
    Your browser does not support HTML5
</canvas>

Babylon-main.Component.ts

import { Component, OnInit } from '@angular/core';
import * as BABYLON from 'babylonjs';


@Component({
  selector: 'app-babylon-render',
  templateUrl: 'Render.component.html'
})

export class RenderComponent implements OnInit {
  // $ = require('jquery');
  constructor() { }
  shape;
  // contents = $('#renderCanvas').get(HTMLCanvasElement);
  ngOnInit() {
     // console.dir(renderCanvas.canvas);
      const canvas = <HTMLCanvasElement>document.getElementById('renderCanvas');
     // const canvas = this.contents;
     const engine = new BABYLON.Engine(canvas, true);
     const scene = new BABYLON.Scene(engine);
     const camera = new BABYLON.ArcRotateCamera('Camera', Math.PI / 2, Math.PI / 2, 2, BABYLON.Vector3.Zero(), scene);
     // camera.attachControl(canvas, true);
     const light1 = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(1, 1, 0), scene);
     const light2 = new BABYLON.PointLight('light2', new BABYLON.Vector3(0, 1, -1), scene);
       // const vtShapeFinal = BABYLON.MeshBuilder.CreateSphere('sphere', {}, scene);
       //     const  mat = new BABYLON.StandardMaterial('mat', scene);
        //     mat.diffuseColor = new BABYLON.Color3(1, 0.5, 0.5);

        /*
        if (this.shape === 'box') {
             vtShapeFinal = BABYLON.MeshBuilder.CreateBox("box", { size: 0.5 }, scene);
             mat = new BABYLON.StandardMaterial("mat", scene);
            mat.diffuseColor = new BABYLON.Color3(1, 0.5, 0.5);
            vtShapeFinal.material = mat;
        } else {
            shape = "sphere";
             vtShapeFinal = BABYLON.MeshBuilder.CreateSphere("sphere", {}, scene);
             mat = new BABYLON.StandardMaterial("mat", scene);
            mat.diffuseColor = new BABYLON.Color3(1, 0.5, 0.5);
        } */

        return scene;
    }


  }

 

[Winter God]

Okay got it working. I believe it's bjs4 that solved it.

[Winter God]

15 hours ago, Winter God said:

Yea checked it, maybe it worked when they committed it over a year and a half ago. it is on angular 4 and I am using angular 7. Even then they just converted it a couple of times and still used DOMs getElementById. Which I believe is the not the proper or efficient way to do with angular. Since then I tried few things and am stuck with this on ng serve... 

ERROR in node_modules/babylonjs/babylon.d.ts(252,5): error TS2687: All declarations of 'fullscreen' must have identical modifiers.
node_modules/babylonjs/babylon.d.ts(303,14): error TS2717: Subsequent property declarations must have the same type.  Property 'orientation' must be of type 'ScreenOrientation', but here has type 'string'.
src/app/3D Rendering/babylon-main.component.ts(2,17): error TS2580: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i @types/node`.

but I am trying to integrate jquery since that is meant for DOM or so it says on the internet.

Just confirmed this is happening in 3.3.0 version but not in 4.0.0

[Guest]

Yep! This is a shame that they break things when updating TS but we will endure