javascript - 尝试渲染多维数据集时 Three.js 错误 "camera is not an instance of 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

Render a scene using a camera.