时间戳

首页 > 解决方案 > 动态更改顶点位置后网格位置无效

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

问题描述

我尝试使用 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)。如何将其更新为正确的位置？

标签： javascriptthree.js

解决方案

位置和顶点是独立的东西。网格可能位于(0, 0, 0)但绘制在完全不同的位置，因为它的顶点都是大数。因此，顶点位置是相对于对象位置的位置。对于您的飞机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;

推荐阅读