我如何“包装”飞机上有three.js球？ [英] How do I 'wrap' a plane over a sphere with three.js?

问题描述

我是比较新的three.js，我试图定位和操纵的平面对象具有铺设在一个球体对象的表面的（对于这个问题或任何）的效果，从而使平面取的形式物体表面。其意图是能够移动的平面的表面上以后。

I am relatively new to three.js and am trying to position and manipulate a plane object to have the effect of laying over the surface of a sphere object (or any for that matter), so that the plane takes the form of the object surface. The intention is to be able to move the plane on the surface later on.

我通过飞机的顶点定位在球体和索引的前面的平面铸造射线朝向球体以检测与球体的交点。然后我试图改变所述顶点的​​z轴位置，但它并没有达到预期的效果。任何人都可以给我如何得到这个工作一些指导，或者甚至建议另一种方法是什么？

I position the plane in front of the sphere and index through the plane's vertices casting a ray towards the sphere to detect the intersection with the sphere. I then try to change the z position of said vertices, but it does not achieve the desired result. Can anyone give me some guidance on how to get this working, or indeed suggest another method?

这是我试图改变的顶点（与偏移1是'对'球体表面可见）;

This is how I attempt to change the vertices (with an offset of 1 to be visible 'on' the sphere surface);

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

确保设置渲染前以下;

Making sure to set the following before rendering;

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

我有一个小提琴，显示我在哪里，在这里我投我的光线在Z和我没有得到交​​点（碰撞）的球体，而无法改变飞机我希望的方式。

I have a fiddle that shows where I am, here I cast my rays in z and I do not get intersections (collisions) with the sphere, and cannot change the plane in the manner I wish.

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

您可以左右旋转与左，右箭头（在Chrome反正）现场摄像机看到平面的形状。我所做的球体看穿我觉得有用，看飞机更好。

You can rotate the camera around the scene with the left and right arrows (in chrome anyway) to see the shape of the plane. I have made the sphere see through as I find it useful to see the plane better.

编辑：更新小提琴和纠正错误的说明

Updated fiddle and corrected description mistake.

推荐答案

抱歉耽搁，但我花了几天推测这一个。为什么碰撞没有工作的原因是因为（就像我们曾经怀疑）的planeMesh顶点是在本地空间，这在本质上是一样的开始，在球体的中心，而不是你期待什么。起初，我以为一个快速解决将是应用worldMatrix像stemkoski做了他的github上three.js碰撞比如我联系，但最终没有工作或者是因为飞机本身在x和y坐标被定义，上下，左右 - 但是当你创建一个2D平面planeMesh没有Z信息（深度）是本地制造

Sorry for the delay, but it took me a couple of days to figure this one out. The reason why the collisions were not working was because (like we had suspected) the planeMesh vertices are in local space, which is essentially the same as starting in the center of the sphere and not what you're expecting. At first, I thought a quick-fix would be to apply the worldMatrix like stemkoski did on his github three.js collision example I linked to, but that didn't end up working either because the plane itself is defined in x and y coordinates, up and down, left and right - but no z information (depth) is made locally when you create a flat 2D planeMesh.

什么结束了工作的手动设置平面的每个顶点的z分量。你有渊源想飞机是在z = 201，所以我刚搬到循环中的code表示经过每一个顶点，我手动设置每个顶点到z = 201;现在，所有的线启动位置是正确的（全球），并具有光线方向（0,0，-1）导致了正确的冲突。

What ended up working is manually setting the z component of each vertex of the plane. You had originaly wanted the plane to be at z = 201, so I just moved that code inside the loop that goes through each vertex and I manually set each vertex to z = 201; Now, all the ray start-positions were correct (globally) and having a ray direction of (0,0,-1) resulted in correct collisions.

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

还有一件事是，为了使而是采用了平面包装的形状绝对完美的，（0,0，-1）为每条光线的方向，我手动从球体的​​中心减去每一个顶点计算每条光线的方向位置定位和正火所得的载体。现在，collisionResult交叉点会更好。

One more thing was in order to make the plane-wrap absolutely perfect in shape, instead of using (0,0,-1) as each ray direction, I manually calculated each ray direction by subtracting each vertex from the sphere's center position location and normalizing the resulting vector. Now, the collisionResult intersection point will be even better.

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

下面是一个工作的例子： http://jsfiddle.net/FLyaY/1/

Here is a working example: http://jsfiddle.net/FLyaY/1/

正如你所看到的，planeMesh适合紧贴球体上的，有点像一个补丁或者一个创可贴。 ：）

As you can see, the planeMesh fits snugly on the sphere, kind of like a patch or a band-aid. :)

希望这有助于。感谢张贴在three.js的GitHub的页面的问题 - 我没有看到它在这里。起初我还以为是在THREE.Raycaster的错误，但最终它只是用户（我的）错误。我学到了很多关于碰撞code，从工作这个问题，我将在后面用它记下我自己的3D游戏项目就行了。您可以检查出我的游戏之一： https://github.com/erichlof/SpacePong3D

Hope this helps. Thanks for posting the question on three.js's github page - I wouldn't have seen it here. At first I thought it was a bug in THREE.Raycaster but in the end it was just user (mine) error. I learned a lot about collision code from working on this problem and I will be using it later down the line in my own 3D game projects. You can check out one of my games at: https://github.com/erichlof/SpacePong3D

祝您好运给你！ -Erich

Best of luck to you! -Erich

这篇关于我如何“包装”飞机上有three.js球？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！