threejs第一个案例

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>threejs初体验</title>
 6         <script src="three.min.js"></script>
 7         <style>
 8             body {
 9                 margin: 0;
10                 overflow: hidden;
11             }
12         </style>
13     </head>
14     <body>
15         <div id="webgl-output"></div>
16         <script>
17             function init() {
18                 // 定义场景，
19                 var scene = new THREE.Scene();
20                 // 定义摄像机
21                 var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
22                 // 定义渲染器
23                 var renderer = new THREE.WebGLRenderer();
24                 // 使用setClearColor这个api讲场景背景色设置为0xEEEEEE
25                 renderer.setClearColor(0xEEEEEE);
26                 // 设置场景大小
27                 renderer.setSize(window.innerWidth, window.innerHeight);
28
29                 // 创建了轴线，并添加到场景中
30                 var axes = new THREE.AxesHelper(20);
31                 scene.add(axes);
32
33                 // 接下来，创建平面，THREE.PlaneGeometry定义平面大小
34                 var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
35                 // THREE.MeshBasicMaterial：创建颜色为0xcccccc的基本材质
36                 var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});
37                 // 将对象planeGeometry和planeMaterial合并到名为plane的网格对象中
38                 var plane = new THREE.Mesh(planeGeometry, planeMaterial);
39                 // 将平面添加到场景前，还需要设置平面的位置， 先将平面围绕x轴旋转90度，
40                 // 然后使用position属性来定义其在场景中的位置
41                 plane.rotation.x = -0.5 * Math.PI;
42                 plane.position.x = 15;
43                 plane.position.y = 0;
44                 plane.position.z = 0;
45                 scene.add(plane);
46
47                 var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
48                 var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});
49                 var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
50                 cube.position.x = -4;
51                 cube.position.y = 3;
52                 cube.position.z = 0;
53                 scene.add(cube);
54
55                 var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
56                 var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});
57                 var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
58                 sphere.position.x = 20;
59                 sphere.position.y = 4;
60                 sphere.position.z = 2;
61                 scene.add(sphere);
62
63                 camera.position.x = -30;
64                 camera.position.y = 40;
65                 camera.position.z = 30;
66                 camera.lookAt(scene.position);
67
68                 document.getElementById('webgl-output').appendChild(renderer.domElement);
69                 renderer.render(scene, camera);
70             }
71             window.onload = init;
72         </script>
73     </body>
74 </html>