クラス内の3つのjs

Question

キューブ付きのシンプルなthree.jsシーンを作成するために、必要なすべての機能を1つのクラスに設定しようとしました。私はエラーはありませんが、ブラウザで開くとシーンが黒く表示されます。 は、ここに私のコードです：

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); 
} 

} 

そして私は、新しいオブジェクトをインスタンス化し、シーンにオブジェクトを追加してみてください。シーンの子を印刷しようとすると、正しいオブジェクトが返されますが、前に述べたように、シーンは黒いままです。レンダラウィンドウだけがブラウザに描画されます。

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) 

Answer 1

私は答えを得ました。

このコードの問題は、BoxGeometryが大きすぎてカメラがボックスの内側にあることでした。クリッピングが1に設定されていると、レンダリングさえできません。 解決策は、より小さなBoxGeometryを設定することです。またはカメラを遠ざけるために！