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）数目是与它的分段数目相关的，分段越多，顶点数目越多。为了检测过程中的准确度考虑，需要适当增加物体的分段。