2

I've been struggling with this one for hours, and found nothing either in the docs or here on SO that would point me to the right direction to achieve what I aim at.

I'm loading a scene containing several meshes. The first one is used as an actual mesh, rendered on the scene, the other ones are just used as morph targets (their geometries, properly speaking).

loader.load("scene.json", function (loadedScene) {
    camera.lookAt( scene.position );

    var basis = loadedScene.getObjectByName( "Main" ).geometry;
    var firstTarget = loadedScene.getObjectByName( "Target1" ).geometry;
    // and so on for the rest of the "target" meshes

    basis.morphTargets[0] = {name: 'fstTarget', vertices: firstTarget.vertices};

    var MAIN = new THREE.Mesh(basis);

This works very well, and I can morph the MAIN mesh with no hassle by playing with the influence values. The differences between the basis mesh and the target are not huge, basically they're just XY adjustments (2D shape variations).

Now, I'm using a textures material: UVs are properly projected (Blender export) and the result is nice with the MAIN mesh as is. The problem comes when the basis shape is morphed towards a target geometry: as expected, the texture (UVs) adapts automatically, but this is not what I need to achieve => I'd need to have the UVs "morph" towards the morph target's UVs for the texture to look the same.

Here is an example of what I have now (left: basis mesh, right: morphTargetInfluences = 1 for the first morph target)

morph target and texture

What I'd like to have is the exact same texture projection on the final, morphed mesh...

I can't figure out how to do that the right way. Should I reassign the target UVs to the MAIN mesh (and how would I do that)?

The result would be like having a cloth below which a shape is morphed, and the cloth being "shrinked-wrapped" all the time against that underlying shape => you can actually see the shape changes, but the cloth itself is not deformed, just wrapping itself properly and consistently around the shape...

Any help would be much appreciated! Thanks in advance :)

Jimshell
  • 21
  • 1
  • 3
  • I've just discovered [THREE.DecalGeometry](https://github.com/mrdoob/three.js/blob/dev/examples/js/geometries/DecalGeometry.js) capability, seems interesting for my use case... I'll give it a go, anyway if anyone has insight on my initial question in the meanwhile... ;-) Thanks – Jimshell Aug 25 '16 at 15:46

0 Answers0