# Updating vertices on blendshape (shape key)?

**URL:** <https://discourse.threejs.org/t/updating-vertices-on-blendshape-shape-key/33913>\
**Category:** Questions\
**Tags:** vertices, mesh, geometry\
**Created:** [January 20, 2022, 6:43pm UTC](https://discourse.threejs.org/t/updating-vertices-on-blendshape-shape-key/33913 "2022-01-20T18:43:05Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![unix](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/unix/32/23661_2.png) [@unix](https://discourse.threejs.org/u/unix)\
**Post date:** [January 20, 2022, 6:43pm UTC](https://discourse.threejs.org/t/updating-vertices-on-blendshape-shape-key/33913/1 "2022-01-20T18:43:05Z")

</div>

Hello there, I have some troubles updating the positions of the vertices of a shape key.  
Here is my code for controlling the shape key:

```javascript
<input style="background: white; border-radius: 128px; cursor: pointer; padding: 8px; width: 200px;" type="range" min="0.1" max="1" step="0.1" value="0" id="slider">

let slider = document.getElementById('slider');
  slider.addEventListener('input', (event) => {
      object.morphTargetInfluences[0] = event.target.value;
      updateVertices();
});

```

and here is how I obtain the vertex point(s):

```javascript
<input style="background: white; border-radius: 128px; cursor: pointer; padding: 8px; width: 200px;" type="number" id="vertexid">
            <span style="font-size: 14px;" id="vertexposition">position: (x: ?, y: ?, z: ?)</span>

function updateVertices() {
            const geometry = object.geometry;
            const positionAttribute = geometry.getAttribute('position');
            const vertex = new THREE.Vector3();
            vertex.fromBufferAttribute(positionAttribute, vertexid.value - 1);
            object.updateMatrix();
            object.updateMatrixWorld();
            object.geometry.verticesNeedUpdate = true;
            object.geometry.attributes.position.needsUpdate = true;
            const spheregeometry = new THREE.SphereGeometry(0.05, 16, 8);
            const spherematerial = new THREE.MeshBasicMaterial({
                color: 0xff0000
            });
            const sphere = new THREE.Mesh(spheregeometry, spherematerial);
            sphere.position.set(object.localToWorld(vertex).x, object.localToWorld(vertex).y, object.localToWorld(vertex).z);
            sphere.name = 'VertexPoint';

            if (scene.getObjectByName('VertexPoint')) {
                var selectedObject = scene.getObjectByName('VertexPoint');
                scene.remove(selectedObject);
                scene.add(sphere);
            } else {
                scene.add(sphere);
            }
            document.getElementById('vertexposition').textContent = 'position: (x: ' + object.localToWorld(vertex).x + ', y: ' + object.localToWorld(vertex).y + ', z: ' + object.localToWorld(vertex).z + ')';
        }

```

my question/problem is that the blendshape (shape key) does not update its vertices, how can I achieve dynamical update on the blendshape (shape key) vertices?