Три js в классе

Question

Я попытался установить все необходимые функции в один класс, чтобы создать простую сцену three.js с кубом. Я не получаю никаких ошибок, но сцена остается черной, когда я открываю ее в браузере. Вот мой код:

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. или отодвинуть камеру!