CODEWITHSUNDEEP
three.js
Michele Matto
Michele Matto

Reputation: 45

Three.js: Add a texture to an object just on the outside

I'm very new with Three.js and I'm trying to make a ring:

http://www.websuvius.it/atma/myring/preview.html

I have a background texture ( the silver one ) and another one with a text. I want the text only on the ring external face.

This is part of my code:

var loader = new THREE.OBJLoader( manager );
var textureLoader = new THREE.TextureLoader( manager );

loader.load( 'assets/3d/ring.obj', function ( event ) {

    var object = event;
    var geometry = object.children[ 0 ].geometry;
    var materials = [];

    var backgroundTexture = textureLoader.load('img/texture/silver.jpg');

    backgroundTexture.flipY = false;

    var background = new THREE.MeshBasicMaterial({
        map: backgroundTexture,
        color: 0xffffff
    });



    materials.push(background);

    var customTexture = textureLoader.load('img/text.png');

    customTexture.flipY = false;

    var custom = new THREE.MeshBasicMaterial({
        map: customTexture,
        transparent: true,
        opacity: 1,
        color: 0xffffff
    }); 

    materials.push(custom);

    mesh = THREE.SceneUtils.createMultiMaterialObject(geometry, materials);

    mesh.position.y=-50;
    scene.add(mesh);

}, onProgress, onError );

It is possible? Thanks

Upvotes: 1

Views: 955

Answers (1)

Matey
Matey

Reputation: 1210

The reason behind your issue appears to be in your .obj file. Judging from a quick glance at the texture coordinates stored in the file, the inside of the ring uses the same part of the texture image as the outside of the ring.

Increasing the transparent parts of the image won't help. Neither will the attempts to stop the texture from repeating. Those would help if the texture coordinates were larger than 1 but this is not your case unfortunately.

However, there are several solutions:

  • Split the object in a 3D modeling software to two objects - outside and inside of the ring - and apply the texture only to the first one.
  • Adjust the UV coordinates of the object in a 3D modeling software.
  • Adjust the UV coordinates of the vertices programmatically after loading the object to Three.JS

Upvotes: 1

Related Questions