夜间模式CodeSnippetStyle:
日间模式CodeSnippetStyle:

0%


《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>
posted @ 2019-12-11 23:50  暮冬有八  阅读(256)  评论(0编辑  收藏  举报
BACK TO TOP

😀迷海无灯听船行。Github WeChat