threejs 正交視圖 透視視圖詳解

threejs 正交視圖詳解

用正交就是因為能更好的用像素

  canvaswidth = 750;
        canvasheight = 1206;

        renderer = new THREE.WebGLRenderer({ alpha: true });
        renderer.setSize(canvaswidth, canvasheight,false);
        document.body.appendChild(renderer.domElement);
        //
        camera = new THREE.OrthographicCamera (canvaswidth / - 2, canvaswidth / 2, canvasheight / 2, canvasheight / - 2, 1, 1000 );
        camera.position.z = 350;
        scene = new THREE.Scene();

        var geometry = new THREE.PlaneGeometry(750, 1206, 1, 1);
        // A begin
        geometry.vertices[0].uv = new THREE.Vector2(0, 0);
        geometry.vertices[1].uv = new THREE.Vector2(1, 0);
        geometry.vertices[2].uv = new THREE.Vector2(1, 1);
        geometry.vertices[3].uv = new THREE.Vector2(0, 1);

        // A end
        // B begin
        // 紋理坐標怎么弄
        var texture1 = THREE.ImageUtils.loadTexture("/moban/images/tietu.png", null, function(t) {});
        var material = new THREE.MeshBasicMaterial({ map: texture1, transparent: true, side: THREE.DoubleSide });
        mesh = new THREE.Mesh(geometry, material);
        mesh.position.z = 0;
        mesh.position.x = 0;
        mesh.position.y = 0;
        mesh.rotation.x = 0;
        mesh.rotation.y = 0;
        mesh.rotation.z = 0;


        scene.add(mesh);
        //用於自適應
        window.addEventListener('resize', onWindowResize, false);


        var tm = new TimelineMax();

里面的坐標就是按照像素來的 所以一般2D轉3D 一般用正交視圖 方便坐標變換

透視視圖 就有從遠到近效果

 

 

 

一般這些像素參數是固定的不用去改他