Utilisation de Three.js STL avec chargeur angulaire

Question

je suis en train d'obtenir une simple toile pour charger un simple fichier stl sur un projet angulaire et ne semble pas être en mesure d'obtenir ce travail ...

J'ai essayé de nombreux guides et rien ne semble fonctionner. lors de l'utilisation de javascript natif avec le même type de code, il fonctionne parfaitement.

J'ai une toile avec un viewchild: <canvas #myCanvas></canvas> dans mon html.

Dans mon fichier .ts:

import {Component, ViewChild, AfterViewInit} from '@angular/core'; 
import * as THREE from 'three'; 
var OrbitControls = require('three-orbit-controls')(THREE) 
var STLLoader = require('three-stl-loader')(THREE) 
var loader = new STLLoader() 
import Scene = THREE.Scene; 
import Mesh = THREE.Mesh; 
import PerspectiveCamera = THREE.PerspectiveCamera; 
import WebGLRenderer = THREE.WebGLRenderer; 
import TrackballControls = THREE.TrackballControls; 
import {log} from "util"; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements AfterViewInit{ 
    ngAfterViewInit(): void { 
    this.myCanvas.nativeElement.style.background = "grey"; 
    this.myCanvas.nativeElement.style.width="1000px" 
    this.myCanvas.nativeElement.style.height="500px" 
    } 

    @ViewChild("myCanvas") myCanvas; 
    private scene: Scene; 
    private camera: PerspectiveCamera; 
    private renderer: WebGLRenderer; 
    private controls: TrackballControls; 
    title = 'app works!'; 
    constructor(){ 
    this.init3D(); 
    } 
    init3D(){ 
    log("init3D") 
    // renderer 
    this.renderer = new THREE.WebGLRenderer({alpha: true, canvas: this.myCanvas}); 
    log(""+window.innerWidth+" "+ window.innerHeight) 
    this.renderer.setSize(window.innerWidth, window.innerHeight); 

    // scene 
    this.scene = new THREE.Scene(); 
    this.scene.background = new THREE.Color(0xFFFFFF); 

    // camera 
    this.camera = new THREE.PerspectiveCamera(35, window.innerWidth/window.innerHeight, 0.01, 10000); 

    this.camera.position.set(113, 111, 113); 
    this.scene.add(new THREE.AmbientLight(0x222222)); 

    this.scene.add(this.camera); // required, because we are adding a light as a child of the camera 

    // controls 
    this.controls = OrbitControls; 

    // lights 

    var light = new THREE.PointLight(0xffffff, 0.8); 
    this.camera.add(light); 

    loader.load('./assets/plate.stl', geometry => { 
     var material = new THREE.MeshNormalMaterial() 
     var mesh = new THREE.Mesh(geometry, material) 
     log(this.scene.toJSON()) 
     this.scene.add(mesh) 
    }) 

    this.animate(); 

    window.addEventListener('resize', this.onWindowResize, false); 
    } 

    animate() { 

    window.requestAnimationFrame(_ => this.animate()); 

    this.camera.lookAt(this.scene.position); 

    this.renderer.render(this.scene, this.camera); 

    } 

    onWindowResize() { 

    this.camera.aspect = window.innerWidth/window.innerHeight; 

    this.camera.updateProjectionMatrix(); 

    this.renderer.setSize(window.innerWidth, window.innerHeight); 

    } 

} 

Je reçois aucune erreur, mais il n'y a rien dans ma toile lorsque la ligne d'arrivée de page pour charger. Qu'est-ce qui me manque ici?

Answer 1

Je l'ai eu à courir, je poste un code de travail si quelqu'un en aura besoin à l'avenir.

Le problème était que ma toile n'était pas encore initialisée, quand j'ai déplacé l'initialisation 3d à "ngAfterViewInit" cela a fonctionné.

utiliser le code que vous devez exécuter ce installe:

npm i --save three 
npm i @types/three --save-dev 
npm i --save three-stl-loader 
npm i --save three-orbit-controls 

dans le fichier .html:

<canvas #myCanvas></canvas> 

dans le fichier .ts:

import {Component, ViewChild, AfterViewInit, OnInit, Renderer2, Input} from '@angular/core'; 
import * as THREE from 'three'; 
var OrbitControls = require('three-orbit-controls')(THREE) 
var STLLoader = require('three-stl-loader')(THREE) 
var loader = new STLLoader() 
import Scene = THREE.Scene; 
import Mesh = THREE.Mesh; 
import PerspectiveCamera = THREE.PerspectiveCamera; 
import WebGLRenderer = THREE.WebGLRenderer; 
import TrackballControls = THREE.TrackballControls; 

@Component({ 
    selector: 'app-stl-loader', 
    templateUrl: './stl-loader.component.html', 
    styleUrls: ['./stl-loader.component.css'] 
}) 
export class StlLoaderComponent implements OnInit { 

    @ViewChild("myCanvas") myCanvas:any; 
    @Input() 
    private path:string; 
    private scene: Scene; 
    private camera: PerspectiveCamera; 
    private renderer: WebGLRenderer; 
    private controls: any; 

    ngOnInit(): void { 
    //add listener for the resize of the window - will resize the renderer to fit the window 
    let global = this.render.listen('window', 'resize', (evt) => { 
     this.onWindowResize(); 
    }) 
    } 

    ngAfterViewInit(): void { 
    this.init3D(); 
    } 
    constructor(private render: Renderer2){ 

    } 
    init3D(){ 
    // renderer 
    this.renderer = new THREE.WebGLRenderer({alpha: true, canvas: this.myCanvas.nativeElement}); 
    this.renderer.setSize(window.innerWidth, window.innerHeight); 

    // scene 
    this.scene = new THREE.Scene(); 
    this.scene.background = new THREE.Color(0xFFFFFF); 

    // camera 
    this.camera = new THREE.PerspectiveCamera(35, window.innerWidth/window.innerHeight, 0.01, 10000); 
    this.camera.position.set(113, 111, 113); 
    this.camera.aspect = window.innerWidth/window.innerHeight; 
    this.scene.add(new THREE.AmbientLight(0x222222)); 
    this.scene.add(this.camera); // required, because we are adding a light as a child of the camera 

    // controls 
    this.controls = new OrbitControls(this.camera,this.renderer.domElement); 

    // lights 
    var light = new THREE.PointLight(0xffffff, 0.8); 
    this.camera.add(light); 

    loader.load(this.path, geometry => { 
     var material = new THREE.MeshPhongMaterial({ color: 0xBEBEBE }); 

     var mesh = new THREE.Mesh(geometry, material); 
     this.scene.add(mesh) 
    }) 

    //request animation 
    this.animate(); 

    } 

    /** 
    * render the scene and request the window animation frame 
    */ 
    animate() { 

    this.camera.lookAt(this.scene.position); 

    this.renderer.render(this.scene, this.camera); 

    window.requestAnimationFrame(_ => this.animate()); 

    } 

    /** 
    * will resize the renderer and the camera to the right size of the window 
    */ 
    onWindowResize() { 

    this.camera.aspect = window.innerWidth/window.innerHeight; 

    this.camera.updateProjectionMatrix(); 

    this.renderer.setSize(window.innerWidth, window.innerHeight); 

    } 

} 

le chemin au fichier STL est donné en entrée au composant.

Raz