How to make 3D point model

Questions
, ,
1

Hello everyone,
Kinda new to Threejs here,

I loaded a FBX model and it looks like this :

heartmaterial
heartmaterial1733Ă—717 31.6 KB

code source : `

const manager = new THREE.LoadingManager();
manager.addHandler(/\.tga$/i, new TGALoader());

const mesh1 = new FBXLoader(manager);
// const path = require("./models/fbx/Walking.fbx");
mesh1.load("/models/fbx/HEART.fbx", function (object) {
  object.scale.multiplyScalar(0.02);
  object.position.x = objectsDistance * 0.5;
  object.position.y = -objectsDistance * 0.2;
  object.traverse(function (child) {
    if (child.isMesh) {
      // child.material.map = stars;
      // child.geometry = new THREE.BufferGeometry();
      // console.log(child);
      // const uvs = child.geometry.attributes.uv.array;
      // child.geometry.setAttribute(
      //   "uv",
      //   new THREE.Float32BufferAttribute(uvs, 4)
      // );
      // child.material = new THREE.PointsMaterial({
      //   color: 0xff0000,
      //   size: 0.002,
      //   transparent: true,
      // });
      // console.log(child.geometry.attributes.uv);
      child.castShadow = true;
      child.receiveShadow = true;
    }
  });
  scene.add(object);
});

`

and i want to transform it to Points material ( please correct me if im wrong), so i did this :

const manager = new THREE.LoadingManager();
    manager.addHandler(/\.tga$/i, new TGALoader());

    const mesh1 = new FBXLoader(manager);
    // const path = require("./models/fbx/Walking.fbx");
    mesh1.load("/models/fbx/HEART.fbx", function (object) {
      object.scale.multiplyScalar(0.02);
      object.position.x = objectsDistance * 0.5;
      object.position.y = -objectsDistance * 0.2;
      object.traverse(function (child) {
        if (child.isMesh) {
          // child.material.map = stars;
          // child.geometry = new THREE.BufferGeometry();
          console.log(child);
          const uvs = child.geometry.attributes.uv.array;
          child.geometry.setAttribute(
            "uv",
            new THREE.Float32BufferAttribute(uvs, 4)
          );
          child.material = new THREE.PointsMaterial({
            color: 0xff0000,
            size: 0.002,
            transparent: true,
          });
          console.log(child.geometry.attributes.uv);
          child.castShadow = true;
          child.receiveShadow = true;
        }
      });
      scene.add(object);
    });

and the result look like this :

pointheart
pointheart1772Ă—792 14.9 KB

any help please ? thank you

2

@Mugen87 any help here please ? thank you :pray:

3

Unfortunately, your approach does not work. You can’t assign an instance of THREE.PointsMaterial to a mesh. You have to use the geometry of a mesh to create an instance of THREE.Points . It’s then fine to work with THREE.PointsMaterial.

BTW: The following code does not make sense:

const uvs = child.geometry.attributes.uv.array;
child.geometry.setAttribute(
    "uv",
    new THREE.Float32BufferAttribute(uvs, 4)
;

What is your motivation here?

1 Like
4

Thank you for your response!

It was to get the “uv’s” of my fbx model (well, obviously I’m wrong).

OK I see, how can use the geometry of this mesh in this case please ?

5

Your loaded model consists of both model.geometry and model.material, you can use point material on the model.geometry, if that makes sense?

6

it’s clear, thank you !

7

I changed the child material and it works.

I tried to do the same with child.geometry but no results.

const manager = new THREE.LoadingManager();
    manager.addHandler(/\.tga$/i, new TGALoader());

    const mesh1 = new FBXLoader(manager);
    mesh1.load("/models/fbx/HEART.fbx", function (object) {
      object.scale.multiplyScalar(0.02);
      object.position.x = objectsDistance * 0.5;
      object.position.y = -objectsDistance * 0.2;
      object.traverse(function (child) {
        if (child.isMesh && child.geometry.isBufferGeometry) {
          const bg = child.geometry;
          const bm = child.material;

          child.material = new THREE.MeshStandardMaterial({
            color: colour,
            map: bm.map,
          });
          child.geometry.applyMatrix(
            new THREE.Matrix4().makeTranslation(5, 0, 0)
          );

          child.material.shininess = 10;
          child.material.refractionRatio = 1;
          child.material.reflectivity = 1;
          child.material.metalness = 1;
          child.castShadow = true;
          child.receiveShadow = true;
          // object.rotation.z = -90 * (Math.PI / 180);
        }
      });

      scene.add(object);
    });
8

If you want to have points, then you need to use THREE.Points and THREE.PointsMaterial :thinking:

2 Likes
9

That’s what i’m trying to do actually, but when i do this, it doesn’t work.

i’ll continu and try to figure it out !

object.traverse(function (child) {
        if (child.isMesh && child.geometry.isBufferGeometry) {
          const bg = child.geometry;
          const bm = child.material;
          child.geometry = new THREE.Points();
          child.material = new THREE.PointsMaterial({
            color: colour,
            map: bm.map,
            size: 0.1,
          });
10

Have a look here three.js docs

Try like this const p = new THREE.Points( child.geometry, pointsMaterial );

3 Likes