通过 Three.js 中的特定顶点更改对象的位置

Question

我想通过 three.js 中对象的特定顶点更改对象的位置。我有这个 .OBJ glasses model which has 8,856 vertices。这是我的代码：

注意： OBJLoader.js是必须的。

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vertices Positioning</title>
  </head>
  <body>
    <canvas
      id="modelCanvas"
      width="600px"
      height="400px"
    ></canvas>
  </body>

  <!-- JavaScript -->
  <script src="js/three.js"></script>
  <script src="js/OBJLoader.js"></script>

  <script src="script.js"></script>
</html>

script.js:

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, 600 / 400, 0.1, 1000);

const renderer = new THREE.WebGLRenderer({
  antialias: true,
  alpha: true,
  canvas: modelCanvas,
});
renderer.setSize(600, 400);
renderer.setClearColor(0x000000, 0);
document.body.appendChild(renderer.domElement);

const loader = new THREE.OBJLoader();
let obj3D = new THREE.Object3D();

loader.load(
  "./model.obj",
  function (obj) {
    obj3D = obj;
    console.log(obj3D);
    scene.add(obj3D);
  }
);

camera.position.z = 5;

const render = function () {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
};

render();

我的意思是说，对象在它的default location of 0, 0 (Red dot: default position, Cyan dot: Vertex position). Now if I want to get the position of a specific vertex (top left corner) and change the vertex's position，对象的位置也发生了变化（青点：对象位置，蓝点：新顶点位置）。这就是我想要在 Three.js.

中实现的目标

奖金：

我做了一些研究，发现顶点位于 Object3D > Children > (Index of the Mesh) > geometry > attributes，check this image。这包含法线、位置和 uv。它们中的每一个都包含一个顶点数组。但是这个数组只有一个位置编号，不知道是X轴，Y轴还是Z轴。

感谢您的帮助！

Answer 1

position 属性包含这样的三元组：[ x1, y1, z1, x2, y2, z2, ... ].

所以要制作第一个顶点的 Vector3，您可以这样做：

let v = new THREE.Vector3(
  mesh.geometry.attributes.position.array[ 0 ], 
  mesh.geometry.attributes.position.array[ 1 ], 
  mesh.geometry.attributes.position.array[ 2 ]
);

你也可以这样使用Vector3.fromBufferAttribute：

let v = new THREE.Vector3().fromBufferAttribute( mesh.geometry.attributes.position, i );

最佳情况下，您不必创建新的 Vector3。

Mesh.position is already a Vector3, so you can use the Vector3.set 方法与单独引用的索引，或者像这样直接在位置上使用 Vector3.fromBufferAttribute：

mesh.position.fromBufferAttribute( mesh.geometry.attributes.position, i );

通过 Three.js 中的特定顶点更改对象的位置

Changing position of an object by a specific vertex in Three.js

javascript

position

vertex

three.js