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