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);
  }