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

Posted jaycethanks

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了《Three.js 入门指南》2.3.1- 照相机 - 正交投影demo相关的知识,希望对你有一定的参考价值。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <script type="text/javascript" src="./three.js"></script>
 9     <title>Document</title>
10 </head>
11 
12 <body onload="init()">
13     <canvas id="mainCanvas" style="margin:20px 25%;" width="400px" height="300px"></canvas>
14 </body>
15 <script>
16     function init() {
17         var renderer = new THREE.WebGLRenderer({
18             canvas: document.getElementById(mainCanvas)
19         });
20 
21         renderer.setClearColor(0x000000);
22         var scene = new THREE.Scene();
23         var camera = new THREE.OrthographicCamera(-1, 3, 1.5, -1.5, 1, 10);
24         camera.position.set(4, -3, 5);
25         scene.add(camera);
26         camera.lookAt(new THREE.Vector3(0, 0, 0));
27         var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1),
28             new THREE.MeshBasicMaterial({
29                 color: 0xff0000,
30                 wireframe: true
31             })
32         )
33         scene.add(cube);
34         renderer.render(scene, camera);
35 
36     }
37 </script>
38 
39 </html>

以上是关于《Three.js 入门指南》2.3.1- 照相机 - 正交投影demo的主要内容,如果未能解决你的问题,请参考以下文章

webGL入门学习之创建场景

使用vue学习three.js之移动相机-使相机沿指定路径运动,相机巡检,是物体在指定路径上运动

three.js入门系列之材质

three.js入门

There.js入门系列之React中使用Three.js

Three.js 中的“THREE.OrbitControls”中的相机位置变化