尝试渲染立方体时 Three.js 错误“相机不是 THREE.Camera 的实例”

Question

我正在尝试制作一个小型“引擎”，使我能够使用 Three.js 轻松创建和定位对象。到目前为止，我已经能够设置场景、渲染器和相机，一切似乎都工作正常，直到我尝试渲染立方体并将其附加到场景中。

我能够创建立方体并将其附加到我的场景中，但是当我尝试在 Three.js 中使用 render() 函数时，我的代码似乎失败并收到错误：

THREE.WebGLRenderer.render: camera is not an instance of THREE.Camera.

但我不太确定为什么。我在网上找不到太多关于此错误的信息，所以我希望这里有人能指出我正确的方向。

在进行故障排除时，我尝试将多维数据集输出到控制台，看看是否可以从中获取任何有用的信息。看起来它很好地附着在我的场景上，并且我的场景和相机都显示为立方体的父对象。

这是代码：

function spnScene(alias, fov, x, y, z) {
    window.spnCreateScene = new THREE.Scene();
    var WIDTH = window.innerWidth, HEIGHT = window.innerHeight;

    if (alias == false) {
        console.warn('spnRenderer scene antialias set to ' + alias + ". Please check your code to make sure it's correct.");
    }

    spnRenderer = new THREE.WebGLRenderer({
        antialias: alias
    });
    spnRenderer.setSize(WIDTH, HEIGHT);
    document.body.appendChild(spnRenderer.domElement);

    // create camera

    spnCamera = new THREE.PerspectiveCamera(fov, WIDTH / HEIGHT, 2000);
    spnCamera.position.set(x, y, z);
    spnCreateScene.add(spnCamera);
}

function spnBasicCube(material, clr, l, w, depth, x, y, z) { // draw a basic cube and render it
    if (material == "basic") {
        var spnBasicCube = new THREE.Mesh(new THREE.CubeGeometry(l, w, depth), new THREE.MeshBasicMaterial({color: clr}));
        spnBasicCube.position.x = x;
        spnBasicCube.position.y = y;
        spnBasicCube.position.z = z;
        spnCreateScene.add(spnBasicCube);

        spnRenderer.render(spnBasicCube);

        console.log(spnBasicCube);

        // this should end up making a cube but throws an error rn
    }
}

我希望有人能帮助我！谢谢！:)

Answer 1

不渲染立方体

spnRenderer.render(spnBasicCube);

但用相机渲染场景：

spnRenderer.render(spnCreateScene, spnCamera);

请参阅文档THREE.WebGLRenderer.render：

.render ( scene : Scene, camera : Camera ) : null

使用相机渲染场景。