javascript - 无法看到 OrthographicCamera 查看的场景

Question

我的目标是在 3D 场景之上渲染 2D 场景以获得简单的 HUD。但是，正如您在 jsFiddle 中看到的那样，似乎只有透视相机被渲染。

var camera, scene, renderer, geometry, material, mesh, sprite, rtcamera, rtscene, texture, spmaterial;

init();
update();

function init() {
    var width = window.innerWidth - 80,
        height = window.innerHeight - 80;

    scene = new THREE.Scene();
    rtscene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, width/height, 1, 10000);
    camera.position.z = 500;
    scene.add(camera);
    rtcamera = new THREE.OrthographicCamera(-width/2, width/2, height/2, -height/2, 0.1, 1000);

    geometry = new THREE.BoxGeometry(200, 200, 200);
    material = new THREE.MeshNormalMaterial();
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    var texture = THREE.ImageUtils.loadTexture('../img/logo.png');
    var spmaterial = new THREE.SpriteMaterial({
        map: texture
    });
    sprite = new THREE.Sprite(spmaterial);
    sprite.scale.set(50, 200, 1);
    rtscene.add(sprite);

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    renderer.autoClear = false;

    document.body.appendChild(renderer.domElement);

}

function update() {

    requestAnimationFrame(update);
    render();

}

function render() {

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    renderer.clear();
    renderer.render(scene, camera);
    renderer.clearDepth();
    renderer.render(rtscene, rtcamera);

}

我使用的是 Three.js r71，WebGLRenderer。如果我在透视场景上渲染透视场景，我可以看到两者。

我错过了一些重要的事情吗？
提前致谢。

Answer 1

您提供给 Three.js 的图像 URL 并不是您想象的那样。如果您检查控制台，我们会看到:

jshell.net/7Leazzja/img/logo.png 
Failed to load resource: the server responded with a status of 404 (Not Found)

显然该图像不存在 - 我猜这是因为 JSFiddle 沙箱应用程序的方式。

您必须使用不同的图像。不幸的是，由于 CORS，这有点困难，所以我建议遵循此处的建议: How to make JSFiddle of sprites using THREE.JS source and image files from Github?