3D models with texture

Questions
, ,
1

I am trying texture images with 3D models with Three.js. I picked up demo from https://threejs.org/examples/?q=cars#webgl_materials_cars.

What I am trying to do is, Over the car I want change body color to some image. If try solid colors it works, but for textures it’s not redering correctly

What I tried so far,

* Some base code for SCENE is not included

    initCar();

    function initCar() {
        var dracoLoader = new THREE.DRACOLoader();
        dracoLoader.setDecoderPath( '/js/draco/gltf/' );

        var loader = new THREE.GLTFLoader()
        loader.setDRACOLoader( dracoLoader );
        loader.load(
            // resource URL
            './../models/ferrari/ferrari.glb',
            // called when the resource is loaded
            function ( gltf ) {
                let model = gltf.scene.children[0];

                // CHANGE MATERIAL
                let part = model.getObjectByName( 'body' )

                // THIS WORKS
                // part.material = new THREE.MeshStandardMaterial( {
                //     color: 0xff4400, metalness: 1.0, roughness: 0.2, name: 'orange'
                // } )

                // THIS DOESN"T
                var textureLoader = new THREE.TextureLoader();
                textureLoader.crossOrigin = true;
                textureLoader.load('/images/2.jpeg', function(texture) {
                    console.log("TEXTURE LOADED", texture)
                    texture.anisotropy = 16
                    var material = new THREE.MeshPhongMaterial( { map: texture, opacity:1, transparent: true} );
                    part.material = material
                });

                model.scale.set(20.5,20.5,20.5)
                scene.add( model );
                renderer.render( scene, camera );

            },
            undefined,
            function ( error ) {
                console.error( error );

            } 
        );
    }

Three%20js
Three%20js1493×724 182 KB

2

What exactly doesn’t work here?

Try this:

const textureLoader = new THREE.TextureLoader();

const texture=  textureLoader.load( '/images/2.jpeg' )

part.material = new THREE.MeshPhongMaterial( { map: texture } );

If it doesn’t work, please share any error messages you get in the console.

3

Added Image

4

Actually, I can’t remember if I included UVs with that model :thinking:
Most likely I stripped them out to reduce the size.

If there’s no UVs then you will need to add them in a modelling program. Geometry requires UV coordinates to display textures.

5

Can I add UV in three.js editor ?

6

I don’t think so. You can use Blender but it will take a bit of time to learn.

7

Regardless of how you create the UVs, designing a UV layout for a texture that wasn’t meant for this car is going to be very hard… I would suggest finding a car model that already has UVs and a texture, then modify/recolor the texture to your liking.

2 Likes
8

So for the conclusion we can issue is finally with the model I am using is that correct ? @looeee @donmccurdy

9

Sorry, I don’t understand this sentence.

10

Sorry for the typo,
What I meant was, for this Question I posted, Conclusion is problem is with the model, once I add UV texture I can change texture for a model.

11

Yes, but as @donmccurdy says it’s not that simple a process, unless adding uvs to a model is something you have done before.

Where do you want the texture? On the bonnet/doors?

You might find a car model that already has uvs on somewhere like sketchfab.com

Here’s the original car model I used:

You could check if that has uvs.

12

My end goal is to have something like this : https://showroom.littleworkshop.fr/

1 Like
13

I wanna do the very same thing that you were trying. Applying an image onto a 3D object or change its color by user selection. Did you make it work, by any chance? Did anybody work it out?