我的目標是渲染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。如果我在透視場景中渲染透視場景,我可以看到兩者。
我錯過了一些重要的東西嗎?
在此先感謝。
其中是'../img/logo.png'來自您的小提琴嗎? – gaitat
是jsFiddle上的唯一圖像,它位於左上方的徽標背景中。 – xAlien95