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

检测所有在射线与这些物体之间，包括或不包括后代的相交部分。返回结果时，相交部分将按距离进行排序，最近的位于第一个），相交部分返回一个包含有交叉部分的数组:
[{distance,point,face,faceIndex,object},...]
distance——射线投射原点和相交部分之间的距离。
point——相交部分的点（世界坐标）
face——相交的面
faceIndex——相交的面的索引
object——相交的物体
uv——相交部分的点的UV坐标。
当计算这条射线是否和物体相交的时候， Raycaster将传入的对象委托给raycast方法。这将可以让mesh对于光线投射的响应不同于lines和pointclouds 。
注意：对于网格来说，面必须朝向射线的原点，以便其能够被检测到。用于交互的射线穿过面的背侧时，将不会被检测到。如果需要对物体中面的两侧进行光线投射，需要将material中的side属性设置为THREE.DoubleSide 。
varraycaster=newTHREE.Raycaster();varmouse=newTHREE.Vector2();
functiononMouseMove(event){
//将鼠标位置归一化为设备坐标。 x和y方向的取值范围是(-1to+1)
mouse.x=(event.clientX/window.innerWidth)*2-1;
mouse.y=-(event.clientY/window.innerHeight)*2+1;
}
functionrender(){
//通过摄像机和鼠标位置更新射线
raycaster.setFromCamera(mouse,camera);
//计算物体和射线的焦点
varintersects=raycaster.intersectObjects(scene.children);
for(vari=0;i<intersects.length;i++){
intersects[i].object.material.color.set(0xff0000);
}
renderer.render(scene,camera);
}
window.addEventListener('mousemove',onMouseMove,false);
window.requestAnimationFrame(render);
基础库
颜色
构造器（Constructor）
Color(r,g,b)
.r:Float
红色通道的值在0到1之间。默认值为1 。
.g:Float
绿色通道的值在0到1之间。默认值为1 。
.b:Float
蓝色通道的值在0到1之间。默认值为1 。
varcolor=newTHREE.Color(1,0,0);
使用十六进制定义一个颜色在three.js中是标准的方法
varcolor=newTHREE.Color(0xff0000);
欧拉角
欧拉角描述一个旋转变换，通过指定轴顺序和指定各轴旋转角度来旋转一个物体。
构造器（Constructor）
Euler(x:Float,y:Float,z:Float,order:String)
x-(optional)用弧度表示x轴旋转量。默认值是0 。
y-(optional)用弧度表示y轴旋转量。默认值是0 。
z-(optional)用弧度表示z轴旋转量。默认值是0 。
order-(optional)表示旋转顺序的字符串，默认为'XYZ'（必须是大写）。
vara=newTHREE.Euler(0,1,1.57,'XYZ');varb=newTHREE.Vector3(1,0,1);b.applyEuler(a);
三维几何线段
构造器（Constructor）
Line3(start:Vector3,end:Vector3)
start-线段的起始点。默认值为(0,0,0) 。
end-线段的终点。默认值为(0,0,0) 。
二维向量
表示2Dvector（二维向量），是一对有顺序的数字（标记为x和y）。
【three.js新手入门教程】Vector2(x:Float,y:Float)