# Get the Geometry or Vertices of MorphedTarget Mesh

**URL:** <https://discourse.threejs.org/t/get-the-geometry-or-vertices-of-morphedtarget-mesh/23459>\
**Category:** Questions\
**Tags:** ammo-ammojs, morph-targets, geometry\
**Created:** [February 13, 2021, 2:48pm UTC](https://discourse.threejs.org/t/get-the-geometry-or-vertices-of-morphedtarget-mesh/23459 "2021-02-13T14:48:35Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![tech\_coder](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tech_coder/32/15995_2.png) [@tech\_coder](https://discourse.threejs.org/u/tech_coder)\
**Post date:** [February 13, 2021, 2:48pm UTC](https://discourse.threejs.org/t/get-the-geometry-or-vertices-of-morphedtarget-mesh/23459/1 "2021-02-13T14:48:35Z")

</div>

I made a MorphTarget with 3 influences

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

```javascript
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

```javascript
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

```javascript
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](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

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [February 14, 2021, 9:07am UTC](https://discourse.threejs.org/t/get-the-geometry-or-vertices-of-morphedtarget-mesh/23459/2 "2021-02-14T09:07:14Z")

</div>

Have you already tried [BufferGeometryUtils.computeMorphedAttributes()](https://threejs.org/docs/index.html#examples/en/utils/BufferGeometryUtils.computeMorphedAttributes)?

---

<div class="post-metadata">

**Author:** ![tech\_coder](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tech_coder/32/15995_2.png) [@tech\_coder](https://discourse.threejs.org/u/tech_coder)\
**Post date:** [February 14, 2021, 5:14pm UTC](https://discourse.threejs.org/t/get-the-geometry-or-vertices-of-morphedtarget-mesh/23459/3 "2021-02-14T17:14:06Z")

</div>

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

```javascript
mesh.computeMorphedAttributes() 

```

It threw the error

```javascript
computeMorphedAttributes is not a function

```

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

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [February 14, 2021, 7:26pm UTC](https://discourse.threejs.org/t/get-the-geometry-or-vertices-of-morphedtarget-mesh/23459/4 "2021-02-14T19:26:33Z")

</div>

> [@tech\_coder](#):
>
> `mesh.computeMorphedAttributes() `

Try it like so:

```js
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.

---

<div class="post-metadata">

**Author:** ![tech\_coder](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tech_coder/32/15995_2.png) [@tech\_coder](https://discourse.threejs.org/u/tech_coder)\
**Post date:** [February 15, 2021, 2:06pm UTC](https://discourse.threejs.org/t/get-the-geometry-or-vertices-of-morphedtarget-mesh/23459/5 "2021-02-15T14:06:17Z")

</div>

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

```javascript
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 ?

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yannick/32/8539_2.png) [@yannick](https://discourse.threejs.org/u/yannick)\
**Post date:** [February 15, 2021, 4:28pm UTC](https://discourse.threejs.org/t/get-the-geometry-or-vertices-of-morphedtarget-mesh/23459/6 "2021-02-15T16:28:02Z")

</div>

> [@tech\_coder](#):
>
> But facing another issue

I’m getting the same error when I use `computeMorphedAttributes()` with the [webgl\_morphtargets example](https://threejs.org/examples/#webgl_morphtargets).

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [February 15, 2021, 4:59pm UTC](https://discourse.threejs.org/t/get-the-geometry-or-vertices-of-morphedtarget-mesh/23459/8 "2021-02-15T16:59:14Z")

</div>

Seems to work as expected: [https://jsfiddle.net/ym30vedc/](https://jsfiddle.net/ym30vedc/)

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yannick/32/8539_2.png) [@yannick](https://discourse.threejs.org/u/yannick)\
**Post date:** [February 15, 2021, 7:40pm UTC](https://discourse.threejs.org/t/get-the-geometry-or-vertices-of-morphedtarget-mesh/23459/9 "2021-02-15T19:40:50Z")

</div>

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

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

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

```

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [February 15, 2021, 7:56pm UTC](https://discourse.threejs.org/t/get-the-geometry-or-vertices-of-morphedtarget-mesh/23459/10 "2021-02-15T19:56:25Z")

</div>

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/](https://jsfiddle.net/rmx3wofb/1/)

---

<div class="post-metadata">

**Author:** ![tech\_coder](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tech_coder/32/15995_2.png) [@tech\_coder](https://discourse.threejs.org/u/tech_coder)\
**Post date:** [February 16, 2021, 3:19am UTC](https://discourse.threejs.org/t/get-the-geometry-or-vertices-of-morphedtarget-mesh/23459/11 "2021-02-16T03:19:09Z")

</div>

Just did it [GitHub Issue](https://github.com/mrdoob/three.js/issues/21287)

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yannick/32/8539_2.png) [@yannick](https://discourse.threejs.org/u/yannick)\
**Post date:** [February 18, 2021, 12:39pm UTC](https://discourse.threejs.org/t/get-the-geometry-or-vertices-of-morphedtarget-mesh/23459/12 "2021-02-18T12:39:03Z")

</div>

@Mugen87 Wow that was quick! Thanks a lot for your [PR](https://github.com/mrdoob/three.js/pull/21303)!

---

<div class="post-metadata">

**Author:** ![tech\_coder](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tech_coder/32/15995_2.png) [@tech\_coder](https://discourse.threejs.org/u/tech_coder)\
**Post date:** [February 19, 2021, 4:34pm UTC](https://discourse.threejs.org/t/get-the-geometry-or-vertices-of-morphedtarget-mesh/23459/13 "2021-02-19T16:34:50Z")

</div>

@Mugen87@yannick Thanks for the quick fix [PR](https://github.com/mrdoob/three.js/pull/21303) 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]

 ![szannemorph](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/a/fa71be51ef4ab8c47a264124403d2a132f575bf2.jpeg)

Here is the [Morphed Mesh](https://www.dropbox.com/s/sepnhqti6zy8vxp/suzannemorphed.glb?dl=0)

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

![suzannemorphex](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/5/555184085fe43bb01dda6a5b83e5602835d47ac8.jpeg)  
the invisible part is the original mesh

![szannemorph2](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/9/49c26220b0f807ac89282622f3f9da001a1eab3c.jpeg)  
image from enable3d

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

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yannick/32/8539_2.png) [@yannick](https://discourse.threejs.org/u/yannick)\
**Post date:** [February 19, 2021, 9:03pm UTC](https://discourse.threejs.org/t/get-the-geometry-or-vertices-of-morphedtarget-mesh/23459/14 "2021-02-19T21:03:48Z")

</div>

I [made it work](https://enable3d.io/examples/morphed-mesh.html), but it does not look great at all.

@Mugen87 Any idea why?

---

<div class="post-metadata">

**Author:** ![tech\_coder](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tech_coder/32/15995_2.png) [@tech\_coder](https://discourse.threejs.org/u/tech_coder)\
**Post date:** [February 20, 2021, 3:33am UTC](https://discourse.threejs.org/t/get-the-geometry-or-vertices-of-morphedtarget-mesh/23459/15 "2021-02-20T03:33:47Z")

</div>

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

 ![worsemorph2](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/3/2369035feefe06d4384eae92f72bf9594ff3a86a.jpeg)

And even scattered in other morphed meshes that I tried

 ![worsemorph1](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/5/850f000f2c4170e9092df6c8438185ad322eb55a.jpeg)

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yannick/32/8539_2.png) [@yannick](https://discourse.threejs.org/u/yannick)\
**Post date:** [February 20, 2021, 11:58am UTC](https://discourse.threejs.org/t/get-the-geometry-or-vertices-of-morphedtarget-mesh/23459/16 "2021-02-20T11:58:47Z")

</div>

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

https://codepen.io/yandeu/embed/preview/MWbvQeg?height=300&slug-hash=MWbvQeg&default-tabs=js,result&host=https://codepen.io

---

<div class="post-metadata">

**Author:** ![tech\_coder](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tech_coder/32/15995_2.png) [@tech\_coder](https://discourse.threejs.org/u/tech_coder)\
**Post date:** [February 20, 2021, 12:51pm UTC](https://discourse.threejs.org/t/get-the-geometry-or-vertices-of-morphedtarget-mesh/23459/17 "2021-02-20T12:51:44Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yannick/32/8539_2.png) [@yannick](https://discourse.threejs.org/u/yannick)\
**Post date:** [February 20, 2021, 2:41pm UTC](https://discourse.threejs.org/t/get-the-geometry-or-vertices-of-morphedtarget-mesh/23459/18 "2021-02-20T14:41:58Z")

</div>

> [@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.

---

<div class="post-metadata">

**Author:** ![tech\_coder](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tech_coder/32/15995_2.png) [@tech\_coder](https://discourse.threejs.org/u/tech_coder)\
**Post date:** [February 20, 2021, 3:30pm UTC](https://discourse.threejs.org/t/get-the-geometry-or-vertices-of-morphedtarget-mesh/23459/19 "2021-02-20T15:30:21Z")

</div>

got it thanks for your suggestion 🙂