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的图片网址并非您认为的那样。如果您查看控制台，我们会看到：

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?

无法通过OrthographicCamera查看场景

1 个答案: