我是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 );
有可能吗? 感谢
答案 0 :(得分:1)
您的问题背后的原因似乎在您的.obj文件中。从快速浏览存储在文件中的纹理坐标来判断,环的内部使用纹理图像的相同部分作为环的外部。
增加图像的透明部分不会有帮助。试图阻止纹理重复也不会。如果纹理坐标大于1,那将有所帮助,但不幸的是,这不是你的情况。
但是,有几种解决方案: