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

*爱你&永不变心* 提交于 2020-01-27 14:18:53

  推荐大家可以看看这个: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>

最后的效果如图所示

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!