After successfully exporting an animation from Blender using the Three.js export utility and adding it to a Three.js scene, I encountered an issue when trying to position it manually. Here is the code snippet I am using for creating the mesh and animation from the Blender export:
var callback = function (geometry, materials) {
var skinnedMesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({
color: 'green'
}));
skinnedMesh.receiveShadow = true;
THREE.AnimationHandler.add(skinnedMesh.geometry.animation);
var animation = new THREE.Animation(skinnedMesh,
"ArmatureAction",
THREE.AnimationHandler.CATMULLROM
);
animation.interpolationType = THREE.AnimationHandler.CATMULLROM_FORWARD;
// The manual positioning attempts below do not work as expected....
skinnedMesh.position.y = 50;
skinnedMesh.position.x = 50;
skinnedMesh.position.z = 50;
animation.play();
scene.add(skinnedMesh);
};
Here's the animation data from the Blender export:
"animation": {
"name": "ArmatureAction",
"fps": 24,
"length": 4.125,
"hierarchy": [{
"parent": -1,
"keys": [{
"time": 0,
"pos": [0, -0.998347, -0],
"rot": [0, 0, -0, 1],
"scl": [1, 1, 1]
}, {
"time": 2,
"pos": [0, 3.92237, -0],
"rot": [0, 0, -0, 1]
}, {
"time": 4.125,
"pos": [0, -0.667432, 1.77636e-15],
"rot": [0, 0, -0, 1],
"scl": [1, 1, 1]
}]
}]
The issue seems to be with the positioning data locked to the 'pos' array in the exported animation.
So, the main question is: how can I manually position and move the animation within my Three.js scene?
Note: I am using Three.js r67