1

私はTHREE.jsを試し始めたばかりです。レンダラーとカメラのさまざまな組み合わせを試しています。

WebGLRenderer と OrthographicCamera、または CanvasRenderer と PerspectiveCamera を使用して、単純なアニメーションをレンダリングできます。しかし、OrthographicCamera で CanvasRenderer を使用すると、レンダリングされた画像が表示されません。

CanvasRenderer は OrthographicCamera と連携する必要がありますか? 機能するフィドルは次のとおりです。

http://jsfiddle.net/PXxLq/ - WebGL/Orthographic - OK

http://jsfiddle.net/fXsKq/ - キャンバス/パースペクティブ - OK

これは失敗するコードです:

<html>
<head>
<script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script>
</head>

<body>
<script>

SCREEN_WIDTH = 200;
SCREEN_HEIGHT = 200;

var ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 1, FAR = 1000;

var scene = new THREE.Scene();
// PerspectiveCamera good with CanvasRenderer
//var camera = new THREE.PerspectiveCamera(75, ASPECT, NEAR, FAR);
var camera = new THREE.OrthographicCamera( -SCREEN_WIDTH / 2, SCREEN_WIDTH / 2,   SCREEN_HEIGHT / 2, -SCREEN_HEIGHT / 2, NEAR, FAR );

var renderer = new THREE.CanvasRenderer();
// WebGLRenderer good with OrthographicCamera
//var renderer = new THREE.WebGLRenderer();

renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.CubeGeometry(50,50,50);
var material = new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true });
var cube = new THREE.Mesh(geometry, material);

scene.add(cube);
camera.position.z = 100;

function render() { 
    requestAnimationFrame(render);
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
} 

render();

</script>
</body>
</html>
4

2 に答える 2

1

の場合CanvasRenderer、 を使用するOrthographicCamera場合、near平面は負でなければなりません。

これはバグのようです。

編集: このバグは修正されました。現在、ニアプレーンは常に正である必要があります。

three.js r.55

于 2013-01-05T16:35:57.673 に答える