How to morph plane to sphere and vice versa

Questions
,
1

j67nn
Like on this gif. Is it possible to do so?
Thanks

4

An option with MorphTargets: https://jsfiddle.net/prisoner849/2mje4c93/ :slight_smile:
If you need morphing like on the picture, use shaders.

4 Likes
6

That’s what i’m looking for !

Could you please help me about sphere to plane ?

7

@Pathompongmc But there are both options in the example (plane to sphere, sphere to plane).

1 Like
8

The shadow didn’t correct when i add the directional light.

I just don’t know how to update the uv map when it turn to sphere.

9

@prisoner849 Could it be that morphTargets on the material is deprecated? I can’t find it in the docs and it seems like it is not working anymore. Let’s say i have one texture on the plane and another on the sphere, how could i not just morph between both geometries but also between the two materials?

10

Not need write “morphTargets: true,”

var planeMat = new THREE.MeshBasicMaterial({
  map: new THREE.TextureLoader().load(`https://threejs.org/examples/textures/uv_grid_opengl.jpg`),
//morphTargets: true,  
side: THREE.DoubleSide
});

image
image915×224 17.2 KB

11

@Chaser_Code Ah i see! Still not quite sure if i get it correctly. What would be the right approach to not only morph between geometries but also between textureA.jpg to textureB.jpg?

12

Maybe by mixing it into fragment shader at map code:

uniform float mixValue;

#ifdef USE_MAP

	vec4 texelColor = texture2D( map, vUv );
        vec4 texelColor2 = texture2D( map2, vUv );
	texelColor = mapTexelToLinear( texelColor );
	texelColor2 = mapTexelToLinear( texelColor2 );
	diffuseColor *= mix(texelColor,texelColor2,mixValue);

#endif
13

For morphing between geometries, you can use this approach: three.js examples
And for textures, use @Chaser_Code 's approach with modifying of shaders.