Get the Geometry or Vertices of MorphedTarget Mesh

[tech_coder]

I made a MorphTarget with 3 influences

A sphere to → 1. Suzanne 2 . Torus and 3 . Square

gui = new dat.GUI()
        gui.add(params, 'value', 0, 1).name('Suzanne').onChange((val) => {
        mesh.morphTargetInfluences[0] = influence
        })
gui = new dat.GUI()
        gui.add(params, 'value', 0, 1).name('Torus').onChange((val) => {
        mesh.morphTargetInfluences[1] = influence
        })
 gui = new dat.GUI()
        gui.add(params, 'value', 0, 1).name('Square').onChange((val) => {
        mesh.morphTargetInfluences[2] = influence
        }) 

And apply all 3 influences randomly lets say
morphTargetInfluence[0] = 0.3
morphTargetInfluence[1] = 0.6
morphTargetInfluence[2] = 0.1

And it results in a mixed shape of Suzanne Torus and Square
Then I export it in GLTF

Upto this Everything Works fine

---

I am trying to make this into rigidbody in ammo.js

createRigidBody(mesh, shape, mass, pos, quat);

For that I need to get the shape which requires the geometry and vertices of the mesh

When I try to get load the mesh and get geometry

geometryofmesh = new THREE.Geometry().fromBufferGeometry(mesh.geometry)

It gets the original geometry of the sphere without the morphvalues
How can I obtain the shape of the morphed mesh with morph values

I did go through this forum https://discourse.threejs.org/t/update-and-get-the-new-mesh-of-a-morph-target/15911
But here the vertices is obtained for one morphtargetinfluence and also on run time .
But I have them stored in the mesh

I know this also invloves ammo.js but for the most part for obtaining the vertices and geometry it depends on three.js so thought this forum would be a great place

[Mugen87]

Have you already tried BufferGeometryUtils.computeMorphedAttributes()?

[tech_coder]

Thanks for the suggestion , But I couldn’t really understand how to use it
Can you help me with the structure of using it

I tried

mesh.computeMorphedAttributes() 

It threw the error

computeMorphedAttributes is not a function

And I couldn’t find any examples of using it
Could you help me with how to use it ?

[Mugen87]

@tech_coder

mesh.computeMorphedAttributes()

Try it like so:

const attributes = BufferGeometryUtils.computeMorphedAttributes( mesh );

You also have to import BufferGeometryUtils from the examples. With the result object, you can build a new buffer geometry.

[tech_coder]

I did get the BufferGeometryUtils and computeMorphedAttribues function work.
But facing another issue
While I do
I receive an error saying

TypeError: Cannot read property 'getX' of undefined
    at n.fromBufferAttribute (three.min.js:410)
    at _calculateMorphedAttributeData (BufferGeometryUtils.js:681)
    at Object.computeMorphedAttributes (BufferGeometryUtils.js:802)

What is the cause for getX error ?

[yannick]

@tech_coder

But facing another issue

I’m getting the same error when I use computeMorphedAttributes() with the webgl_morphtargets example.

[Mugen87]

Seems to work as expected: https://jsfiddle.net/ym30vedc/

[yannick]

Try to call BufferGeometryUtils.computeMorphedAttributes( mesh ) after you have changed Sherify and Twist.

// change the "Spherify" and "Twist" in the GUI
// and you will see the error

setTimeout(()=>{
   console.log( BufferGeometryUtils.computeMorphedAttributes( mesh ) );
},5000)

[Mugen87]

Okay, I can reproduce now. Do you mind filing an issue at GitHub for this runtime error? You can use the following fiddle as a repo case: https://jsfiddle.net/rmx3wofb/1/

[tech_coder]

Just did it GitHub Issue

[yannick]

@Mugen87 Wow that was quick! Thanks a lot for your PR!

[tech_coder]

@Mugen87 @yannick Thanks for the quick fix PR and reply

I ultimately wanted to get the morphed geometry to get the shape and use it to createRigidbody
And I don’t know how to use the attributes once I acquired them

To explain my problem better
I created a morph from a Suzanne to a → Smashed Suzanne
[ But in my practical problem there may be more than 2 morphs ]

Here is the Morphed Mesh

As you can see in the out put it created the rigidbody with the original suzanne mesh

the invisible part is the original mesh

image from enable3d

As mentioned I acquired the attributes but don’t know how to use it to create new rigidbody

[yannick]

I made it work, but it does not look great at all.

@Mugen87 Any idea why?

[tech_coder]

Thanks for helping out
I too tried using it in the Fiddle
and the results are as you said

And even scattered in other morphed meshes that I tried

[yannick]

Maybe in your case, it is easier to use CSG?
(Works with physics as well)

[tech_coder]

Thanks for this
But doesn’t this just cut away the mesh instead of using the morphed mesh
Because there are cases where I want to turn a suzanne to a sphere or even a mixture of more morphs which cannot be formed by union or intersection of meshes

Will this be useful in my case ?

[yannick]

@tech_coder

But doesn’t this just cut away the mesh instead of using the morphed mesh

Yes

@tech_coder

Because there are cases where I want to turn a suzanne to a sphere or even a mixture of more morphs which cannot be formed by union or intersection of meshes

Then, CSG will probably not work for your use case and you somehow have to make computeMorphedAttributes() work.

[tech_coder]

got it thanks for your suggestion