1

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

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

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

http://jsfiddle.net/PXxLq/ - WebGL/Orthographic - 好的

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

2 回答 2

1

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

这似乎是一个错误。

编辑：这个错误已被修复。近平面现在应该总是积极的。

三.js r.55

于 2013-01-05T16:35:57.673 回答
0
  • 参考：WebGLRenderer() & 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>
于 2015-04-11T09:53:25.623 回答