Three.js 入门指南(核心对象) - CQ-engineer_H5之家 - 中国HTML5教程资源分享第一站

　　推荐大家可以看看这个：?url=RQU2exzV_EF3GATc3bzQU2o9LGMuCmiN5nUJth5SLG3E2TrxtBLQodJU_kZgfJjd9ljtR5XhZlHdzoHJ6kLeAF4uC9dttM1sNer60lg09gS对于初步了解是极好的了。

官网：https://threejs.org/

中文文档：

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(); 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); light = new THREE.PointLight({color:0xffffff}); 18 light.position.set(300,400,200); 19 scene.add(light); camera = new THREE.PerspectiveCamera(40,800/600,1,1000); 22 camera.position.set(200,200,200); 23 camera.lookAt(scene.position); 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>

最后的效果如图所示