带正交摄影机的THREE.js画布渲染器_Three.js

带正交摄影机的THREE.js画布渲染器

three.js

带正交摄影机的THREE.js画布渲染器,three.js,Three.js,我刚刚开始尝试使用THREE.js。我正在尝试渲染器和相机的不同组合我可以使用WebGLRenderer和正交摄影机或CanvasRenderer和透视摄影机渲染简单动画。但是如果我将画布渲染器与正交摄影机一起使用，我看不到任何渲染的图像画布渲染器是否应与正交摄影机配合使用？起作用的小提琴在这里： -WebGL/正交-正常 -画布/透视图-确定这是失败的代码： <html> <head> <script src="https://raw.github.com/

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

我可以使用WebGLRenderer和正交摄影机或CanvasRenderer和透视摄影机渲染简单动画。但是如果我将画布渲染器与正交摄影机一起使用，我看不到任何渲染的图像

画布渲染器是否应与正交摄影机配合使用？起作用的小提琴在这里：

-WebGL/正交-正常

-画布/透视图-确定

这是失败的代码：

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


屏幕宽度=200；
屏幕高度=200；
变量纵横比=屏幕宽度/屏幕高度，近=1，远=1000；
var scene=new THREE.scene（）；
//透视照相机与画布渲染器配合良好
//var摄像机=新的三个透视摄像机（75，纵横比，近距离，远距离）；
var摄像机=新的三个正交摄像机（-SCREEN_WIDTH/2，SCREEN_WIDTH/2，SCREEN_HEIGHT/2，-SCREEN_HEIGHT/2，近，远）；
var renderer=new THREE.CanvasRenderer（）；
//WebGLE渲染器与正交摄影机配合得很好
//var renderer=new THREE.WebGLRenderer（）；
设置大小（屏幕宽度、屏幕高度）；
document.body.appendChild（renderer.doElement）；
var几何=新的三立方测量法（50,50,50）；
var material=new THREE.MeshBasicMaterial（{color:0x000000，线框：true}）；
var cube=新的三个网格（几何体、材质）；
场景.添加（立方体）；
摄像机位置z=100；
函数render（）{
请求动画帧（渲染）；
立方体旋转y+=0.01；
渲染器。渲染（场景、摄影机）；
} 
render（）；

对于

画布渲染器

，当使用

正交摄影机

时，平面附近的

必须为负片
这似乎是一个bug
编辑：此错误已修复。近平面现在应该总是正的
three.js r.55
对于画布渲染器
，当使用正交摄影机
时，

附近的

平面必须为负片
这似乎是一个bug
编辑：此错误已修复。近平面现在应该总是正的
three.js r.55

参考：WebGLRenderer（）&透视摄影机（）
列表项
<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>


var scene=new THREE.scene（）；
var摄像机=新的三视角摄像机
（75，window.innerWidth/window.innerHeight，0.11000）；
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var geometry=新的3.BoxGeometry（1,1,1）；
var material=new THREE.MeshBasicMaterial（{color:0x00ff00}）；
var cube=新的三个网格（几何体、材质）；
场景.添加（立方体）；
摄像机位置z=5；
var render=函数（）{
请求动画帧（渲染）；
立方体旋转.x+=0.1；
立方体旋转y+=0.1；
渲染器。渲染（场景、摄影机）；
};
render（）；


参考：WebGLRenderer（）&透视摄影机（）
列表项
<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>


var scene=new THREE.scene（）；
var摄像机=新的三视角摄像机
（75，window.innerWidth/window.innerHeight，0.11000）；
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var geometry=新的3.BoxGeometry（1,1,1）；
var material=new THREE.MeshBasicMaterial（{color:0x00ff00}）；
var cube=新的三个网格（几何体、材质）；
场景.添加（立方体）；
摄像机位置z=5；
var render=函数（）{
请求动画帧（渲染）；
立方体旋转.x+=0.1；
立方体旋转y+=0.1；
渲染器。渲染（场景、摄影机）；
};
render（）；

哇！使接近负修正了我的问题！我也会把这种行为称为虫子。您是否已向THREE.js开发人员报告了您的发现？报告为错误问题#2890已由WestLangley修复。非常感谢。哇！使接近负修正了我的问题！我也会把这种行为称为虫子。您是否已向THREE.js开发人员报告了您的发现？报告为错误问题#2890已由WestLangley修复。非常感谢。