Three.js獲取鼠標點擊的三維座標事件實現案例，獲取熟悉和改變樣色

THREE.Raycaster構造函數和對象方法 
實例化 
new Raycaster( origin, direction, near, far ); 
1 
origin — 光線投射的起點向量。 
direction — 光線投射的方向向量，應該是被歸一化的。 
near — 投射近點，用來限定返回比near要遠的結果。near不能爲負數。缺省爲0。 
far — 投射遠點，用來限定返回比far要近的結果。far不能比near要小。缺省爲無窮大。

方法 
setFromCamera 
用一個新的原點和方向向量來更新射線（ray）。

.setFromCamera ( coords, camera ) 
1 
coords — 鼠標的二維座標，在歸一化的設備座標(NDC)中，也就是X 和 Y 份量應該介於 -1 和 1 之間。 
camera — 射線起點處的相機，即把射線起點設置在該相機位置處。

intersectObject 
檢查射線和物體之間的全部交叉點（包含或不包含後代）。交叉點返回按距離排序，最接近的爲第一個。 返回一個交叉點對象數組。

.intersectObject ( object, recursive ) 
1 
object — 用來檢測和射線相交的物體。 
recursive — 若是爲true，它還檢查全部後代。不然只檢查該對象自己。缺省值爲false。

返回數組每個對象的內容 
[ { distance, point, face, faceIndex, indices, object }, … ] 
1 
distance – 射線的起點到相交點的距離 
point – 在世界座標中的交叉點 
face – 相交的面 
faceIndex – 相交的面的索引 
indices – 組成相交面的頂點索引 
object – 相交的對象

當一個網孔(Mesh)對象和一個緩存幾何模型(BufferGeometry)相交時，faceIndex 將是 undefined，而且 indices 將被設置； 而當一個網孔(Mesh)對象和一個幾何模型(Geometry)相交時，indices 將是 undefined。

當計算這個對象是否和射線相交時，Raycaster 把傳遞的對象委託給 raycast 方法。 這容許 meshes 對於光線投射的響應能夠不一樣於 lines 和 pointclouds。

注意，對於網格，面（faces）必須朝向射線原點，這樣才能被檢測到；經過背面的射線的交叉點將不被檢測到。 爲了光線投射一個對象的正反兩面，你得設置 material 的 side 屬性爲 THREE.DoubleSide。

Three.js獲取鼠標點擊獲取屬性和改變樣色

//聲明raycaster和mouse變量

var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); function onMouseClick( event ) { //經過鼠標點擊的位置計算出raycaster所須要的點的位置，以屏幕中心爲原點，值的範圍爲-1到1.
 mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; // 經過鼠標點的位置和當前相機的矩陣計算出raycaster
 raycaster.setFromCamera( mouse, camera ); // 獲取raycaster直線和全部模型相交的數組集合
        var intersects = raycaster.intersectObjects( scene.children ); console.log(intersects); //將全部的相交的模型的顏色設置爲紅色，若是隻須要將第一個觸發事件，那就數組的第一個模型改變顏色便可
        for ( var i = 0; i < intersects.length; i++ ) { intersects[ i ].object.material.color.set( 0xff0000 ); } } window.addEventListener( 'click', onMouseClick, false );

Three.js獲取鼠標點擊的三維座標示例代碼

既然已是想要獲取鼠標點擊的三維座標了，相信你camera對象和scene都已經有了，若是不瞭解的小夥伴，能夠先去看一下這兩個對象。這裏主要說一下怎麼獲取到三維座標，原理性的東西不提。上代碼：

function onDocumentMouseDown( event ) { event.preventDefault(); var vector = new THREE.Vector3();//三維座標對象
  vector.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 ); vector.unproject( camera ); var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize()); var intersects = raycaster.intersectObjects(scene.children); if (intersects.length > 0) { var selected = intersects[0];//取第一個物體
    console.log("x座標:"+selected.point.x); console.log("y座標:"+selected.point.y); console.log("z座標:"+selected.point.z); }