Search the Community

Hey guys, i'm really new in all this stuff with WebGL and 3d stuff on web. I'm trying to create an Angular 5 component where i can load and run dynamically 3d models. But i'm little bit blocked. This is my component: export class 3DComponent implements OnInit { private canvas: any; private engine: BABYLON.Engine; private camera: BABYLON.FreeCamera; private scene: BABYLON.Scene; private light: BABYLON.Light; constructor() { } ngOnInit() { this.canvas = document.getElementById('3dComponent'); this.engine = new BABYLON.Engine(this.canvas, true); this.canvas.width = window.innerWidth * .9; this.canvas.height = window.innerHeight / 2; this.createScene(); this.animate(); } public createScene(): void { this.scene = new BABYLON.Scene(this.engine); this.light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), this.scene); this.camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, -10), this.scene); this.camera.setTarget(BABYLON.Vector3.Zero()); this.canvas.style.backgroundColor = "white"; this.scene.clearColor = new BABYLON.Color4(0, 0, 0, 0); this.camera.attachControl(this.canvas, false); BABYLON.SceneLoader.Append("assets/scenes/", "microphone.gltf", this.scene, (result) => { // do something }) if (this.scene.isReady) { this.scene.updateTransformMatrix(true); } } public animate(): void { this.engine.runRenderLoop(() => { this.scene.render(); }); window.addEventListener('resize', () => { this.engine.resize(); }); } } But it doesn't work. It says: "Unable to load from assets/scenes/microphone.gltf: Failed to load scene." The path looks like to be correct. So, is the problem in my component? How should i implement functionality for that to use best practices? Thanks a lot!