示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>zzz</title>
<script type="text/javascript" src="js/three.js"></script>
<style type="text/css">
canvas { width: 100%; height: 100%}
</style>
</head>
<body>
<script type="text/javascript">
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
var material = new THREE.MeshBasicMaterial({color:0xffff00,wireframe:true});//集合体的线框
var geometry = new THREE.CubeGeometry(1,2,3);//立方体
//var geometry = new THREE.PlaneGeometry(2,4);//平面
//var geometry = new THREE.SphereGeometry(2,12,12);//球体，半径，经度，纬度
//var geometry = new THREE.CylinderGeometry(2,3,4,18,3);//圆柱
var cube = new THREE.Mesh(geometry,material);
scene.add(cube);
camera.position.z = 6;
renderer.render(scene,camera);
</script>
</body>
</html>基本物体
在three.js中，已经定义了很多的物体模型函数，比如立方体（CubeGeometry)，通过设置长宽高，从而得到不同的体形，所以也可以说它是个长方体。
物体的默认位置是原点，对于立方体而言，是其几何中心在原点的位置。以上的代码中的几何体都可以试试，具体的每一个函数的参数，可以参考https://www.cnblogs.com/xulei1992/p/5714429.html。
三大组建之外
让我们再具体熟悉一下代码，还有一些陌生的函数是干什么的。
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);上面是设置了渲染器大小为窗口大小，并且将渲染器的内容添加到body中显示出来。
var material = new THREE.MeshBasicMaterial({color:0xffff00,wireframe:true});//集合体的线框
var geometry = new THREE.CubeGeometry(1,2,3);//立方体
var cube = new THREE.Mesh(geometry,material);这里用了three.js中的一种材质，网格基础材质（MeshBasicMaterial），three.js提供了好几种材质供我们用于不同的场景和物体上。具体哪些材质和详细使用可参看：https://blog.csdn.net/zhulx_sz/article/details/78624801。最后将材质和几何体通过模型函数生成3D的物体。最后将模型添加到场景中，设置摄像机的视角，通过渲染器的渲染，就得到网页中的3D物体了。
自定义形状
对于Three.js没有提供的形状，可以提供自定义形状来创建。由于自定义形状需要手动指定每个顶点位置，以及顶点连接情况，如果该形状非常复杂，程序员的计算量就会比较大。在这种情况下，建议在3ds Max之类的建模软件中创建模型，然后使用Three.js导入到场景中，这样会更高效方便。详情参看：https://www.cnblogs.com/xulei1992/p/5717790.html。
说明在最后
内容并非原创，如有不妥请联系删除：QQ1034070006
829
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
