Javascript Three.js不渲染元素

我将modular Three.js与typescript一起使用。它创建场景，但不在画布上渲染任何元素。以下是我的代码：

import * as THREE from 'three/build/three.module'

class App {
    private scene = new THREE.Scene();
    private camera;
    private renderer = new THREE.WebGLRenderer();
    private container = document.getElementById('widget');

    constructor() {
        this._init();
        let geometry = new THREE.BoxGeometry(1, 1, 1);
        let material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
        let cube = new THREE.Mesh(geometry, material);
        this.scene.add(cube);

    }

    _init() {
        this.camera = new THREE.PerspectiveCamera(45, this.container.clientWidth / this.container.clientHeight, 1, 1000);
        this.camera.position.z = 5;
        this.scene.add(this.camera)
        this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
        this.container.appendChild(this.renderer.domElement);
    }
}

new App()

---

它不会呈现任何东西，因为你没有告诉它

如果你看一下“入门”文档，你应该注意到你只是在做“创建场景”部分

您还需要做的是该教程中的“渲染场景”部分

在某些地方，需要调用

yourAppInstance.renderer.render（）

方法。您可以将应用程序实例存储在变量中

var myApp = new App()

myApp.renderer.render(myApp.camera, myApp.scene)

^不确定typescript是如何工作的，但您可能无法访问这些脚本

您也可以在构造函数中执行此操作

constructor() {
    this._init();
    let geometry = new THREE.BoxGeometry(1, 1, 1);
    let material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
    let cube = new THREE.Mesh(geometry, material);
    this.scene.add(cube);
    this.renderer.render(this.camera,this.scene) // <-- add this

}

constructor（）{
这个；
让geometry=new-THREE.BoxGeometry（1,1,1）；
让material=new THREE.MeshBasicMaterial（{color:0x00ff00，线框：true}）；
让立方体=新的三个网格（几何体、材质）；
this.scene.add（立方体）；
this.renderer.render（this.camera，this.scene）//