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
使用相机渲染场景。

尝试呈现多维数据集时，Three.js错误“相机不是THREE.Camera的实例”

1 个答案: