BufferGeometry animation from Blender

Hy,

Im kind of new on programing language.
And I’m trying to update a exported BufferGeometry from Blender. I figured out how to update a Geometry with Morph Target Sequence. But that kind of file its to big, and in my case i’m just translating the objects, don’t need the morph option. All the bbject shows up, but the BufferGeometry one don’t animate the position, i don’t figured out how to create the clip with the position from blender.

var container, stats;
var camera, scene, renderer, objeto, controls;




    var set = false;

    var windowHalfX = window.innerWidth / 2;
    var windowHalfY = window.innerHeight / 2;

    init();
    animate();

    function init() {
    	
    	container = document.createElement( 'div' );
    	document.body.appendChild( container );
    	camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
    	camera.position.set( 80, 50, -50 );
	
	//iniciando a scena
	scene = new THREE.Scene();
	scene.add( camera );
				
	//iniciando o render
	renderer = new THREE.WebGLRenderer();
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	container.appendChild( renderer.domElement );
	//
	window.addEventListener( 'resize', onWindowResize, false );				
	

	// criando a cena com luz e camera
	var ambientLight = new THREE.AmbientLight(0xffffff,0.5);
	scene.add(ambientLight);
	

	var spotLight = new THREE.SpotLight( 0xffffff, 2,400 );	
	spotLight.position.set(50,80,100);
	spotLight.target = scene;
	
	
	scene.add( spotLight );

	
	
	// controls
	
	controls = new THREE.OrbitControls( camera, renderer.domElement );
	
	controls.enableDamping = true;
	controls.dampingFactor = 0.25;
	controls.minDistance = 50;
	controls.maxDistance = 500;
	controls.maxPolarAngle = Math.PI ;
	
	// criando a textura
	
	var texture = new THREE.MeshStandardMaterial({

		color:  0xff9933,
		side: THREE.DoubleSide,
		roughness: 1,
		metalness: .01,

		
	});
	
	var textura_Anim = new THREE.MeshStandardMaterial({
		morphTargets: true,
		color:  0xff9933,
		side: THREE.DoubleSide,
		roughness: 1,
		metalness: .01,	
	
	
	});
		
	// criando amassador
	
	var loader = new THREE.JSONLoader();
	
	//load estatico
	function handlerLoaderEstatico(geometry, materials) {
		
		var object = new THREE.Mesh(geometry,texture);
		scene.add(object);
		
		
	}
	
	
	loader.load('modelo/base.json', handlerLoaderEstatico);
	
	loader.load('modelo/pino.json', handlerLoaderEstatico);
	
	// load buffer 
	
	var loaderBuffer = new THREE.BufferGeometryLoader();

	loaderBuffer.load( 'modelo/pega_03.json', function ( geometry ) {
		
		set = true;
		
		var material = new THREE.MeshBasicMaterial( { color: 0xff0000,skinning: true } );
		var pegador = new THREE.Mesh( geometry, material );
		scene.add( pegador );
		
		material.needsUpdate = true;
		geometry.attributes.position.needsUpdate = true;
		console.log(geometry.attributes.position);
		mixer03 = new THREE.AnimationMixer(pegador);
		mixer03.clipAction(pegador.geometry).setDuration(3).play();
		 }
    );
	
	
	//load com morph
	

	
	loader.load('modelo/ferro.json', function (geometry, materials) {
		
		var object = new THREE.Mesh(geometry,textura_Anim);
		scene.add( object );
		mixer01 = new THREE.AnimationMixer(object);
		var clip = THREE.AnimationClip.CreateFromMorphTargetSequence('barra',geometry.morphTargets, 24);
		
		acao(mixer01,clip);

		
		

		
		

		
		
	});
	
	loader.load('modelo/segundo.json', function (geometry, materials) {
		
		var object = new THREE.Mesh(geometry,textura_Anim);
		scene.add( object );
		mixer02 = new THREE.AnimationMixer(object);
		var clip = THREE.AnimationClip.CreateFromMorphTargetSequence('segundo',geometry.morphTargets, 24);
		
		acao(mixer02,clip);
		

		
	});
		
	loader.load('modelo/topo.json', function (geometry, materials) {
		
		var object = new THREE.Mesh(geometry,textura_Anim);
		scene.add( object );
		mixer04 = new THREE.AnimationMixer(object);
		var clip = THREE.AnimationClip.CreateFromMorphTargetSequence('topo',geometry.morphTargets, 24);

		acao(mixer04,clip);
		

		
	});

	
	// serie de actions da animacao
	function acao(mixer,clip){
		
		var action = mixer.clipAction(clip);
		
		action.setDuration(3);
		action.clampWhenFinished = true;
        action.loop = THREE.LoopOnce;
        action.play();	
	}
	

	
	
	// textura
	var manager = new THREE.LoadingManager();
	manager.onProgress = function ( item, loaded, total ) {
					console.log( item, loaded, total );
	};

	
	stats = new Stats();
	container.appendChild( stats.dom );
	
	
}


