Question

我尝试使用PlaneGeometry创建网格。在我动态更改几何体的顶点之后，mesh.position和mesh.rotation之后不正确。是否可以使用新顶点相应地重新计算这些？

我尝试这样做：

var geometry = new THREE.PlaneGeometry(500, 500);
geometry.dynamic = true;
var material = new THREE.MeshBasicMaterial({
            side: THREE.DoubleSide
});
var plane = new THREE.Mesh(geometry, material);
scene.add(plane);

geometry.vertices[0].x += 15;
geometry.vertices[1].x += 15;
geometry.vertices[2].x += 10;
geometry.vertices[3].x += 10;
geometry.verticesNeedUpdate = true;

这里plane.position仍然是Vector3（0,0,0）。如何将其更新为正确的位置？

Answer 1

平面的位置不是基于顶点的位置，而是顶点相对于平面几何体位置的位置。也就是说，顶点n的世界位置计算为mesh.position + geometry.vertices[n]（如果没有旋转或缩放）。

你应该做的是先移动飞机的中心：

plane.translateX(12.5);
//You may have to update the matrix to see the result:
plane.updateMatrix();

然后更新顶点位置：

//The plane has moved 12.5 units, so the vertices that should move 15 have 2.5 left to move:
geometry.vertices[0].x += 2.5;
geometry.vertices[1].x += 2.5;
//The vertices that should move 10 units have moved 2.5 too many, so we subtract that value from their position:
geometry.vertices[2].x -= 2.5;
geometry.vertices[3].x -= 2.5;
geometry.verticesNeedUpdate = true;

将飞机12.5单位移动的原因是为了保持一切中心。如果这不是一个要求，你可以将平面移动10个单位，只需将5加到顶点0和顶点1。

Answer 2

位置和顶点是独立的东西。可以使网格位于(0, 0, 0)但是在完全不同的位置绘制，因为它的顶点都是大数。因此，顶点位置是对象位置的 relative 位置。对于您的飞机new THREE.PlaneGeometry(500, 500)：

(-250, 250, 0)            (250, 250, 0)
*--------------------------*
|                          |
|                          |
|                          |
|        (0, 0, 0)         |
|            O             |
|                          |
|                          |
|                          |
*--------------------------*
(-250, 250, 0)             (250, -250, 0)

O是此案例的起源。在你转型之后：

(-235, 250, 0)            (265, 250, 0)
   *--------------------------*
   |                          |
  |                          |
  |                          |
  |       (0, 0, 0)          |
 |            O             |
 |                          |
 |                          |
|                          |
*--------------------------*
(-240, 250, 0)             (260, -250, 0)

你得到一个略微偏移的平行四边形，但原点没有移动，因为你从未要求原点移动。它的形状可能如下所示：

                                      (500, 250, 0)            (750, 250, 0)
                                      *--------------------------*
                                      |                          |
                                      |                          |
                                      |                          |
(0, 0, 0)                             |                          |
    O                                 |                          |
                                      |                          |
                                      |                          |
                                      |                          |
                                      *--------------------------*
                                      (500, 250, 0)             (750, -250, 0)

它仍然完全有效。你想做什么？通过移动顶点位置移动网格绝对不是一个好习惯，但看起来好像你也试图使网格变形。如果由于某种原因你需要独立地移动网格顶点，但总是希望网格的位置位于其中心：

var boundingBox = new THREE.Box3().setFromObject(mesh);
var centerDisplacement = boundingBox.getCenter().sub(mesh.position); // Difference between your mesh's position and its center
geometry.vertices[0].add(centerDisplacement);
geometry.vertices[1].add(centerDisplacement);
geometry.vertices[2].add(centerDisplacement);
geometry.vertices[3].add(centerDisplacement);
geometry.verticesNeedUpdate = true;

动态更改顶点位置后网格位置无效

2 个答案: