CODEWITHSUNDEEP
javascriptthree.js
Sloan
Sloan

Reputation: 79

how to convert 3D obj file to particles in three.js

I'm trying to play around with particles in three.js but, there's a problem with converting obj file (3D model) into particles in three.js. The following is the code snippets. I tried but, all failed.

Is there anyone who can help correcting the errors or provide with any examples of getting vertices/particles from a 3D model in obj?

Thanks a lot.

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
   );

Upvotes: 3

Views: 1533

Answers (1)

Mugen87
Mugen87

Reputation: 31026

You are using an outdated code reference. With recent three.js version, the code looks more like the following:

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)

});

Upvotes: 4

Related Questions