function onWindowResize() {
				windowHalfX = window.innerWidth / 2;
				windowHalfY = window.innerHeight / 2;
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
				renderer.setSize( window.innerWidth, window.innerHeight );
			}



var prevTime = Date.now();

function animate() {
	
	requestAnimationFrame( animate );
	controls.update();
	render();
}

function render() {
    
	
	
	if(set){
		var time = Date.now();
		var prev = (time - prevTime) * 0.001;
		mixer01.update(prev);
		mixer02.update(prev);
		mixer03.update(prev);
		mixer04.update(prev);
		prevTime = time;
	}
	
	
	camera.lookAt( scene.position );
	renderer.render( scene, camera );
}

Sorry but i’m a new user and can’t upload a file, here follows the pega_03.json:

{
    "data":{
        "index":{
            "type":"Uint16Array",
            "itemSize":1,
            "array":[0,1,2,3,4,5,6,7,8,9,0,2,10,5,11,12,7,6,13,9,2,14,11,15,16,7,12,17,13,2,18,15,19,20,7,16,21,17,2,22,19,23,24,7,20,25,21,2,26,23,27,28,7,24,29,25,2,30,27,31,32,7,28,33,29,2,34,31,35,36,7,32,37,33,2,38,35,39,40,7,36,41,37,2,42,39,43,44,7,40,45,41,2,46,43,47,48,7,44,49,45,2,50,47,51,52,7,48,53,49,2,54,51,55,56,7,52,57,53,2,58,55,59,60,7,56,61,57,2,62,59,63,64,7,60,65,61,2,66,63,67,68,7,64,69,65,2,70,67,71,72,7,68,73,69,2,74,71,75,76,7,72,77,73,2,78,75,79,80,7,76,81,77,2,82,79,83,84,7,80,85,81,2,86,83,87,88,7,84,89,85,2,90,87,91,92,7,88,93,89,2,94,91,95,96,7,92,97,93,2,98,95,99,100,7,96,101,97,2,102,99,103,104,7,100,105,101,2,106,103,107,108,7,104,109,105,2,110,107,111,112,7,108,113,109,2,114,111,115,116,7,112,117,113,2,118,115,119,120,7,116,121,117,2,122,119,123,124,7,120,125,121,2,126,123,127,128,7,124,129,125,2,130,127,131,132,7,128,133,129,2,134,131,135,136,7,132,137,133,2,138,135,139,140,7,136,141,137,2,142,139,143,144,7,140,1,141,2,145,143,146,8,7,144,3,147,4,10,3,5,14,10,11,18,14,15,22,18,19,26,22,23,30,26,27,34,30,31,38,34,35,42,38,39,46,42,43,50,46,47,54,50,51,58,54,55,62,58,59,66,62,63,70,66,67,74,70,71,78,74,75,82,78,79,86,82,83,90,86,87,94,90,91,98,94,95,102,98,99,106,102,103,110,106,107,114,110,111,118,114,115,122,118,119,126,122,123,130,126,127,134,130,131,138,134,135,142,138,139,145,142,143]
        },
        "groups":[{
            "materialIndex":0,
            "start":0,
            "count":432
        }],
        "attributes":{
            "uv":{
                "type":"Float32Array",
                "itemSize":2,
                "array":[0.00759612,0.586824,0,0.5,0.5,0.5,0.0277778,1,0,0,0.0277778,0,0.992404,0.586824,0.5,0.5,1,0.5,0.0301537,0.67101,0.0555556,1,0.0555556,0,0.969846,0.67101,0.0669873,0.75,0.0833333,1,0.0833333,0,0.933013,0.75,0.116978,0.821394,0.111111,1,0.111111,0,0.883022,0.821394,0.178606,0.883022,0.138889,1,0.138889,0,0.821394,0.883022,0.25,0.933013,0.166667,1,0.166667,0,0.75,0.933013,0.32899,0.969846,0.194444,1,0.194444,0,0.67101,0.969846,0.413176,0.992404,0.222222,1,0.222222,0,0.586824,0.992404,0.5,1,0.25,1,0.25,0,0.5,1,0.586824,0.992404,0.277778,1,0.277778,0,0.413176,0.992404,0.67101,0.969846,0.305556,1,0.305556,0,0.32899,0.969846,0.75,0.933013,0.333333,1,0.333333,0,0.25,0.933013,0.821394,0.883022,0.361111,1,0.361111,0,0.178606,0.883022,0.883022,0.821394,0.388889,1,0.388889,0,0.116978,0.821394,0.933013,0.75,0.416667,1,0.416667,0,0.0669873,0.75,0.969846,0.67101,0.444444,1,0.444444,0,0.0301537,0.67101,0.992404,0.586824,0.472222,1,0.472222,0,0.00759612,0.586824,1,0.5,0.5,1,0.5,0,0,0.5,0.992404,0.413176,0.527778,1,0.527778,0,0.00759612,0.413176,0.969846,0.32899,0.555556,1,0.555556,0,0.0301537,0.32899,0.933013,0.25,0.583333,1,0.583333,0,0.0669873,0.25,0.883022,0.178606,0.611111,1,0.611111,0,0.116978,0.178606,0.821394,0.116978,0.638889,1,0.638889,0,0.178606,0.116978,0.75,0.0669873,0.666667,1,0.666667,0,0.25,0.0669873,0.67101,0.0301538,0.694444,1,0.694444,0,0.32899,0.0301538,0.586824,0.00759614,0.722222,1,0.722222,0,0.413176,0.00759614,0.5,0,0.75,1,0.75,0,0.5,0,0.413176,0.00759614,0.777778,1,0.777778,0,0.586824,0.00759614,0.32899,0.0301538,0.805556,1,0.805556,0,0.67101,0.0301538,0.25,0.0669873,0.833333,1,0.833333,0,0.75,0.0669873,0.178606,0.116978,0.861111,1,0.861111,0,0.821394,0.116978,0.116978,0.178606,0.888889,1,0.888889,0,0.883022,0.178606,0.0669873,0.25,0.916667,1,0.916667,0,0.933013,0.25,0.0301537,0.32899,0.944444,1,0.944444,0,0.969846,0.32899,0.00759612,0.413176,0.972222,1,0.972222,0,0.992404,0.413176,1,1,1,0,0,1]
            },
            "normal":{
                "type":"Float32Array",
                "itemSize":3,
                "array":[0,0,-1,0,0,-1,0,0,-0.999969,0.984802,0.17362,0,1,0,0,0.984802,0.17362,0,0,0,1,0,0,1,0,0,1,0,0,-1,0.939665,0.342021,0,0.939665,0.34199,0,0,0,1,0,0,-1,0.866024,0.499985,0,0.865993,0.499985,0,0,0,1,0,0,-1,0.766045,0.642781,0,0.766015,0.642781,0,0,0,1,0,0,-1,0.642781,0.766015,0,0.642781,0.766015,0,0,0,1,0,0,-1,0.499985,0.866024,0,0.499985,0.866024,0,0,0,1,0,0,-1,0.342021,0.939665,0,0.34199,0.939665,0,0,0,1,0,0,-1,0.17365,0.984802,0,0.17362,0.984802,0,0,0,1,0,0,-1,0,0.999969,0,0,1,0,0,0,1,0,0,-1,-0.17365,0.984802,0,-0.17362,0.984802,0,0,0,1,0,0,-1,-0.342021,0.939665,0,-0.34199,0.939665,0,0,0,1,0,0,-1,-0.499985,0.866024,0,-0.499985,0.866024,0,0,0,1,0,0,-1,-0.642781,0.766015,0,-0.642781,0.766015,0,0,0,1,0,0,-1,-0.766045,0.642781,0,-0.766015,0.642781,0,0,0,0.999969,0,0,-1,-0.866024,0.499985,0,-0.865993,0.499985,0,0,0,1,0,0,-1,-0.939665,0.342021,0,-0.939665,0.34199,0,0,0,1,0,0,-1,-0.984802,0.17362,0,-0.984802,0.17362,0,0,0,1,0,0,-1,-1,0,0,-1,0,0,0,0,1,0,0,-1,-0.984802,-0.17362,0,-0.984802,-0.17362,0,0,0,1,0,0,-1,-0.939665,-0.34199,0,-0.939665,-0.342021,0,0,0,1,0,0,-1,-0.865993,-0.499985,0,-0.866024,-0.499985,0,0,0,1,0,0,-0.999969,-0.766015,-0.642781,0,-0.766045,-0.642781,0,0,0,1,0,0,-1,-0.642781,-0.766015,0,-0.642781,-0.766015,0,0,0,1,0,0,-1,-0.499985,-0.866024,0,-0.499985,-0.866024,0,0,0,1,0,0,-1,-0.34199,-0.939665,0,-0.342021,-0.939665,0,0,0,1,0,0,-1,-0.17362,-0.984802,0,-0.17365,-0.984802,0,0,0,1,0,0,-1,0,-0.999969,0,0,-1,0,0,0,1,0,0,-1,0.17362,-0.984802,0,0.17365,-0.984802,0,0,0,1,0,0,-1,0.34199,-0.939665,0,0.342021,-0.939665,0,0,0,1,0,0,-1,0.499985,-0.866024,0,0.499985,-0.866024,0,0,0,1,0,0,-1,0.642781,-0.766015,0,0.642781,-0.766015,0,0,0,1,0,0,-1,0.766015,-0.642781,0,0.766045,-0.642781,0,0,0,1,0,0,-1,0.865993,-0.499985,0,0.866024,-0.499985,0,0,0,1,0,0,-1,0.939665,-0.34199,0,0.939665,-0.342021,0,0,0,1,0,0,-1,0.984802,-0.17362,0,0.984802,-0.17362,0,0,0,1,1,0,0,1,0,0,1,0,0]
            },
            "position":{
                "type":"Float32Array",
                "itemSize":3,
                "array":[-0.157457,31.8883,-5.23226,-0.146457,31.7626,-5.23226,-0.870537,31.7626,-5.23226,-0.157457,31.8883,5.23226,-0.146457,31.7626,-5.23226,-0.157457,31.8883,-5.23226,-0.157457,31.8883,5.23226,-0.870537,31.7626,5.23226,-0.146457,31.7626,5.23226,-0.190124,32.0102,-5.23226,-0.190124,32.0102,5.23226,-0.190124,32.0102,-5.23226,-0.190124,32.0102,5.23226,-0.243465,32.1246,-5.23226,-0.243465,32.1246,5.23226,-0.243465,32.1246,-5.23226,-0.243465,32.1246,5.23226,-0.31586,32.228,-5.23226,-0.31586,32.228,5.23226,-0.31586,32.228,-5.23226,-0.31586,32.228,5.23226,-0.405107,32.3173,-5.23226,-0.405107,32.3173,5.23226,-0.405107,32.3173,-5.23226,-0.405107,32.3173,5.23226,-0.508497,32.3897,-5.23226,-0.508497,32.3897,5.23226,-0.508497,32.3897,-5.23226,-0.508497,32.3897,5.23226,-0.622887,32.443,-5.23226,-0.622887,32.443,5.23226,-0.622887,32.443,-5.23226,-0.622887,32.443,5.23226,-0.744802,32.4757,-5.23226,-0.744802,32.4757,5.23226,-0.744802,32.4757,-5.23226,-0.744802,32.4757,5.23226,-0.870537,32.4867,-5.23226,-0.870537,32.4867,5.23226,-0.870537,32.4867,-5.23226,-0.870537,32.4867,5.23226,-0.996272,32.4757,-5.23226,-0.996272,32.4757,5.23226,-0.996272,32.4757,-5.23226,-0.996272,32.4757,5.23226,-1.11819,32.443,-5.23226,-1.11819,32.443,5.23226,-1.11819,32.443,-5.23226,-1.11819,32.443,5.23226,-1.23258,32.3897,-5.23226,-1.23258,32.3897,5.23226,-1.23258,32.3897,-5.23226,-1.23258,32.3897,5.23226,-1.33597,32.3173,-5.23226,-1.33597,32.3173,5.23226,-1.33597,32.3173,-5.23226,-1.33597,32.3173,5.23226,-1.42521,32.228,-5.23226,-1.42521,32.228,5.23226,-1.42521,32.228,-5.23226,-1.42521,32.228,5.23226,-1.49761,32.1246,-5.23226,-1.49761,32.1246,5.23226,-1.49761,32.1246,-5.23226,-1.49761,32.1246,5.23226,-1.55095,32.0102,-5.23226,-1.55095,32.0102,5.23226,-1.55095,32.0102,-5.23226,-1.55095,32.0102,5.23226,-1.58362,31.8883,-5.23226,-1.58362,31.8883,5.23226,-1.58362,31.8883,-5.23226,-1.58362,31.8883,5.23226,-1.59462,31.7626,-5.23226,-1.59462,31.7626,5.23226,-1.59462,31.7626,-5.23226,-1.59462,31.7626,5.23226,-1.58362,31.6368,-5.23226,-1.58362,31.6368,5.23226,-1.58362,31.6368,-5.23226,-1.58362,31.6368,5.23226,-1.55095,31.5149,-5.23226,-1.55095,31.5149,5.23226,-1.55095,31.5149,-5.23226,-1.55095,31.5149,5.23226,-1.49761,31.4005,-5.23226,-1.49761,31.4005,5.23226,-1.49761,31.4005,-5.23226,-1.49761,31.4005,5.23226,-1.42521,31.2972,-5.23226,-1.42521,31.2972,5.23226,-1.42521,31.2972,-5.23226,-1.42521,31.2972,5.23226,-1.33597,31.2079,-5.23226,-1.33597,31.2079,5.23226,-1.33597,31.2079,-5.23226,-1.33597,31.2079,5.23226,-1.23258,31.1355,-5.23226,-1.23258,31.1355,5.23226,-1.23258,31.1355,-5.23226,-1.23258,31.1355,5.23226,-1.11819,31.0822,-5.23226,-1.11819,31.0822,5.23226,-1.11819,31.0822,-5.23226,-1.11819,31.0822,5.23226,-0.996272,31.0495,-5.23226,-0.996272,31.0495,5.23226,-0.996272,31.0495,-5.23226,-0.996272,31.0495,5.23226,-0.870537,31.0385,-5.23226,-0.870537,31.0385,5.23226,-0.870537,31.0385,-5.23226,-0.870537,31.0385,5.23226,-0.744802,31.0495,-5.23226,-0.744802,31.0495,5.23226,-0.744802,31.0495,-5.23226,-0.744802,31.0495,5.23226,-0.622887,31.0822,-5.23226,-0.622887,31.0822,5.23226,-0.622887,31.0822,-5.23226,-0.622887,31.0822,5.23226,-0.508497,31.1355,-5.23226,-0.508497,31.1355,5.23226,-0.508497,31.1355,-5.23226,-0.508497,31.1355,5.23226,-0.405107,31.2079,-5.23226,-0.405107,31.2079,5.23226,-0.405107,31.2079,-5.23226,-0.405107,31.2079,5.23226,-0.31586,31.2972,-5.23226,-0.31586,31.2972,5.23226,-0.31586,31.2972,-5.23226,-0.31586,31.2972,5.23226,-0.243465,31.4005,-5.23226,-0.243465,31.4005,5.23226,-0.243465,31.4005,-5.23226,-0.243465,31.4005,5.23226,-0.190124,31.5149,-5.23226,-0.190124,31.5149,5.23226,-0.190124,31.5149,-5.23226,-0.190124,31.5149,5.23226,-0.157457,31.6368,-5.23226,-0.157457,31.6368,5.23226,-0.157457,31.6368,-5.23226,-0.157457,31.6368,5.23226,-0.146457,31.7626,5.23226,-0.146457,31.7626,-5.23226,-0.146457,31.7626,5.23226]
            }
        }
    },
    "metadata":{
        "version":3,
        "normal":148,
        "type":"BufferGeometry",
        "generator":"io_three",
        "uv":148,
        "position":148
    }
}

It doesn’t look like the JSON file contains any animation data. Could you upload the .blend file somewhere? You may want to try glTF-Blender-Exporter and then test the file on https://gltf-viewer.donmccurdy.com/ before trying to load with THREE.GLTFLoader.

1 Like

I don’t know if i’m wrong but the pega_03.json contains a array of position that contains the animation?
I’m gonna try that blender glTF-Blender-Exporter.

BTW: JSONLoader can’t load BufferGeometry. Only Geometry.

but i’m calling this one, fot the BufferGeometry:
var loaderBuffer = new THREE.BufferGeometryLoader();

That’s fine. But BufferGeometryLoader can only parse geometry data. No animations or materials.

IT works with the glTF tested on the https://gltf-viewer.donmccurdy.com. I’m gonna give it a go on that…