Three.js个人学习笔记

Three.js中点可以在右手坐标系中表示，在three.js中点是用一个向量来表示

定义点

var geometry = new THREE.Geometry();

几何体里面有一个vertices变量，可以用来存放点。

var p1 = new THREE.Vector3(300, 0, 200)   //用向量来定义一个点
geomerty.vertices.push(p1)

定义线

var line = new THREE.Line(geometry,material,THREE.Segments)

第一个参数是几何体，里面包含定义的顶点和顶点的颜色；
第二个参数是线条的材质，或者是线条的属性，表示线条是以哪种方式取色；
第三个参数是一组点的连接方式

定义线条的材质

使用THREE.LineBasicMaterial类型来定义线条的材质，它接受一个集合作为参数：

LineBasicMaterial（parameters）
    parameters是一个定义材质外观的对象，包含多个属性来定义材质，这些属性是：
        color：线条的颜色，十六进制，默认白色
        LineWidth：线条的宽度，默认时候1个单位宽度
        Linecap：线条两端的外观，默认是圆角端点，当线条较粗的时候才看得出效果，如果线条很细，那么你几乎看不出效果了
        LineJoin：两个线条的连接点处的外观，默认是“round”，表示圆角
        VertexColors：定义线条材质是否使用顶点颜色，这是一个boolean值。意思是，线条各部分的颜色会根据顶点的颜色来进行插值。
        Fog：定义材质的颜色是否受全局雾效的影响

线条的深入理解

点由THREE.Vector3表示，Three.js没有提供单独画点的函数，其必须放在THREE.Geometry形状中，这个结构里包含一个数组vertices，这个vertices就是存放无数点的数组

渲染循环

如果不断的改变物体的位置或者颜色之类的属性，就必须重新调用render()函数，才能将新的场景绘制到浏览器中。浏览器是不会自动刷新场景的
为了实现这个循环，需要函数requestAnimationFrame。调用这个函数，传递一个callback参数，在下一个动画帧时，会调用callback这个函数、

function animate(){
    render();
    requestAnimationFrame(animate) ;
}