将箭头从一个网格对象绘制到另一个网格对象的表面时出现问题

时间:2013-10-19 21:04:38

标签: javascript opengl-es three.js raycasting

我正在尝试从一个网格对象到另一个网格对象绘制一个箭头。但是如果我直接使用它们的位置并在箭头助手中作为参数发送,那么箭头就会进入对象内部,因为对象的位置意味着它的中心。

所以我创建了对象,我正在使用raycaster。

      var ray = new THREE.Raycaster(sourcePos, direction.clone().normalize());

这里原点是源对象的位置和方向是目标方向的源。 然后,当我与目标相交时,我正在拍摄碰撞结果,即

      var collisionResults = ray.intersectObject(target);

然后我计算第一次光线与目标相交的距离:

      var length=collisionResults[0].distance;

然后,使用以下参数创建箭头:

      var arrow = new THREE.ArrowHelper(direction.clone().normalize(), sourcePos, length, 0xaa0000);
      scene.add( arrow );

箭头按预期创建:

      helper_methods.draw_arrow(mesh1,mesh2);
      helper_methods.draw_arrow(mesh1,mesh2);

但是:

      helper_methods.draw_arrow(mesh2,mesh3);

它表示“collisionResults [0]”为空。我无法弄清楚原因。任何帮助表示赞赏。 下面是Iam使用的代码片段。我还提到了辅助方法:

var mesh1 = helper_methods.create_mesh();
mesh1.position.set(100,0,0);
scene.add( mesh1);

var mesh2 = helper_methods.create_mesh();
mesh2.position.set(300,0,0);
scene.add( mesh2);

var mesh3 = helper_methods.create_mesh();
mesh3.position.set(100,200,0);
scene.add( mesh3);


helper_methods.draw_arrow(mesh1,mesh2);
helper_methods.draw_arrow(mesh1,mesh2);
helper_methods.draw_arrow(mesh2,mesh3);

以及我正在使用的辅助方法:

create_mesh: function(){

var darkMaterial = new THREE.MeshBasicMaterial( { color: 0xffffcc } );
var geometry=new THREE.CylinderGeometry( 30, 30, 50,100,1 );
var mesh = new THREE.Mesh( geometry, darkMaterial );
return mesh;
},



draw_arrow: function(source,target){

var sourcePos = new THREE.Vector3(source.position.x, source.position.y, source.position.z);
var targetPos = new THREE.Vector3(target.position.x, target.position.y, target.position.z);
var direction = new THREE.Vector3().subVectors(targetPos, sourcePos);

var ray = new THREE.Raycaster(sourcePos, direction.clone().normalize());
var collisionResults = ray.intersectObject(target);
var length=collisionResults[0].distance;
var arrow = new THREE.ArrowHelper(direction.clone().normalize(), sourcePos, length,    0xaa0000);

scene.add( arrow );
return arrow;

1 个答案:

答案 0 :(得分:0)

有一种更简单的方法可以做到这一点。

方法1

  1. 你是从一个网格表面上的一个点绘制到另一个网格表面上的另一个点。
  2. 您拥有对象中心的位置,这意味着您还拥有表面的位置
    • 对象的顶点都以原点(本地中心)为中心
    • 您对象的中心由您提供的变换矩阵进行变换。
    • 真正做的是转换所有这些顶点位置。
    • 那个顶点位置(仍然)在表面上,你所要做的就是变换它。
  3. 现在,如果您知道要使用哪个顶点,则可以使用,这听起来可能就是您提出问题的方式。但是,如果你只是想要一个箭头从一个网格指向另一个网格,而不是通过网格戳,那么下一个方法可能会更好。

    方法2

    如果您只想从一个网格指向另一个网格,并且表面上的完全点并不重要,那么这是更好的方法。您所做的是为网格计算边界框边界球,并使用它快速找到如何绘制箭头。

    1. 生成边界量

      一个。当您读入网格的所有顶点时,请跟踪哪个顶点距离中心最远。最后,这将为您提供包含网格的球体的半径。

      湾您可以跟踪6个方向(+ -x,y,z)中每个方向的最大距离,以生成边界框。

    2. 计算从边界体表面到另一个体表面的直线。既然你有一个盒子或一个球体,这应该很容易(特别是对于球体)。