Drei js in einer Klasse

Ich habe versucht, alle notwendigen Funktionen in eine Klasse zu setzen, um eine einfache three.js-Szene mit einem Würfel zu erstellen. Ich bekomme keine Fehler, aber die Szene bleibt schwarz, wenn ich sie im Browser öffne. Hier ist mein Code:Drei js in einer Klasse

class SceneInit { 

    constructor(fov = 45,camera,scene,controls,renderer) 
    { 
     this.camera = camera; 
     this.scene = scene; 
     this.controls = controls; 
     this.renderer = renderer; 
     this.fov = fov; 

    } 



    initScene() { 
     this.camera = new THREE.PerspectiveCamera(this.fov, window.innerWidth/window.innerHeight, 1, 1000); 
     this.camera.position.z = 15; 

     this.controls = new THREE.TrackballControls(this.camera); 
     //this.controls.addEventListener('change', this.renderScene); 

     this.scene = new THREE.Scene(); 

     //specify a canvas which is already created in the HTML file and tagged by an id  //aliasing enabled 
     this.renderer = new THREE.WebGLRenderer({canvas: document.getElementById('myThreeJsCanvas') , antialias: true}); 
     this.renderer.setSize(window.innerWidth, window.innerHeight); 
     document.body.appendChild(this.renderer.domElement); 


     //ambient light which is for the whole scene 
     let ambientLight = new THREE.AmbientLight(0xffffff, 0.7); 
     ambientLight.castShadow = false; 
     this.scene.add(ambientLight); 

     //spot light which is illuminating the chart directly 
     let spotLight = new THREE.SpotLight(0xffffff, 0.55); 
     spotLight.castShadow = true; 
     spotLight.position.set(0,40,10); 
     this.scene.add(spotLight); 


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


    animate(){ 
     requestAnimationFrame(this.animate.bind(this)); 
     this.render(); 
     this.controls.update(); 
    } 


    render(){ 
     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); 
} 

}

Und dann versuche ich, ein neues Objekt zu instanziieren und ein Objekt in die Szene. Wenn ich versuche, die Kinder der Szene zu drucken, gibt es mir die richtigen Objekte zurück, aber wie ich bereits erwähnt habe, bleibt die Szene schwarz. Nur das Renderer-Fenster wird im Browser angezeigt.

let test = new SceneInit(45); 
test.initScene(); 
test.animate(); 


let geometry = new THREE.BoxBufferGeometry(200, 200, 200); 
let material = new THREE.MeshBasicMaterial(); 
let mesh = new THREE.Mesh(geometry, material); 

test.scene.add(mesh); 
console.log(test.scene.children); //returns 3 objects (ambientLight, spotLight, mesh)

Quelle

2016-11-22 Bajro

Haben Sie versucht, Ihre Kamera _lookAt_ in die richtige Position zu bringen? Momentan bewegen Sie es in die z-Achse und ich denke, es könnte in die Leere weiter unten auf der z-Achse schauen. Versuchen Sie 'test.camera.lookAt (mesh.position)' oder 'test.camera.lookAt (test.scene.position)'. Etwas, das ich im Laufe der Zeit gelernt habe, ist jedoch, dass dies nicht wirklich beabsichtigt ist. Durch das Einbinden von Renderern etc. innerhalb einer Klasse verlieren Sie viel Flexibilität. Der Code sollte nicht so verwendet werden, und es ist einfacher, wenn Sie globale Deklarationen verwenden (jeder Renderer verwendet Speicher!) – somethinghere

Vielen Dank für die Antwort, aber es hat nicht funktioniert! Der Grund, warum ich es in eine Klasse setze, ist, weil ich eine kleine Bibliothek mache, die aus mehreren Javascript-Dateien bestehen wird, die verschiedene Diagramme darstellen. Und mit diesem Ansatz kann ich diesen Code wiederverwendbar machen => sauberer Code! – Bajro

Cleaner Code! == Besserer Code, obwohl! (Ich sage das hauptsächlich wegen der Art und Weise, wie Speicher dieses Zeug sein kann, also ist es besser, einen Renderer als zwei zu haben. Sie könnten sie mit Szenen trennen ... aber dann sind wir wieder dabei, vanilla threeJS wie beabsichtigt zu verwenden). In Bezug auf dein Problem würde ich zunächst prüfen, ob es überhaupt gerendert wird. Fügen Sie einfach eine riesige Drahtgitterkugel zu Ihrer Hauptszene hinzu und sehen Sie, ob sie auftaucht. Danach platziere einige verschiedenfarbige Würfel in verschiedene Richtungen und finde heraus, was du siehst etc ... Es dauert eine Weile, aber es hilft dir, es herauszufinden. – somethinghere

Ich habe die Antwort bekommen.

Das Problem im Code war, dass die BoxGeometry zu groß war und die Kamera in der Box war. Wenn der Ausschnitt auf 1 gesetzt ist, würde er es nicht einmal wiedergeben. Also die Lösung ist eine kleinere BoxGeometry zu setzen. oder um die Kamera weg zu bewegen!

Quelle

2016-11-22 16:11:10 Bajro

Die Lösung ist eigentlich nicht, eine kleinere Box zu setzen, um die Box _aus der Kamera zu bewegen. Drei.js, standardmäßig, zeigt nur Gesichter, die Sie von vorne betrachten (aka, Gesichter, wo die Scheitelpunkte aus der Kamera Position gegen den Uhrzeigersinn sind) – somethinghere

Bearbeitete die Antwort! – Bajro

Drei js in einer Klasse

Antwort

Verwandte Themen