Winter God

Members
  • Content Count

    6
  • Joined

  • Last visited

  1. Winter God

    Babylon with .ts and MEAN

    Just confirmed this is happening in 3.3.0 version but not in 4.0.0
  2. Winter God

    Babylon with .ts and MEAN

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

    Babylon with .ts and MEAN

    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; } }
  4. Winter God

    Babylon with .ts and MEAN

    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.
  5. Winter God

    Babylon with .ts and MEAN

    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.
  6. Winter God

    Babylon with .ts and MEAN

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