CODEWITHSUNDEEP
javascriptthree.js
xAlien95
xAlien95

Reputation: 406

Can't see Scene viewed by OrthographicCamera

my goal is to render a 2D scene on top of a 3D scene to get a simple HUD. But, as you can see in this jsFiddle, only the perspective camera seems to be rendered.

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);

}

I'm using three.js r71, WebGLRenderer. If I render a perspective scene on a perspective scene, I can see both.

Am I missing something important?
Thanks in advance.

Upvotes: 1

Views: 287

Answers (1)

Adam Finley
Adam Finley

Reputation: 1610

The image URL you are giving to three.js isn't what you think it is. If you check out console we see:

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

Obviously that image doesnt exist - I'm guessing it's because of the way JSFiddle sandboxes the app.

You'll have to use a different image. Unfortunately this is a little difficult because of CORS, so I'd recommend following the suggestions here: How to make JSFiddle of sprites using THREE.JS source and image files from Github?

Upvotes: 1

Related Questions