Three.js 等距立方体，大小与平铺尺寸128x128不匹配

我一直在尝试在晚上的大部分时间制作一个导出代码，该代码可以让我快速对立方体进行纹理处理并将它们导出到我正在制作的游戏中，但由于某些原因，我无法使我的立方体覆盖我想要的整个128x128宽度和高度

我有以下代码：

    function init(){

        if( Detector.webgl ){
            renderer = new THREE.WebGLRenderer({
                antialias       : false,    // to get smoother output
                preserveDrawingBuffer   : true  // to allow screenshot
            });
            renderer.setClearColorHex( 0xBBBBBB, 1 );
        // uncomment if webgl is required
        //}else{
        //  Detector.addGetWebGLMessage();
        //  return true;
        }else{
            renderer    = new THREE.CanvasRenderer();
        }
        renderer.setSize(128,128);
        document.getElementById('container').appendChild(renderer.domElement);

        // add Stats.js - https://github.com/mrdoob/stats.js
        stats = new Stats();
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.bottom   = '0px';
        document.body.appendChild( stats.domElement );

        var zoom = 1.0;

        // create a scene
        scene = new THREE.Scene();

        // put a camera in the scene
        camera = new THREE.OrthographicCamera(WIDTH / -zoom, HEIGHT / zoom, WIDTH / zoom, HEIGHT / -zoom, -2000, 1000);
        //camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.set(0.45,0.45,0.45);
        camera.lookAt(scene.position);
        //camera.position.set(0, 0, 5);
        scene.add(camera);

        // create a camera contol
        //cameraControls    = new THREEx.DragPanControls(camera)

        // transparently support window resize
        THREEx.WindowResize.bind(renderer, camera);
        // allow 'p' to make screenshot
        THREEx.Screenshot.bindKey(renderer);
        // allow 'f' to go fullscreen where this feature is supported
        //if( THREEx.FullScreen.available() ){
        //  THREEx.FullScreen.bindKey();        
        //  document.getElementById('inlineDoc').innerHTML  += "- <i>f</i> for fullscreen";
        //}

        // here you add your objects
        // - you will most likely replace this part by your own
        //var geometry  = new THREE.TorusGeometry( 1, 0.42 );
        var cubeSize = 128;

        var geometry = new THREE.CubeGeometry( cubeSize, cubeSize, cubeSize );
        var material    = new THREE.MeshNormalMaterial();
        mesh= new THREE.Mesh( geometry, material );
        mesh.rotation.x = 0;
        mesh.rotation.y = 0;
        mesh.rotation.z = 0;
        scene.add( mesh );
    }

函数init（）{
if（Detector.webgl）{
renderer=new THREE.WebGLRenderer({
antialias:false，//以获得更平滑的输出
preserveDrawingBuffer:true//允许屏幕截图
});
setClearColorHex（0xBBBBBB，1）；
//如果需要webgl，请取消注释
//}否则{
//Detector.addGetWebGLMessage（）；
//返回true；
}否则{
renderer=new THREE.CanvasRenderer（）；
}
渲染器。设置大小（128128）；
document.getElementById（'container'）.appendChild（renderer.doElement）；
//添加Stats.js-https://github.com/mrdoob/stats.js
统计数据=新统计数据（）；
stats.domElement.style.position='绝对'；
stats.domeElement.style.bottom='0px'；
document.body.appendChild（stats.doElement）；
var zoom=1.0；
//创造一个场景
场景=新的三个。场景（）；
//在场景中放一个摄像机
摄像机=新的三个正交摄像机（宽度/变焦，高度/变焦，宽度/变焦，高度/变焦，-2000，1000）；
//摄像头=新的三个透视摄像头（35，window.innerWidth/window.innerHeight，11000）；
摄像机位置设置（0.45,0.45,0.45）；
摄像机。注视（场景。位置）；
//摄像机位置设置（0,0,5）；
场景。添加（摄影机）；
//创建摄影机控件
//CameraControl=新的三轴拖动控制（摄像头）
//透明支持窗口大小调整
3X.WindowResize.bind（渲染器、相机）；
//允许“p”制作屏幕截图
THREEx.Screenshot.bindKey（渲染器）；
//允许“f”在支持此功能的地方全屏显示
//if（三倍全屏可用（）{
//THREEx.FullScreen.bindKey（）；
//document.getElementById（'inlineDoc'）。innerHTML+=“-f表示全屏”；
//}
//在这里添加对象
//-您很可能会用自己的零件更换此零件
//var geometry=新的三个圆环几何体（1,0.42）；
var cubeSize=128；
var geometry=新的三立方测量法（立方尺寸、立方尺寸、立方尺寸）；
var material=新的三个.MeshNormalMaterial（）；
网格=新的三个网格（几何体、材质）；
网格旋转x=0；
网格旋转y=0；
网格旋转z=0；
场景。添加（网格）；
}

我一直在尝试不同的“变焦”，但结果还是太大或太小。 所有这些的要点是最终得到一个可以生成如下内容的代码：

我做错了什么

问候

---

Hiam

不要将三个正交摄影机的参数看作“缩放”级别，而应该将它们看作摄影机能够看到的边界平面的坐标

---

关于在Three.js中使用正交摄影机的更多细节，请参见的答案。是的，有时经验数据比试图找到逻辑要好。我解决了这个问题，但我不知道为什么我使用的价值观会起作用=/