A. three.js 給模型添加標注
1. 需要有一個被選擇的mesh,通過raycaster獲取
2. 創建先和一個平面
3. 將線和標注的面放在獲取的mesh上
var mouse =new THREE.Vector2();
var raycaster =new THREE.Raycaster();
mouse.x = (event.clientX / domElement.width) *2 -1;
mouse.y = -(event.clientY / domElement.height) *2 +1;
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(scene.children, false); //
selectedObject = intersects[0].object; // 被選中的標注對象
//
var startP,endP;// 這里也是通過raycaster獲取到的
var color = parameters.hasOwnProperty("color") ? parameters.color :0x0000ff;
var lineMat =new THREE.LineBasicMaterial({
"color": 0xff0000
});
var lineGeo =new THREE.Geometry();
lineGeo.vertices.push(startPos);
lineGeo.vertices.push(endPos);
var line =new THREE.Line(lineGeo, lineMat);
// 初始化一個sprite,這是一個始終面向相機的平面,
var sprite = new textSprite(這並不是一個構造函數,不想寫那麼多,自行去官網查看)
.......
sprite.scale.set(_spriteScale, _spriteScale, _spriteScale); // 設置的是sprite的大小派脊野
selectedObject.add(line); // 添加
line.worldToLocal(_endPos); // 設置點
sprite.position.(_endPos); // 設置sprite的位置
line.add(sprite); 添加並進行關聯
注: sprite可以用於進行塵喊標注熱點等操作,具體實現較為簡單,同時因為也算是mesh,所以sprite可以設置texture,使用圖片作為背景等,也可以野帶把一個canvas,把需要的文字圖片等都加入進來.
B. Three.js中載入三維模型時怎麼設置模型坐標歸零
不得不承認，這是threejs長久以來的bug，換了好多版本，一直沒有處理這個bug，
在早內期版本容中我們可以用如下方法去實現，
objMesh.centroid=newTHREE.Vector3();
for(vari=0,l=geom.vertices.length;i<l;i++){
objMesh.centroid.add(geom.vertices[i].clone());
}
objMesh.centroid.divideScalar(geom.vertices.length);
varoffset=objMesh.centroid.clone();
objMesh.geometry.applyMatrix(newTHREE.Matrix4().makeTranslation(-offset.x,-offset.y,-offset.z));
objMesh.position.(objMesh.centroid);
C. 如何在Three.js中檢測兩個物體是否了發生碰撞
使用Raycaster進行碰撞檢測
用Raycaster來檢測碰撞的原理很簡單，我們需要以物體的中心為起點，向各個頂點（vertices）發出射線，然後檢查射線是否與其它的物體相交。如果出現了相交的情況，檢查最近的一個交點與射線起點間的距離，如果這個距離比射線起點至物體頂點間的距離要小，則說明發生了碰撞。
這個方法有一個 缺點 ，當物體的中心在另一個物體內部時，是不能夠檢測到碰撞的。而且當兩個物體能夠互相穿過，且有較大部分重合時，檢測效果也不理想。
還有需要 注意 的一點是：在Three.js中創建物體時，它的頂點（veritces）數目是與它的分段數目相關的，分段越多，頂點數目越多。為了檢測過程中的准確度考慮，需要適當增加物體的分段。