Three.js 入门指南(核心对象)

　　推荐大家可以看看这个：http://wenku.baidu.com/link?url=RQU2exzV_EF3GATc3bzQU2o9LGMuCmiN5nUJth5SLG3E2TrxtBLQodJU_kZgfJjd9ljtR5XhZlHdzoHJ6kLeAF4uC9dttM1sNer60lg09gS对于初步了解是极好的了。

官网：https://threejs.org/

中文文档：http://techbrood.com/threejs/docs/

three.js核心对象： scene（场景）

　　　　　　　　　camera（相机）

　　　　　　　　　light（光源）

　　　　　　　　　mesh（模型）

　　　　　　　　　renderer（渲染器）

　　　　　　　　　render（渲染）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script type="text/javascript" src="js/three.js"></script>
 7 </head>
 8 <body>
 9     <script type="text/javascript">
10         var scene = new THREE.Scene();
11 
12         var geometry = new THREE.BoxGeometry(100,100,100);
13         var material = new THREE.MeshLambertMaterial({color:0xff0000});
14         var mesh = new THREE.Mesh(geometry,material);
15         scene.add(mesh);
16 
17         var light = new THREE.PointLight({color:0xffffff});
18         light.position.set(300,400,200);
19         scene.add(light);
20 
21         var camera = new THREE.PerspectiveCamera(40,800/600,1,1000);
22         camera.position.set(200,200,200);
23         camera.lookAt(scene.position);
24 
25         var renderer = new THREE.WebGLRenderer();
26         renderer.setSize(800,600);
27         document.body.appendChild(renderer.domElement);
28 
29         renderer.render(scene,camera);
30     </script>
31 </body>
32 </html>

最后的效果如图所示

 

posted @ 2016-12-12 09:22  CQ-engineer  阅读(1310)  评论(0)  编辑  收藏  举报