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

最后的效果如图所示
来源:https://www.cnblogs.com/CQ-engineer/p/6163232.html