《Three.js 入门指南》2.3.1- 照相机 - 正交投影demo

 <!DOCTYPE html>
 <html lang="en">

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <script type="text/javascript" src="./three.js"></script>
     <title>Document</title>
 </head>

 <body onload="init()">
     <canvas id="mainCanvas" style="margin:20px 25%;" width="400px" height="300px"></canvas>
 </body>
 <script>
     function init() {
         var renderer = new THREE.WebGLRenderer({
             canvas: document.getElementById('mainCanvas')
         });

         renderer.setClearColor(0x000000);
         var scene = new THREE.Scene();
         var camera = new THREE.OrthographicCamera(-1, 3, 1.5, -1.5, 1, 10);
         camera.position.set(4, -3, 5);
         scene.add(camera);
         camera.lookAt(new THREE.Vector3(0, 0, 0));
         var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1),
             new THREE.MeshBasicMaterial({
                 color: 0xff0000,
                 wireframe: true
             })
         )
         scene.add(cube);
         renderer.render(scene, camera);

     }
 </script>

 </html>