Question

我一直在尝试在晚上的大部分时间制作一个导出代码，很快就会让我纹理立方体并将它们导出到我正在制作的游戏中，但由于某种原因我不能让我的立方体覆盖我希望它拥有的整个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 );
    }

我一直在尝试不同的“缩放”，但它仍然会变得太大或太小。所有这一切的关键是最终得到一个代码可以产生这样的东西：

https://dl.dropboxusercontent.com/u/5256694/cube_ex.png

我做错了什么？

亲切的问候

炘

Answer 1

不要将THREE.OrthographicCamera的参数视为“缩放”级别，而应将它们视为相机能够看到的边界平面的坐标。

另请参阅Three.js - Orthographic camera的答案，了解有关在Three.js中使用正交相机的更多详情

等距立方体，尺寸与瓷砖尺寸128x128不匹配

1 个答案: