在我动态修改对象的几何形状之前,我的 ray.intersectObjects 与场景中的对象配合得非常好。尽管渲染器将对象显示为正在修改(移动顶点和更改面),但当在修改后的对象上尝试相交时,会产生奇怪的结果。即使在修改后的几何图形上,我也需要相交!
为了帮助调试和跟踪相交在我的场景中的工作方式,我添加了一个函数:makeMiniSphere()。这会在场景中的交叉点处创建一个新的球体对象。使用这个,您可以看到在修改立方体后,有时相交会碰到立方体,有时会直接穿过(主要是已修改的面)。这不是一个随机问题,但是您在修改后的立方体周围单击的次数越多,您就越能看到一种模式的发展。几乎就好像场景视觉效果的渲染器知道立方体被修改的方向,但是 ray.intersectObjects 认为它已经在不同的方向修改了!
这是测试网站的链接:http ://www.littledrop.net/html/cadiverse/HelloWorld.html
显示问题的方向:
左键单击立方体以显示相交点。只要 Three.js 看到相交,就会创建迷你球体。如果尚未选择,所选对象的颜色将变为黄色。
单击立方体的任何面。这将 A. 如果它还不是黄色,则将其变为黄色。B. 它将选择立方体的面,尽管所选面看起来与立方体的其余部分没有任何不同。
按“右”箭头键将选定的面向右移动。这将动态改变立方体的几何形状。
现在尝试点击立方体——尤其是在它被修改的区域。Mini spheres 将再次显示软件认为相交发生的位置。
这是相交代码:
function onDocumentMouseDown (event)
{
// the following line would stop any other event handler from firing
// (such as the mouse's TrackballControls)
//event.preventDefault();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
document.getElementById('message1').innerHTML = window.innerHeight;
var isinworkingarea = window.innerHeight-menubarh;
if (event.clientY<=isinworkingarea)
{
var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
projector.unprojectVector( vector, camera );
//var ray = new THREE.ReusableRay();
var ray = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
// create an array containing all objects in the scene with which the ray intersects
// use this to select anything in the scene:
var intersects = ray.intersectObjects( scene.children );
if ( intersects.length > 0 )
{
if (cadjectNow)
cadjects[cadjectNow].material.color.setHex(cadjects[cadjectNow].oldColor);
if (intersects[0].object.cadNum)
cadjectNow = intersects[0].object.cadNum;
SELECTEDface=intersects[0].face;
if (cadjectNow)
cadjects[cadjectNow].material.color.setHex( selectColor );
document.getElementById('message1').innerHTML = cadjects[cadjectNum].cadNum;
///// Information about selected /////
var facestring = intersects[0].face.a + " " + intersects[0].face.b + " " + intersects[0].face.c;
if(intersects[0].face instanceof THREE.Face4)
{
facestring=facestring + " " + intersects[0].face.d;
}
copyGeometry=cadjects[cadjectNow].geometry;
//makeCopy(copyGeometry,cadjects[cadjectNow].position.x,cadjects[cadjectNow].position.y,cadjects[cadjectNow].position.z);
makeMiniSphere(intersects[0].point.x, intersects[0].point.y, intersects[0].point.z);
document.getElementById('message1').innerHTML = facestring;
//document.getElementById('message2').innerHTML = cadjects[cadjectNow].geometry.vertices[SELECTEDface.a].x + " " + cadjects[cadjectNow].geometry.vertices[intersects[0].face.a].y + " " + cadjects[cadjectNow].geometry.vertices[intersects[0].face.a].z;
document.getElementById('message2').innerHTML = intersects[0].point.x + " " + intersects[0].point.y + " " + intersects[0].point.z;
}
}
}
下面是修改代码:
if ( keyboard.pressed("right"))
{
document.getElementById('message1').innerHTML = mouseMode;
cadjects[cadjectNow].geometry.vertices[SELECTEDface.a].x+=10;
cadjects[cadjectNow].geometry.vertices[SELECTEDface.b].x+=10;
cadjects[cadjectNow].geometry.vertices[SELECTEDface.c].x+=10;
if(SELECTEDface instanceof THREE.Face4)
{
cadjects[cadjectNow].geometry.vertices[SELECTEDface.d].x+=10;
}
cadjects[cadjectNow].geometry.verticesNeedUpdate = true;
cadjects[cadjectNow].geometry.elementsNeedUpdate = true;
cadjects[cadjectNow].geometry.normalsNeedUpdate = true;
}
感谢所有发布过去问题并给出答案的人。通过仔细阅读过去的问题,我已经能够做到这一点——所以你们已经提供了很大的帮助。在此先感谢您的帮助。(因为这是我在这里发布的第一个问题,所以任何关于如何更好地提出问题的建议也非常受欢迎。)
更新(2013 年 3 月 21 日)——我已按照建议迁移到 r57,更新后的代码如上所示。我还对其进行了调试,使其至少可以像以前一样工作。所以现在几何图形仍然在视觉上动态地改变,但是相交没有正确检测到变化。感谢@WestLangley 迄今为止的鼓舞人心的帖子。