three.js所Raycaster碰撞檢測與球體

我用一個例子的工作從以前回答的問題在這裏：Three Js Object3D Button Group Detect Single Object Click While Mouse Movement Causes Object3D Button Group Zoomi three.js所Raycaster碰撞檢測與球體

我做一些改變，使其工作，我想要的方式，並遇到了一些問題，那我很難搞清楚。

這裏是我的jsbin：http://jsbin.com/agadiw/1/

1）我交換的對象從CubeGeometry到SphereGeometry和碰撞是不準確，好像我只能在球體的某些部分點擊觸發碰撞。球體的大小與立方體的大小相同，有時當我在球體外點擊時會觸發碰撞。我警告碰撞時球體唯一的數字。是否有某種設置或位置我有錯？

2）當點擊一個球體時，我會嘗試將其顏色改爲紅色，但是所有球體的顏色都會變成紅色，而不僅僅是單擊它。我查看了點擊球體時相交數組是什麼，它只返回點擊的數據，我不知道它爲什麼會改變它們。 3）最後，我一直在尋找很好的資源，教程，例子，這些資源是最新的，或者對事物的工作方式有很好的解釋，但是我沒有真正發現任何我嘗試過的官方文檔，但是很多部分只是說'todo'。我只是想知道如果有人有任何資源可以讓我幫助我學習這些東西。

感謝您的任何幫助。

來源

2013-07-03 dotfury

1）CSS margin必須爲零。

body { background: black; margin: 0; overflow: hidden }

或者，您可以看到this question的答案。

2）所有對象的顏色發生變化，因爲所有對象都共享相同的材質。取而代之：

ButtonsMesh = new THREE.Mesh(ButtonsGeometry, new THREE.MeshBasicMaterial());

3）您將不得不通過研究示例和閱讀留言板來學習three.js。另請參閱this answer獲取更多提示。

來源

2013-07-06 00:47:06 WestLangley

感謝您的洞察力，似乎現在工作。我將繼續瀏覽例子並仔細閱讀董事會。再次感謝。 – dotfury

您正在使用intersectObjects（）來檢查交集。但是交叉點因此包含所有這些對象。要解決它，你需要通過對象循環與intersectObject（），而不是

for (var i=0; i<=(objects.length-1); i++) { 
    var intersect = raycaster.intersectObject(objects[i]); 
    if (intersect.length > 0) { 
     //change the color here 
     break; //important to break the loop 
    } 
}

至於文件;這些都很好examples。但目前它主要是通過源代碼和github進行挖掘以找到你需要的東西

來源

2013-07-03 10:00:54

嗨，謝謝你的迴應，我已經嘗試了你的建議，並沒有奏效。點擊所有球體變成紅色。我也嘗試改變循環內部，看看我能否弄清楚，但仍然得到相同的結果。謝謝你的幫助。 – dotfury

three.js所Raycaster碰撞檢測與球體

回答

相關問題