发布时间： 2022-11-11 14:54
接上节，讲了 3D世界的“三大组件”。本节具体讲解一些Threejs的知识点。
首先有条件的话搞个服务器，这里还是用的三丰云免费云服务器，免费虚拟主机在这里不适用就不介绍了，安装的Centos7版本，相关内容丢到服务器即可，其他教程已经讲过，不多说了。
接下来步入我们的第二章。
3D世界由点组成，2个点组成一条直线，3条不在一条直线上的点就能组成一个三角形面，无数个三角形面就能组成各种形状的物体。
这种网格模型，叫做Mesh模型。
模型上增加皮肤，即纹理，即形成一个物体。
在Three.js中，线由点，材质和颜色组成。
在Threejs中定义一个点
THREE.Vector3=function ( x, y, z ) { |
this.x = x ||0; |
this.y = y ||0; |
this.z = z ||0; |
}; |
点的操作
定义点
var point1 = new THREE.Vecotr3(4,8,9);
或通过set方法
var point1 =newTHREE.Vector3(); |
point1.set(4,8,9); |
首先，我们声明了一个几何体geometry
var geometry = new THREE.Geometry();
定义一种线条的材质，使用THREE.LineBasicMaterial类型来定义，它接受一个集合作为参数，其原型如下：
LineBasicMaterial( parameters ) |
Parameters是一个定义材质外观的对象，它包含多个属性来定义材质，这些属性是：
Color：线条的颜色，用16进制来表示，默认的颜色是白色。
Linewidth：线条的宽度，默认时候1个单位宽度。
Linecap：线条两端的外观，默认是圆角端点，当线条较粗的时候才看得出效果，如果线条很细，那么你几乎看不出效果了。
Linejoin：两个线条的连接点处的外观，默认是“round”，表示圆角。
VertexColors：定义线条材质是否使用顶点颜色，这是一个boolean值。意思是，线条各部分的颜色会根据顶点的颜色来进行插值。
Fog：定义材质的颜色是否受全局雾效的影响。
这里使用了顶点颜色vertexColors: THREE.VertexColors，就是线条的颜色会根据顶点来计算。
var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );
接下来，定义两种颜色，分别表示线条两个端点的颜色
var color1 =newTHREE.Color( 0x444444 ), |
color2 =newTHREE.Color( 0xFF0000 ); |
定义2个顶点的位置，并放到geometry中
var p1 =newTHREE.Vector3( -100, 0, 100 ); |
var p2 =newTHREE.Vector3( 100, 0, -100 ); |
geometry.vertices.push(p1); |
geometry.vertices.push(p2); |
为定义的2个顶点，设置不同的颜色
geometry.colors.push( color1, color2 );
geometry中colors表示顶点的颜色，必须材质中vertexColors等于THREE.VertexColors 时，颜色才有效，如果vertexColors等于THREE.NoColors时，颜色就没有效果了。那么就会去取材质中color的值
定义一条线
一条线由点，材质和颜色组成。
var line = new THREE.Line( geometry, material, THREE.LineSegments);
第一个参数是几何体geometry，里面包含了2个顶点和顶点的颜色。第二个参数是线条的材质，或者是线条的属性，表示线条以哪种方式取色。第三个参数是一组点的连接方式。然后，将这条线加入到场景中
scene.add(line); |
右手坐标系
图中右边那个手对应的坐标系，就是右手坐标系。在Threejs中，坐标和右边的坐标完全一样。x轴正方向向右，y轴正方向向上，z轴由屏幕从里向外。
让场景动起来
渲染循环
functionanimate() { |
render(); |
requestAnimationFrame( animate ); |
} |
改变相机的位置，让物体移动
function animation() |
{ |
//renderer.clear(); |
camera.position.x =camera.position.x +1; |
renderer.render(scene, camera); |
requestAnimationFrame(animation); |
} |
改变物体自身的位置，让物体移动
function animation() |
{ |
mesh.position.x-=1; |
renderer.render(scene, camera); |
requestAnimationFrame(animation); |
} |
其中mesh就是指的物体，它有一个位置属性position，这个position是一个THREE.Vector3类型变量，所以你要把它向左移动，只需要将x的值不断的减少就可以了
