three.js以相同的视角显示3d对象

时间:2014-04-01 07:43:00

标签: javascript three.js

我是three.js的新手, 我想要实现的是具有多个具有相同视角的立方体

var g = new THREE.CubeGeometry(200, 200, 200, 1, 1, 1);                
cube1 = new THREE.Mesh(g, new THREE.MeshFaceMaterial(materials));
cube1.position.set(0,0,0);
cube2 = new THREE.Mesh(g, new THREE.MeshFaceMaterial(materials));
cube2.position.set(300,0,0);

这将给我x对齐立方体,但立方体2稍微旋转! 关于寻找什么的建议真的很有帮助,谢谢!

2 个答案:

答案 0 :(得分:0)

创建一个创建多维数据集的函数,然后在循环中调用它。没有经过测试,但是这样的事情会给你带来理想的结果:

// Function to create cubes
function create_cube(x,y,z,rx,ry,rz,color) {
    var geometry, material;
    geometry = new THREE.CubeGeometry(5,5,5);
    material = new THREE.MeshLambertMaterial({color: color});
    cube = new THREE.Mesh(geometry, material);
    cube.position.x += x;
    cube.position.y += y;
    cube.position.z += z;
    cube.rotation.x += rx;
    cube.rotation.y += ry;
    cube.rotation.z += rz;
    cube.castShadow = true;
    return cube;
}

// Create 10 cubes
var n=10;
for (var i = 0; i < n; i++) {
    cube = create_cube(10*i,10*i,10*i,i,i,i,0xffffff);
    scene.add(cube)
}

您可以使用i的值来控制每个连续立方体与上一个立方体的不同之处。

答案 1 :(得分:0)

使用正交相机代替透视相机。您的相机初始化将如下所示:

var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, near, far );

其中宽度和长度是画布的尺寸。近和远定义距离摄像机的最大距离和最小距离(不在此范围内的对象将不会渲染)

相同尺寸和旋转的正交相机盒无论位置如何都会显得完全相同。