Hi,
I would like to update a bufferGeometry using the animation system.
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 );
}
this throw an error message :
THREE.PropertyBinding: Trying to update property for track: .geometry.attributes.position.array but it wasn’t found
but the mesh has the path : .geometry.attributes.position.array
i don’t understand my mistake.
Thanks a lot for your help.
