Невозможно увидеть Сцену, просматриваемую OrthographicCamera

Question

Моя цель - визуализировать 2D-сцену поверх 3D-сцены, чтобы получить простой 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

URL-адрес изображения, который вы передаете three.js, не так, как вы думаете. Если вы заканчивали консоли мы видим:

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?