Sign in to follow this  
Winter God

Babylon with .ts and MEAN

Recommended Posts

[ 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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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;
    }


  }


 

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.