使用动画系统更新bufferGeometry的属性

Question

我想使用动画系统更新bufferGeometry。

  let clock;
  let orbitControls;
  let container, stats;
  let camera, scene, renderer;
  let mesh, mouse  = new THREE.Vector2();
  let mixer,clip;
  init();
  animate();
  function init() {             
           container = document.getElementById('container');
             if (!container) {
             let body = document.querySelector('body');
             let div = document.createElement('div');
             div.id = 'container';
             body.appendChild(div);
             container = document.getElementById('container');
            }
            //
            camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 3500 );
            camera.position.x = -100;
            camera.position.y = 600;
            camera.position.z = 450;
            scene = new THREE.Scene();
            scene.background = new THREE.Color( 0x000000 );
            scene.fog = new THREE.Fog( 0x050505, 2000, 3500 );
            //
            scene.add( new THREE.AmbientLight( 0xffffff ) );    
            //      
            init_mesh();
            //
            renderer = new THREE.WebGLRenderer();
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );
            //
            stats = new Stats();
            container.appendChild( stats.dom );
            //
            orbitControls = new OrbitControls(camera, renderer.domElement);
            //
            let grid_helper =  new THREE.GridHelper(500,10)
            scene.add(grid_helper)
            //          
            mixer               =  new THREE.AnimationMixer(mesh)
            let times           = [0,10]
            // this is KO
             let name=  '.geometry.attributes.position.array[0]'
             let point_A_x_position_values  = [0,100]
             console.log(mesh.geometry.attributes.position.array[0])
             let kft   =  new THREE.NumberKeyframeTrack(name,times,point_A_x_position_values,THREE.InterpolateLinear) ;         
                           clip                  =  new THREE.AnimationClip('face',10,[kft])
            let animation         =  mixer.clipAction(clip)
            clock                 =  new THREE.Clock()          
            clock.start()  
            animation.play()    
        }

    function init_mesh() {  
            let geometry   =  new THREE.BufferGeometry();
            let length     =  9
            let positions  =  new Float32Array(length);
            let normals    =  new Float32Array(length);
            let colors     =  new Float32Array(length);
            let A          =  new THREE.Vector3();
            let B          =  new THREE.Vector3();
            let C          =  new THREE.Vector3();
            var cb         =  new THREE.Vector3();
            var ab         =  new THREE.Vector3();
            let ax = 0, ay = 0    , az = 0;
            let bx = 50, by = 100 ,bz = -75;
            let cx = -50, cy = 50 ,cz = 0;
            //positions
            let values =  [ax,ay,az,bx,by,bz,cx,cy,cz]
            for(let i = 0 ;i < length ; i++){
                positions[i] = values[i];
            }
            //normals
            A.set(ax, ay, az);
            B.set(bx, by, bz);
            C.set(cx, cy, cz);
            cb.subVectors(C, B);
            ab.subVectors(A, B);
            cb.cross(ab);
            cb.normalize();
            let nx = cb.x;
            let ny = cb.y;
            let nz = cb.z;
            let ns = [nx,ny,nz,nx,ny,nz,nx,ny,nz]
            for(let i = 0 ;i < length ; i++){
                normals[i] = ns[i];
            }
            // colors   
            let cs = [1,0,0,0,1,0,0,0,1]
            for(let i = 0 ;i < length ; i++){
                colors[i] = cs[i];
            }
            geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
            geometry.addAttribute('normal', new THREE.BufferAttribute(normals, 3));
            geometry.addAttribute('color', new THREE.BufferAttribute(colors, 3));
            geometry.computeBoundingSphere();
            var material = new THREE.MeshPhongMaterial({
                color: 0xaaaaaa, specular: 0xffffff, shininess: 100,
                side: THREE.DoubleSide, vertexColors: THREE.VertexColors
            });
            mesh = new THREE.Mesh(geometry, material);
            scene.add(mesh);        
        }       

        function animate() {
            requestAnimationFrame( animate );
            render();
            stats.update();
        }
        function render() {                 
            if(mixer){
            let delta =     clock.getDelta()
            mixer.update(delta)
            mesh.geometry.attributes.position.needsUpdate = true;   
            }
            renderer.render( scene, camera );
        }

这在我初始化NumberKeyframeTrack时抛出错误。

错误消息是 THREE.PropertyBinding：尝试更新轨道的属性：.geometry.attributes.position.array，但未找到

但是网格物体具有路径：'.geometry.attributes.position.array'

我不明白我的错误。

非常感谢您的帮助。