Three.js 不渲染元素答案

【问题标题】：Three.js not rendering elementsThree.js 不渲染元素
【发布时间】：2018-08-07 12:21:13
【问题描述】：

我正在使用带有 typescript 的模块化 Three.js。它创建了场景，但没有在画布上渲染任何元素。这是我的代码：

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()

【问题讨论】：

标签： javascript typescript three.js

【解决方案1】：

它没有渲染任何东西，因为你没有告诉它。

如果您查看“入门”文档https://threejs.org/docs/#manual/introduction/Creating-a-scene，您应该注意您只是在执行“创建场景”部分。

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

某处，某事需要调用yourAppInstance.renderer.render() 方法。您可以将 App 实例存储在变量中

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

}

【讨论】：