码迷,mamicode.com
首页 > Web开发 > 详细

《Three.js 入门指南》2.4.1- 照相机 - 透视投影demo

时间:2019-12-12 01:43:55      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:ntb   round   code   var   etc   透视投影   照相机   mat   lang   

 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" 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         renderer.setClearColor(0x000000);
21         var scene = new THREE.Scene();
22         var camera = new THREE.PerspectiveCamera(30, 400 / 300, 1, 10);
23         camera.position.set(4, 3, 5);
24         scene.add(camera);
25 
26         var cube = new THREE.Mesh(new THREE.CubeGeometry(2, 2, 2),
27             new THREE.MeshBasicMaterial({
28                 color: 0xff0000,
29                 wireframe: true
30             })
31         );
32         scene.add(cube);
33 
34         camera.lookAt(new THREE.Vector3(0, 0, 0))
35         renderer.render(scene, camera);
36     }
37 </script>
38 
39 </html>

《Three.js 入门指南》2.4.1- 照相机 - 透视投影demo

标签:ntb   round   code   var   etc   透视投影   照相机   mat   lang   

原文地址:https://www.cnblogs.com/jaycethanks/p/12026628.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!