如何使用three.js在平面上包裹飞机？

Question

我对three.js相对较新，正在尝试定位和操纵平面对象以具有将其放置在球体对象（或任何与此相关的物体）的表面上的效果，从而使平面采用对象表面的形式。 目的是稍后能够在表面上移动平面。

我将平面放置在球体的前面，并通过平面的顶点进行索引，向该球体投射射线以检测与球体的相交。 然后，我尝试更改所述顶点的z位置，但未达到所需的结果。 谁能给我一些如何使它工作的指导，或者确实建议另一种方法？

这就是我尝试更改顶点（在球体表面“可见”的偏移量为1）的方式；

planeMesh.geometry.vertices[vertexIndex].z = collisionResults[0].distance - 1;

确保在渲染之前设置以下内容；

planeMesh.geometry.verticesNeedUpdate = true;
planeMesh.geometry.normalsNeedUpdate = true;

我有一个小提琴，可以显示我的位置，在这里我将光线投射到z中，并且没有与球体相交（碰撞），也无法按照我希望的方式更改平面。

http://jsfiddle.net/stokewoggle/vuezL/

您可以使用向左和向右箭头（无论如何都是镀铬）围绕场景旋转相机，以查看平面的形状。 我发现球体通透了，因为我发现更好地观察飞机很有用。

编辑：更新了小提琴并更正了描述错误。

Answer 1

很抱歉造成您的延迟，但我花了几天的时间才弄清楚。 碰撞不起作用的原因是（就像我们怀疑的那样）planeMesh顶点在局部空间中，这与从球体中心开始基本上相同，而不是您所期望的。 起初，我以为快速解决方案是像在链接到他的github three.js碰撞示例中那样应用worldMatrix，就像stemkoski所做的那样，但这并没有奏效，因为平面本身是在x和y坐标中定义的，上下，左右-在创建平面2D planeMesh时不会在本地生成z信息（深度）。

最终的工作是手动设置平面每个顶点的z分量。 您最初希望平面位于z = 201，所以我只是将代码移动到遍历每个顶点的循环内，并手动将每个顶点设置为z = 201； 现在，所有射线的起始位置都是正确的（全局），射线方向为（0,0，-1）导致正确的碰撞。

var localVertex = planeMesh.geometry.vertices[vertexIndex].clone();
localVertex.z = 201;

还有一件事是为了使平面包装的形状绝对完美，而不是使用（0,0，-1）作为每个射线方向，我通过从球体的中心位置位置减去每个顶点来手动计算每个射线方向，然后归一化结果向量。 现在，collisionResult相交点会更好。

var directionVector = new THREE.Vector3();
directionVector.subVectors(sphereMesh.position, localVertex);
directionVector.normalize();
var ray = new THREE.Raycaster(localVertex, directionVector);

这是一个工作示例： http : //jsfiddle.net/FLyaY/1/

如您所见，planeMesh紧密贴合在球体上，有点像贴片或创可贴。 :)

希望这可以帮助。 感谢您在Three.js的github页面上发布问题-在这里我不会看到它。 起初我以为这是THREE.Raycaster中的一个错误，但最终它只是用户（我的）错误。 通过解决这个问题，我学到了很多有关碰撞代码的知识，以后我将在自己的3D游戏项目中使用它。 您可以在以下位置查看我的游戏之一： https : //github.com/erichlof/SpacePong3D

祝您好运！ -埃里希

Answer 2

您的光线开始位置不好。 可能是由于顶点坐标是平面局部的。 您是从球体内开始光线投射的，因此它永远不会撞击任何东西。

我像这样更改了光线的起始位置作为测试，并获得726次碰撞：

var rayStart = new THREE.Vector3(0, 0, 500);
var ray = new THREE.Raycaster(rayStart, new THREE.Vector3(0, 0, -1));

分叉的jsfiddle： http : //jsfiddle.net/H5YSL/

我认为您需要将顶点坐标转换为世界坐标才能正确获取位置。 从文档和示例中应该很容易看出这一点。