three.js Raycaster

這個(gè)類用于進(jìn)行raycasting（光線投射）。 光線投射用于進(jìn)行鼠標(biāo)拾?。ㄔ谌S空間中計(jì)算出鼠標(biāo)移過了什么物體）。

代碼示例

const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2();

function onPointerMove( event ) {

	// 將鼠標(biāo)位置歸一化為設(shè)備坐標(biāo)。x 和 y 方向的取值范圍是 (-1 to +1)

	pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
	pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

}

function render() {

	// 通過攝像機(jī)和鼠標(biāo)位置更新射線
	raycaster.setFromCamera( pointer, camera );

	// 計(jì)算物體和射線的焦點(diǎn)
	const intersects = raycaster.intersectObjects( scene.children );

	for ( let i = 0; i < intersects.length; i ++ ) {

		intersects[ i ].object.material.color.set( 0xff0000 );

	}

	renderer.render( scene, camera );

}

window.addEventListener( 'pointermove', onPointerMove );

window.requestAnimationFrame(render);

例子

Raycasting to a Mesh

Raycasting to a Mesh in using an OrthographicCamera

Raycasting to a Mesh with BufferGeometry

Raycasting to a InstancedMesh

Raycasting to a Line

Raycasting to Points

Terrain raycasting

Raycasting to paint voxels

Raycast to a Texture

構(gòu)造器

Raycaster( origin : Vector3, direction : Vector3, near : Float, far : Float )

origin —— 光線投射的原點(diǎn)向量。direction —— 向射線提供方向的方向向量，應(yīng)當(dāng)被標(biāo)準(zhǔn)化。near —— 返回的所有結(jié)果比near遠(yuǎn)。near不能為負(fù)值，其默認(rèn)值為0。far —— 返回的所有結(jié)果都比far近。far不能小于near，其默認(rèn)值為Infinity（正無窮。）

這將創(chuàng)建一個(gè)新的raycaster對象。

屬性

.far : Float

raycaster的遠(yuǎn)距離因數(shù)（投射遠(yuǎn)點(diǎn)）。這個(gè)值表明哪些對象可以基于該距離而被raycaster所丟棄。 這個(gè)值不應(yīng)當(dāng)為負(fù)，并且應(yīng)當(dāng)比near屬性大。

.near : Float

raycaster的近距離因數(shù)（投射近點(diǎn)）。這個(gè)值表明哪些對象可以基于該距離而被raycaster所丟棄。 這個(gè)值不應(yīng)當(dāng)為負(fù)，并且應(yīng)當(dāng)比far屬性小。

.camera : Camera

對依賴于視圖的對象（例如 Sprites 之類的廣告牌對象）進(jìn)行光線投射時(shí)使用的相機(jī)。該字段可以手動(dòng)設(shè)置，也可以在調(diào)用“setFromCamera”時(shí)設(shè)置。默認(rèn)為空。

.layers : Layers

Raycaster 使用它在執(zhí)行相交測試時(shí)有選擇地忽略 3D 對象。下面的代碼示例確保只有第 1 層上的 3D 對象才會(huì)被 Raycaster 實(shí)例接受。

raycaster.layers.set( 1 );
object.layers.enable( 1 );

.params : Object

具有以下屬性的對象：

{
	Mesh: {},
	Line: { threshold: 1 },
	LOD: {},
	Points: { threshold: 1 },
	Sprite: {}
}

其中 threshold 是光線投射器與物體相交時(shí)的精度，以世界單位表示。

.ray : Ray

用于進(jìn)行光線投射的Ray（射線）。

方法

.set ( origin : Vector3, direction : Vector3 ) : undefined

origin —— 光線投射的原點(diǎn)向量。direction —— 為光線提供方向的標(biāo)準(zhǔn)化方向向量。

使用一個(gè)新的原點(diǎn)和方向來更新射線。

.setFromCamera ( coords : Vector2, camera : Camera ) : undefined

coords —— 在標(biāo)準(zhǔn)化設(shè)備坐標(biāo)中鼠標(biāo)的二維坐標(biāo) —— X分量與Y分量應(yīng)當(dāng)在-1到1之間。camera —— 射線所來源的攝像機(jī)。

使用一個(gè)新的原點(diǎn)和方向來更新射線。

.intersectObject ( object : Object3D, recursive : Boolean, optionalTarget : Array ) : Array

object —— 檢查與射線相交的物體。recursive —— 若為true，則同時(shí)也會(huì)檢查所有的后代。否則將只會(huì)檢查對象本身。默認(rèn)值為true。optionalTarget — （可選）設(shè)置結(jié)果的目標(biāo)數(shù)組。如果不設(shè)置這個(gè)值，則一個(gè)新的Array會(huì)被實(shí)例化；如果設(shè)置了這個(gè)值，則在每次調(diào)用之前必須清空這個(gè)數(shù)組（例如：array.length = 0;）。

檢測所有在射線與物體之間，包括或不包括后代的相交部分。返回結(jié)果時(shí)，相交部分將按距離進(jìn)行排序，最近的位于第一個(gè)。該方法返回一個(gè)包含有交叉部分的數(shù)組:

[ { distance, point, face, faceIndex, object }, ... ]

distance —— 射線投射原點(diǎn)和相交部分之間的距離。

point —— 相交部分的點(diǎn)（世界坐標(biāo)）

face —— 相交的面

faceIndex —— 相交的面的索引

object —— 相交的物體

uv —— 相交部分的點(diǎn)的UV坐標(biāo)。

uv2 —— 交點(diǎn)處的第二組 U、V 坐標(biāo)

instanceId – 射線與 InstancedMesh 相交的實(shí)例的索引號

當(dāng)計(jì)算這條射線是否和物體相交的時(shí)候，Raycaster將傳入的對象委托給raycast方法。 這將可以讓mesh對于光線投射的響應(yīng)不同于lines和pointclouds。

請注意：對于網(wǎng)格來說，面必須朝向射線的原點(diǎn)，以便其能夠被檢測到。 用于交互的射線穿過面的背側(cè)時(shí)，將不會(huì)被檢測到。如果需要對物體中面的兩側(cè)進(jìn)行光線投射， 你需要將material中的side屬性設(shè)置為THREE.DoubleSide。

.intersectObjects ( objects : Array, recursive : Boolean, optionalTarget : Array ) : Array

objects —— 檢測和射線相交的一組物體。recursive —— 若為true，則同時(shí)也會(huì)檢測所有物體的后代。否則將只會(huì)檢測對象本身的相交部分。默認(rèn)值為true。optionalTarget —— （可選）設(shè)置結(jié)果的目標(biāo)數(shù)組。如果不設(shè)置這個(gè)值，則一個(gè)新的Array會(huì)被實(shí)例化；如果設(shè)置了這個(gè)值，則在每次調(diào)用之前必須清空這個(gè)數(shù)組（例如：array.length = 0;）。

檢測所有在射線與這些物體之間，包括或不包括后代的相交部分。返回結(jié)果時(shí)，相交部分將按距離進(jìn)行排序，最近的位于第一個(gè)），相交部分和.intersectObject所返回的格式是相同的。

源代碼

src/core/Raycaster.js