Winter God

Members
  • Content Count

    6
  • Joined

  • Last visited

  1. Just confirmed this is happening in 3.3.0 version but not in 4.0.0
  2. Okay got it working. I believe it's bjs4 that solved it.
  3. 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. 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. 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. [ 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.