Question

我刚刚开始尝试THREE.js。我正在尝试不同的渲染器和相机组合。

我可以使用WebGLRenderer和OrthographicCamera或CanvasRenderer和PerspectiveCamera渲染一个简单的动画。但是如果我将CanvasRenderer与OrthographicCamera一起使用，我看不到任何渲染的图像。

CanvasRenderer应该与OrthographicCamera一起使用吗？有效的小提琴在这里：

http://jsfiddle.net/PXxLq/ - WebGL /正交 - 好的

http://jsfiddle.net/fXsKq/ - 画布/透视 - 确定

这是失败的代码：

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

Answer 1

对于CanvasRenderer，使用OrthographicCamera时，near平面必须为负数。

这似乎是一个错误。

编辑：此错误已得到修复。现在，近平面应该总是正面的。

three.js r.55

Answer 2

参考：WebGLRenderer（）＆amp; PerspectiveCamera（）

列出项目

<script src="build/three.min.js"></script>
<script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera
    ( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    var cube = new THREE.Mesh( geometry, material );
    scene.add( cube );

    camera.position.z = 5;

    var render = function () {
        requestAnimationFrame( render );

        cube.rotation.x += 0.1;
        cube.rotation.y += 0.1;

        renderer.render(scene, camera);
    };

    render();
</script>

THREE.js CanvasRenderer与OrthographicCamera

2 个答案: