如何在 Three.js 中获取蒙皮网格顶点的全局位置？

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 200);
camera.position.z = 3;
camera.position.y = 2;
camera.lookAt(0, 0, 0);

const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(1, 1, 1);
geometry.morphTargets.push({name: "morph", vertices: []});
for (const vertex of geometry.vertices) {
  geometry.skinIndices.push(new THREE.Vector4(vertex.x < 0 ? 0 : 1, 0, 0, 0));
  geometry.skinWeights.push(new THREE.Vector4(1, 0, 0, 0));
  geometry.morphTargets[0].vertices.push(vertex.clone().add(new THREE.Vector3(0, 1, 0)));
}

const material = new THREE.MeshPhongMaterial({
  skinning: true,
  emissive: 0xffffff,
  wireframe: true,
  morphTargets: true
});

const mesh = new THREE.SkinnedMesh(geometry, material);

const bones = [new THREE.Bone(), new THREE.Bone()];
for (const bone of bones) {
  mesh.add(bone);
}

const skeleton = new THREE.Skeleton(bones);
mesh.bind(skeleton);

bones[0].position.x = -2;
bones[1].position.x = 2;
mesh.morphTargetInfluences[0] = 1;
scene.add(mesh);

// This code assigns (0.5, 0.5, 0.5) to pos,
// but I want to know the code which assigns (2.5, 1.5, 0.5) to pos. 
const pos = mesh.geometry.vertices[0].clone().applyMatrix4(mesh.matrixWorld);
console.log(`(${pos.x}, ${pos.y}, ${pos.z})`);

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

body {
  margin: 0;
  overflow: hidden;
}
canvas {
  width: 100%;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, 2, 0.1, 200);
camera.position.z = 3;
camera.position.y = 2;
camera.lookAt(0, 0, 0);

const renderer = new THREE.WebGLRenderer({canvas:document.querySelector('canvas')});
renderer.setSize(512, 256, false);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(1, 1, 1);
geometry.morphTargets.push({name: "morph", vertices: []});
for (const vertex of geometry.vertices) {
  geometry.skinIndices.push(new THREE.Vector4(vertex.x < 0 ? 0 : 1, 0, 0, 0));
  geometry.skinWeights.push(new THREE.Vector4(1, 0, 0, 0));
  geometry.morphTargets[0].vertices.push(vertex.clone().add(new THREE.Vector3(0, 1, 0)));
}

const material = new THREE.MeshPhongMaterial({
  skinning: true,
  emissive: 0xffffff,
  wireframe: true,
  morphTargets: true
});

const mesh = new THREE.SkinnedMesh(geometry, material);

const bones = [new THREE.Bone(), new THREE.Bone()];
for (const bone of bones) {
  mesh.add(bone);
}

const skeleton = new THREE.Skeleton(bones);
mesh.bind(skeleton);

bones[0].position.x = -2;
bones[1].position.x = 2;
mesh.morphTargetInfluences[0] = 1;
scene.add(mesh);

const putMeshesAtSkinnedVertices = (function() {

  // These are so we can avoid doing allocations
  // in the inner loop.
  const position = new THREE.Vector3();
  const transformed = new THREE.Vector3();
  const temp1 = new THREE.Vector3();
  const tempBoneMatrix = new THREE.Matrix4();
  const tempSkinnedVertex = new THREE.Vector3();
  const tempSkinned = new THREE.Vector3();

  return function putMarkersAtSkinnedVertices(mesh, scene, marker, markerMaterial, markers) {
    const bindMatrix = mesh.bindMatrix;
    const bindMatrixInverse = mesh.bindMatrixInverse;
    const geometry = mesh.geometry;
    const vertices = geometry.vertices;
    const morphTargets = geometry.morphTargets;
    const skeleton = mesh.skeleton;

    for (let vndx = 0; vndx < vertices.length; ++vndx) {
      position.copy(vertices[vndx]);
      transformed.copy(position);

      for (let i = 0; i < morphTargets.length; ++i) {
        temp1.copy(morphTargets[i].vertices[vndx]);
        transformed.add(temp1.sub(position).multiplyScalar(mesh.morphTargetInfluences[i]));
      }

      tempSkinnedVertex.copy(transformed).applyMatrix4(bindMatrix);
      tempSkinned.set(0, 0, 0);

      const skinIndices = geometry.skinIndices[vndx];
      const skinWeights = geometry.skinWeights[vndx];

      for (let i = 0; i < 4; ++i) {
        const boneNdx = skinIndices.getComponent(i);
        const weight = skinWeights.getComponent(i);
        tempBoneMatrix.fromArray(skeleton.boneMatrices, boneNdx * 16);
        temp1.copy(tempSkinnedVertex);
        tempSkinned.add(temp1.applyMatrix4(tempBoneMatrix).multiplyScalar(weight));
      }

      transformed.copy(tempSkinned).applyMatrix4(bindMatrixInverse);
      transformed.applyMatrix4(mesh.matrixWorld);

      // create them the first time this is called
      let markerMesh = markers[vndx];
      if (!markerMesh) {
        markerMesh = new THREE.Mesh(marker, markerMaterial);
        markers[vndx] = markerMesh;
        scene.add(markerMesh);
      }

      markerMesh.position.copy(transformed);
    }
  }
}());


// Make sure all matrices are up to date
scene.updateMatrixWorld();
skeleton.update();

const marker = new THREE.BoxBufferGeometry(0.1, 0.1, 0.1);
const markerMaterial = new THREE.MeshBasicMaterial({color: 0xFF0000});
const markers = [];

putMeshesAtSkinnedVertices(mesh, scene, marker, markerMaterial, markers);

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>
<canvas></canvas>