Switch texture to videotexture

Questions
1

Hi there,

I am very happy that I have found Three.js for myself. It is great!

At the beginning I have 2 questions to which I unfortunately haven’t found an answer:

1 / I want to change the screen texture on my smartphone obj on matthiaswrembel.de which I use with three.js and GSAP. As soon as the smartphone comes closer it should switch from a simple image texture to a video texture. Is that possible? Is there maybe a good tutorial which helps?

2 / I am having difficulty integrating the textures correctly. the textures are placed over the entire OBJ and not just over the smartphone screen as desired. Unfortunately, I am still not quite sure how to target the desired material. Maybe there is a good tutorial for this too?

It might help if I specify the .mtl (Material.002 is the material for the smartphone screen):

# Blender MTL File: 'fin_mwsmartphone2.blend'
# Material Count: 3

newmtl Material.001
Ns 472.763227
Ka 1.000000 1.000000 1.000000
Kd 0.027725 0.023607 0.038536
Ks 0.000000 0.000000 0.000000
Ke 0.000000 0.000000 0.000000
Ni 3.650000
d 1.000000
illum 1

newmtl Material.002
Ns 871.591452
Ka 0.027273 0.027273 0.027273
Kd 0.620118 0.006270 0.800000
Ks 0.100000 0.100000 0.100000
Ke 0.000000 0.000000 0.000000
Ni 4.150000
d 1.000000
illum 3

newmtl Material.005
Ns 225.000000
Ka 1.000000 1.000000 1.000000
Kd 0.800000 0.800000 0.800000
Ks 0.500000 0.500000 0.500000
Ke 0.000000 0.000000 0.000000
Ni 1.450000
d 1.000000
illum 2

Kind regards, Matti

2

Yes, you can exchange textures. Have you tried to setup your video texture and just replace the map reference? Check out this live example that exchanges the texture after 2 seconds: Edit fiddle - JSFiddle - Code Playground

If you author the asset in Blender, it is possible to author different materials per object and also author texture coordinates which determine how the texture is projected on the surface. I have not tutorials at hand but if you google both topic you should find good existing resources.

1 Like
3

Thanks for your help!

I’m not getting any further right now. Maybe it’s just a little something with your help.

I load the obj as follows:

objLoader.load( 'xxx.obj', function ( object ) {
  object.traverse( function ( child ) {
    if ( child instanceof THREE.Mesh  ) {
           child.material = new THREE.MeshPhongMaterial( { map: texture,  specular: 0xD0CBC7, shininess: 15, flatShading: true } );

    }
  })
  setupAnimation(object);
});

how do I change the material afterwards again without reloading the obj?

Thanks in advance!

Kind regards, Matti