[英]Three.js - Adding texture to custom geometry
I'm working on applying a simple material with a texture map to a custom mesh. 我正在努力将带有纹理贴图的简单材质应用于自定义网格。 I couldn't find any examples that I could understand, so I made this fiddle to demonstrate what I'm trying to achieve. 我找不到任何我能理解的例子,所以我做了这个小提琴来展示我想要实现的目标。
/// MATERIAL
var texture = new THREE.TextureLoader().load( "https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/crate.gif" );
var material = new THREE.MeshBasicMaterial( {
map: texture,
side: THREE.DoubleSide
} );
// TRIANGLE
var geometry2 = new THREE.Geometry();
var v1 = new THREE.Vector3(0,200,0);
var v2 = new THREE.Vector3(0,0,-100);
var v3 = new THREE.Vector3(0,0,100);
geometry2.vertices.push(v1);
geometry2.vertices.push(v2);
geometry2.vertices.push(v3);
geometry2.faces.push( new THREE.Face3( 0, 1, 2 ) );
meshCustom = new THREE.Mesh(geometry2, material);
scene.add(meshCustom);
// CUBE
var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
https://jsfiddle.net/benaloney/L7js807k/8/ https://jsfiddle.net/benaloney/L7js807k/8/
I just want the triangle to have the same texture as the cube, I understand there needs to be UV coordinates on the mesh for this to work, but am unsure of how to implement this. 我只是希望三角形具有与立方体相同的纹理,我知道网格上需要有UV坐标才能使其工作,但我不确定如何实现它。
The texture on the triangle looks weird though... Just in case, adapting the UVs to your actual object might help : 三角形上的纹理看起来很奇怪......以防万一,将UV调整到实际物体可能会有所帮助:
Here's how : 这是如何做 :
//texture
var texture2 = new THREE.TextureLoader().load( "https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/crate.gif" );
//material
var material2 = new THREE.MeshBasicMaterial( {
map: texture2,
side: THREE.DoubleSide
} );
// TRIANGLE
var geometry2 = new THREE.Geometry();
var v1 = new THREE.Vector3(0,200,0);
var v2 = new THREE.Vector3(0,0,-100);
var v3 = new THREE.Vector3(0,0,100);
geometry2.vertices.push(v1);
geometry2.vertices.push(v2);
geometry2.vertices.push(v3);
geometry2.faces.push( new THREE.Face3( 0, 1, 2 ) );
//manually setting your UVs
geometry2.faceVertexUvs[0].push([
new THREE.Vector2(0,0), //play with these values
new THREE.Vector2(0.5,0),
new THREE.Vector2(0.5,0.5)
]);
//updating the uvs
geometry2.uvsNeedUpdate = true;
Got it working, so I did need UV coordinates on the Geometry. 搞定了,所以我确实需要几何上的UV坐标。 Thanks to this other question: 感谢另外一个问题:
https://stackoverflow.com/a/27317936/2419584 https://stackoverflow.com/a/27317936/2419584
I added this function and passed the geometry through it. 我添加了这个函数并通过它传递几何。
function assignUVs(geometry) {
geometry.faceVertexUvs[0] = [];
geometry.faces.forEach(function(face) {
var components = ['x', 'y', 'z'].sort(function(a, b) {
return Math.abs(face.normal[a]) > Math.abs(face.normal[b]);
});
var v1 = geometry.vertices[face.a];
var v2 = geometry.vertices[face.b];
var v3 = geometry.vertices[face.c];
geometry.faceVertexUvs[0].push([
new THREE.Vector2(v1[components[0]], v1[components[1]]),
new THREE.Vector2(v2[components[0]], v2[components[1]]),
new THREE.Vector2(v3[components[0]], v3[components[1]])
]);
});
geometry.uvsNeedUpdate = true;
}
This automatically generates the UV coords, from the geometry, this then allows textures with images to show up on custom geometries. 这会从几何体自动生成UV坐标,然后允许带有图像的纹理显示在自定义几何体上。
Here is my updated working jsfiddle. 这是我更新的工作jsfiddle。
https://jsfiddle.net/benaloney/L7js807k/9/ https://jsfiddle.net/benaloney/L7js807k/9/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.