three.js新手入门教程( 二 ) three.js就是使用javascript来写3

为了保持照相机的横竖比例，需要保证(right-left)与(top-bottom)的比例与Canvas宽度与高度的比例一致。
varcamera=newTHREE.OrthographicCamera(-2,2,1.5,-1.5,1,100);
camera.position.set(0,0,5);scene.add(camera);
其中，第二句是设定照相机的位置。照相机默认都是沿z轴负方向观察的，可以通过lookAt函数指定它看着其他方向：
camera.lookAt(newTHREE.Vector3(0,0,0));
这样就改变照相机观察方向由当前位置指向原点。注意， lookAt函数接受的是一个THREE.Vector3的实例。
透视投影相机
透视投影是更符合人眼视觉的投影，构造函数是：
PerspectiveCamera(fov,aspect,near,far)

文章图片
fov：为视角的大小,如果设置为0,相当你闭上眼睛了,所以什么也看不到,如果为180,那么可以认为你的视界很广阔,但是在180度的时候，往往物体很小，因为他在你的整个可视区域中的比例变小了。
aspect：为实际窗口的纵横比，即宽度除以高度。通常设为Canvas的横纵比例。
varcamera=newTHREE.PerspectiveCamera(45,400/300,1,100);
camera.position.set(0,0,5);scene.add(camera);
形状
threejs封装了一些常见的几何形状，在使用时，就只需要定义threejs设定好需要的值即可，如果想要自定义形状，就需要手动创造顶点和面。
立方体
THREE.CubeGeometry(width,height,depth,widthSegments,heightSegments,depthSegments)
这里， width是x方向上的长度；height是y方向上的长度；depth是z方向上的长度；后三个参数分别是在三个方向上的分段数，如widthSegments为3的话，代表x方向上水平分为三份。一般情况下不需要分段的话，可以不设置后三个参数，后三个参数的默认值为1 。
如：newTHREE.CubeGeometry(1,2,3);可以创建一个x方向长度为1 ， y方向长度为2 ， z方向长度为3的立方体。

文章图片
物体的几何中心默认在原点的位置。若设置了分段，会对六个面进行分段，而不是对立方体分段，因此在立方体的中间是不分段的，只有六个侧面被分段。
平面
THREE.PlaneGeometry(width,height,widthSegments,heightSegments)
width是x方向上的长度；height是y方向上的长度；后两个参数同样表示分段。
球体
THREE.SphereGeometry(radius,segmentsWidth,segmentsHeight,phiStart,phiLength,thetaStart,thetaLength)
其中， radius是半径；segmentsWidth表示经度上的切片数；segmentsHeight表示纬度上的切片数；phiStart表示经度开始的弧度；phiLength表示经度跨过的弧度；thetaStart表示纬度开始的弧度；thetaLength表示纬度跨过的弧度。
使用varsphere=newTHREE.SphereGeometry(3,8,6)可以创建一个半径为3 ，经度划分成8份，纬度划分成6份的球体，如下图所示：

文章图片
segmentsWidth相当于经度被切成了几瓣，而segmentsHeight相当于纬度被切成了几层。对于球
体而言，当这两个值较大的时候，形成的多面体就可以近似看做是球体了。
圆形
THREE.CircleGeometry(radius,segments,thetaStart,thetaLength)
这四个参数和球体中的是类似的。
柱体
THREE.CylinderGeometry(radiusTop,radiusBottom,height,radiusSegments,heightSegments,openEnded)
其中， radiusTop与radiusBottom分别是顶面和底面的半径，由此可知，当这两个参数设置为不同的值时，实际上创建的是一个圆台；height是圆柱体的高度；radiusSegments与heightSegments可类比球体中的分段；openEnded是一个布尔值，表示是否没有顶面和底面，默认为false ，表示有顶面和底面。