カメラの正射影とthree.jsのカメラ透視投影との間の差

<！DOCTYPE HTML> 
<HTML> 
    <HEAD> 
        <メタ文字コード= "UTF-8"> 
        <タイトル>三框架</ TITLE> 
        <スクリプトSRC =」../静的/ three.js-マスター/構築/ 3。 JS "> </ SCRIPT> 
        <スタイルタイプ="テキスト/ cssの"> 
            のdiv＃キャンバス - フレーム{ 
                国境：なし; 
                カーソル：ポインタ; 
                幅： 100％; 
                高さ：600PX。
                背景 - 色：#EEEEEE; 
            }

         </スタイル> 
        <スクリプト> のvarレンダラ。  
            
            
                幅 = window.innerWidth。  // 宽度 
                高さ= window.innerHeight。  // 长度 
                レンダラ= 新しいTHREE.WebGLRenderer（{ 
                    アンチエイリアス：真  // 设置反锯齿
                }）。
                renderer.setSize（幅、高さ）。
                document.getElementById（ 'キャンバスフレーム' ）.appendChild（renderer.domElement）。
                renderer.setClearColor（ 0xFFFFFFの、1.0 ）; 
            } 

            VARのカメラ。
            機能initCamera（）{ 
                カメラ = 新しいです THREE.PerspectiveCamera（45、幅/高さ、。1、10000）;   // 透視投影カメラ
                // カメラ=新しい新しいTHREE.OrthographicCamera（window.innerWidth / - 2、window.innerWidth / 2、window.innerHeight / 2 、window.innerHeight / - 、10、2 1000）; // 正射投影カメラ 
                camera.position.x = 0;   // カメラ座標設定 
                camera.position.y = 0 ; 
                camera.position.z = 600 ; 
                カメラ。 up.x = 0 ; 
                camera.up.y = 1;   // 設定され、y軸方向にカメラがある 
                camera.up.z = 0 。 
                camera.lookAt（ 0、0、0）;   //画面表示の途中でカメラルックアットある点：ときに、この点の使用、我々は、オブジェクトの移動を達成することができる、我々は常にオブジェクトを追跡することができるので、オブジェクトは、常に画面の中央です

            } 

            VaRのシーン;   //は、シーン作成
            機能initScene（）{ 
                シーン = 新しい新; THREE.Scene（）
            } 

            VARの光を、   // ソースの作成
            関数initLightを（）{ 
                軽い = 新たな新しい THREE.AmbientLight（は0xFF0000）;   // アンビエント光源 
                光。 position.set（100、100、200である）; 
                scene.add（ライト）、

                ライト= 新規新しい THREE.PointLight（0x00FF00）;   //点光源 
                light.position.set（0、0300 ）; 
                scene.add（ライト）; 
            } 

            VARのキューブ、
             機能initObject（）{
                 VARのジオメトリ= 新しい新しい THREE.CylinderGeometry（70100200）を、   //はジオメトリ長さ、幅、深さ作成
                VARマテリアルのを= 新しい新しい THREE.MeshLambertMaterial（{色：0xFFFFFFの}）;   // 外観とカラー設定を作成
                するvarメッシュを= 新しい新しい THREE.Mesh（ジオメトリ、マテリアルの）;   // メッシュは、オブジェクトの生成に使用されるクラスです）。
                mesh.position = 新しい THREE.Vector3（0,0,0
                scene.add（メッシュ）;  // 加到场景
            } 

            関数threeStart（）{ 
                initThree（）。
                initCamera（）; 
                initScene（）; 
                initLight（）; 
                initObject（）; 
                アニメーション（）; 

            } 
            関数アニメーション（）
            { 
                changeFov（）。
                renderer.render（シーン、カメラ）。
                requestAnimationFrameの（アニメーション）。  // 循环调用
            } 

            関数setCameraFov（FOV）
            { 
                camera.fov= FOV。
                camera.updateProjectionMatrix（）; 
            } 

            関数changeFov（）
            { 
                VAR txtFov =のdocument.getElementById（ "txtFov" ）.VALUE。
                VaRのヴァル= parseFloatは（txtFov）。
                setCameraFov（ヴァル）。
            }
         </ SCRIPT> 
    </ HEAD> 

    <BODYのonload = "threeStart（）;"> 
        <DIV ID = "キャンバスフレーム"> </ div> 
        <div> 
            FOV：の<input type = "text"の値=「45 "ID =" txtFov "/>（0到180的值
        ）</ div> 
    </ body> 
<

偶発three.jsコードのダウンロード

以下に示すように上記のコードは、カメラの透視投影の効果です。

正射カメラ

カメラ= 新しい THREE.OrthographicCamera（window.innerWidth / - 2、window.innerWidth / 2、window.innerHeight / 2、window.innerHeight / - 2、10、1000）。

それは、実質的にすべての方向に同じ大きさ、遠近効果なしです。下図のように：

カメラの正射影とthree.jsのカメラ透視投影との間の差

おすすめ