Getting current geometry of animated mesh

Question

How does one get the current geometry of an animated mesh? Say I have a mesh that's going through some animation and I want to grab a copy of the current pose and create a new mesh using it (not necessarily skinned the same way), how would I do this?

Edit: Here is a simple example. It loads one of the three.js example animations and runs it. The loaded mesh is skinnedMesh. Every time animate() is called, a copy of the mesh is made using skinnedMesh.geometry. The copy is called newMesh, and it's created with a simple red MeshBasicMaterial and offset to one side of the original.

If you run the code, you'll see that although skinnedMesh is animated, newMesh is always a copy of the untransformed geometry. If it was doing what I wanted it to do, newMesh would be in the same pose as skinnedMesh.

Clearly this particular example is very inefficient, as I could just make another copy of skinnedMesh and animate it separately. But that's not what I want to do. I want to be able to grab the state of the animated mesh at any point in time and make a copy of the pose it happens to be in at that moment.

I hope this makes everything clearer.

<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js">     </script>
<script>

var container;
var camera, scene, renderer, loader, clock, light;
var skinnedMesh, animation, groundMaterial, planeGeometry, mixer;
var newMesh = null;
var loaded = false;

init();
animate();

function init() {
  container = document.createElement('div');
  document.body.appendChild(container);

  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(10, 0, 10);

  scene = new THREE.Scene();
  loader = new THREE.JSONLoader();
  clock = new THREE.Clock;

  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  container.appendChild(renderer.domElement);

  groundMaterial = new THREE.MeshPhongMaterial({
    emissive: 0x010101
  });
  planeGeometry = new THREE.PlaneBufferGeometry(16000, 16000);
  ground = new THREE.Mesh(planeGeometry, groundMaterial);
  ground.position.set(0, -5, 0);
  ground.rotation.x = -Math.PI / 2;
  scene.add(ground);

  light = new THREE.HemisphereLight(0x777777, 0x003300, 1);
  light.position.set(-80, 500, 50);
  scene.add(light);

  loader.load('http://threejs.org/examples/models/skinned/simple/simple.js', function(geometry, materials) {
    for (var k in materials) {
      materials[k].skinning = true;
    }
    skinnedMesh = new THREE.SkinnedMesh(geometry, new THREE.MeshFaceMaterial(materials));
    skinnedMesh.scale.set(1, 1, 1);
    skinnedMesh.position.y = 0;
    scene.add(skinnedMesh);

    mixer = new THREE.AnimationMixer(skinnedMesh);
    mixer.addAction(new THREE.AnimationAction(skinnedMesh.geometry.animations[0]));

    camera.lookAt(skinnedMesh.position);

    loaded = true;
  });
}

function animate() {
  requestAnimationFrame(animate);
  if (!loaded) {
    return;
  }
  if (mixer) mixer.update(clock.getDelta());

  if (newMesh) {
    scene.remove(newMesh);
  }
  newMesh = new THREE.Mesh(skinnedMesh.geometry,
    new THREE.MeshBasicMaterial({
      color: 0xff0000
    })
  );
  newMesh.position.x = skinnedMesh.position.x - 6;
  scene.add(newMesh);

  render();
}

function render() {
  renderer.render(scene, camera);
}
</script>
</body>
</html>

score 0 · Answer 1 · answered Jun 01 '16 at 03:48

0

You can directly reference the geometry property of a Mesh Object which contains an array of faces.

Manipulating the geometry ad-hoc is an adventure onto itself, but the structure should be clear enough.

var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({
  color: 0xffff00
});
var mesh = new THREE.Mesh(geometry, material);
console.log(mesh.geometry)

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.min.js"></script>

answered Jun 01 '16 at 03:48

zetavolt

2,989
1
23
33

This works with a static mesh, but for an animated mesh this would just return the untransformed geometry of the object in its rest/default pose. What I want is to duplicate the pose of an animated mesh at some arbitrary point in its animation---like a freeze-frame of the animation. – jbg Jun 01 '16 at 03:52
1

@jbg you should post a code example.so we can understand better and easy edit it. – Madhawa Priyashantha Jun 01 '16 at 04:14

score 0 · Answer 2 · answered Aug 29 '21 at 12:21

Bones don't affect the geometry in memory, their matrices are being applied to geometry in a shader during the rendering and that geometry can't be accessed from JS level.

You have to bake the current pose into positions and also to normals, implementation: https://stackoverflow.com/a/66404012/696535

Getting current geometry of animated mesh

2 Answers2