THREE.js CanvasRenderer with OrthographicCamera

이제 THREE.js로 실험하기 시작했습니다. 나는 렌더러와 카메라의 다른 조합을 시도하고있다.THREE.js CanvasRenderer with OrthographicCamera

WebGLRenderer와 OrthographicCamera 또는 CanvasRenderer와 PerspectiveCamera를 사용하여 간단한 애니메이션을 렌더링 할 수 있습니다. 그러나 CanvasRenderer를 OrthographicCamera와 함께 사용하면 렌더링 된 이미지가 보이지 않습니다.

CanvasRenderer가 OrthographicCamera와 작동해야합니까? 일이 여기에 있다는 바이올린 : - WebGL을/직교 - 캔버스/전망 - -

http://jsfiddle.net/fXsKq/

http://jsfiddle.net/PXxLq/ OK

이 실패 코드입니다 : CanvasRenderer를 들어

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

출처

2013-01-05 John Goodman

, OrthographicCamera을 사용하는 경우 near 평면은 음수 여야합니다.

이것은 버그 인 것 같습니다.

편집 :이 버그가 수정되었습니다. 가까운 비행기는 항상 양의 값이어야합니다.

three.js를 r.55

출처

2013-01-05 16:35:57 WestLangley

와우! 근처에 부정적인 문제가 해결되었습니다! 나는 그 행동을 버그라고 부른다. THREE.js 개발자에게 귀하의 발견을보고하셨습니까? –

버그로 신고 됨 - 문제 # 2890 –

WestLangley가 수정 함. 고맙습니다! –

참조 : 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-11 09:53:25

THREE.js CanvasRenderer with OrthographicCamera

답변

관련 문제