javascript - 如何将 3D obj 文件转换为 three.js 中的粒子

Question

我正在尝试在 three.js 中使用粒子，但是在将 obj 文件(3D 模型)转换为 three.js 中的粒子时出现问题。以下是代码片段。我试过了，但都失败了。

有没有人可以帮助纠正错误或提供任何从 obj 中的 3D 模型获取顶点/粒子的示例？

非常感谢。

var p_geom = new THREE.Geometry();
var p_material = new THREE.ParticleBasicMaterial({
      color: 0xFFFFFF,
      size: 1.5
   });

var loader = new THREE.OBJLoader();

loader.load( 'human.obj',function(object){

      object.traverse( function(child){

         if ( child instanceof THREE.Mesh ) {

            // child.material.map = texture;

            var scale = 10.0;

            object.attributes.position.array.forEach(function() {
               p_geom.vertices.push(new THREE.Vector3(this.x * scale, this.y * scale, this.z * scale));
         
            })
         }
      });
     scene.add(p)

   });

   p = new THREE.ParticleSystem(
      p_geom,
      p_material
   );

Answer 1

您使用的是过时的代码引用。在最近的 three.js 版本中，代码看起来更像下面这样:

const loader = new THREE.OBJLoader();

loader.load('human.obj', function(object) {

  const vertices = [];

  object.traverse(function(child) {
    if (child.isMesh) {
      vertices.push(...child.geometry.attributes.position.array);
    }
  });

  const p_geom = new THREE.BufferGeometry();
  const p_material = new THREE.PointsMaterial({
    color: 0xFFFFFF,
    size: 1.5
  });

  p_geom.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));

  const p = new THREE.Points(p_geom, p_material);
  p.scale.set(10, 10, 10);
  scene.add(p)

});