CODEWITHSUNDEEP
three.js
John Goodman
John Goodman

Reputation: 23

THREE.js CanvasRenderer with the OrthographicCamera

I'm just beginning to experiment with THREE.js. I'm trying different combinations of renderers and cameras.

I can render a simple animation using the WebGLRenderer and the OrthographicCamera or the CanvasRenderer and the PerspectiveCamera. But if I use the CanvasRenderer with the OrthographicCamera I don't see any image rendered.

Should the CanvasRenderer work with the OrthographicCamera? Fiddles that work are here:

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

http://jsfiddle.net/fXsKq/ - Canvas/Perspective - OK

This is the code that fails:

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

Upvotes: 1

Views: 2903

Answers (2)

김의기
김의기

Reputation: 1

  • Reference : WebGLRenderer() & PerspectiveCamera()

  • List item

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

Upvotes: 0

WestLangley
WestLangley

Reputation: 104793

For CanvasRenderer, when using OrthographicCamera, the near plane must be negative.

This appears to be a bug.

EDIT: This bug has been fixed. The near plane should always be positive now.

three.js r.55

Upvotes: 1

Related Questions