CODEWITHSUNDEEP
three.jstexture-mapping
Dude Lebowski
Dude Lebowski

Reputation: 159

three js apply texture

I'm unable to apply an image texture to an object exported from 3D Studio Max. As you can see in the image, the texture loaded is applied only once in the center of the face.

enter image description here

I've tried to repeat the texture with

texture.wrapS = texture.wrapT =  THREE.RepeatWrapping;
texture.repeat.x = 2;
texture.repeat.y = 2;

but it's worst.

See my code below

<html>
<head>
    <meta charset="utf8">
    <title>Demo customizer</title>
    <script src="lib/three.min.js"></script>
    <script src="lib/controls/TrackballControls.js"></script>
    <script src="lib/controls/OrbitControls.js"></script>
    <script src="lib/loaders/MTLLoader.js"></script>
    <script src="lib/loaders/OBJMTLLoader.js"></script>
    <script src="lib/loaders/OBJLoader.js"></script>
    <script src="lib/Detector.js"></script>
    <script src="lib/libs/stats.min.js"></script>

</head>
<body>
    <script>
    var renderer, scene, camera, mesh, controls, material;

    document.addEventListener("DOMContentLoaded", function() {

        var manager = new THREE.LoadingManager();
        manager.onProgress = function ( item, loaded, total ) {

            console.log( item, loaded, total );

        };

        var texture = new THREE.Texture();

        var loader = new THREE.ImageLoader( manager );
        loader.load( 'material/textures/granit1.jpg', function ( image ) {

            texture.image = image;
            texture.needsUpdate = true;

            //texture.wrapS = texture.wrapT =  THREE.RepeatWrapping;
            //texture.repeat.x = 2;
            //texture.repeat.y = 2;
        } );

        var loader = new THREE.OBJLoader( manager );



        loader.load( '3ds/test3.obj', function ( object ) { 

            object.position.x = 220;
            object.position.y = -8;

            object.traverse( function ( child ) {

                if ( child instanceof THREE.Mesh ) {
                    console.log(child);
                    child.material.map = texture;

                }

            } );


            // on initialise le moteur de rendu
            renderer = new THREE.WebGLRenderer();

            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );

            // on initialise la scène
            scene = new THREE.Scene();

            // on initialise la camera que l’on place ensuite sur la scène
            camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
            //camera.position.z = 350;

            scene.add(camera);
            //camera.position.set(0,0,350);
            camera.position.set(0,150,400);
            camera.lookAt(scene.position);

            controls = new THREE.OrbitControls( camera );
            controls.addEventListener( 'change', render );

            // on ajoute une lumière blanche
            var lumiere = new THREE.DirectionalLight( 0xffffff, 1.0 );
            lumiere.position.set( 0, 0, 400 );
            scene.add( lumiere );
            var light = new THREE.AmbientLight( 0x404040 ); // soft white light
            scene.add( light );
            //scene.add( mesh );
            scene.add( object );

            // FLOOR
            var floorTexture = new THREE.ImageUtils.loadTexture( 'material/textures/metal/metal001.jpg' );
            floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping; 
            floorTexture.repeat.set( 10, 10 );
            var floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture, side: THREE.DoubleSide } );
            var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
            var floor = new THREE.Mesh(floorGeometry, floorMaterial);
            floor.position.y =0.1;
            floor.rotation.x = Math.PI / 2;
            scene.add(floor);

            animate();

        });

        function animate() {

            requestAnimationFrame( animate );
            controls.update();

        }

        function render() {

            renderer.render( scene, camera );

        }
    });

    </script>
</body>
</html>

Upvotes: 0

Views: 1063

Answers (1)

2pha
2pha

Reputation: 10155

You need to apply uvw coordinates to your model. This is what determines how the texture will wrap onto the model.

In 3ds max, apply a uvw modifier to your model. you have a few to choose from. if your model is simple you may be able to use a simple one like "uvw map", otherwise, if your model is complex you will probably need to use the "unwrap uvw" modifier and tweek it quite a bit. There are many tutorials on the net about doing this.

Once this is done you add the texture to the diffuse slot on a material in the material editor in 3ds max and apply this material to your model. this is just to test your texture is and uvw is set up right.

Then once your model and texture are looking good in Max, you are ready to export from max and load with threejs

Upvotes: 1

Related Questions