《Three.js 入门指南》2.4.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>Documenttitle>
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)