Three.js:将纹理添加到外部的对象上

时间:2016-09-08 19:42:46

标签: three.js

我是Three.js的新手,我正试图制作戒指:

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

我有一个背景纹理(银色)和另一个带有文本的纹理。 我希望文本仅在环外表面上。

这是我的代码的一部分:

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 );

有可能吗? 感谢

1 个答案:

答案 0 :(得分:1)

您的问题背后的原因似乎在您的.obj文件中。从快速浏览存储在文件中的纹理坐标来判断,环的内部使用纹理图像的相同部分作为环的外部。

增加图像的透明部分不会有帮助。试图阻止纹理重复也不会。如果纹理坐标大于1,那将有所帮助,但不幸的是,这不是你的情况。

但是,有几种解决方案:

  • 将3D建模软件中的对象拆分为两个对象 - 环的外部和内部 - 并仅将纹理应用于第一个。
  • 在3D建模软件中调整对象的UV坐标。
  • 将对象加载到Three.JS
  • 后,以编程方式调整顶点的UV坐标