2015-09-08 22 views
1

我的目標是渲染3D場景頂部的2D場景以獲得簡單的HUD。 但是,正如你在這個jsFiddle中看到的那樣,只有透視相機似乎被渲染。看不到OrthographicCamera查看的場景

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。如果我在透視場景中渲染透視場景,我可以看到兩者。

我錯過了一些重要的東西嗎?
在此先感謝。

+1

其中是'../img/logo.png'來自您的小提琴嗎? – gaitat

+0

是jsFiddle上的唯一圖像,它位於左上方的徽標背景中。 – xAlien95

回答

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?

+0

非常感謝! – xAlien95