Question

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

有可能吗？感谢

Answer 1

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

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

但是，有几种解决方案：

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

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

1 个答案: