Question

我正在努力将带纹理贴图的简单材质应用于自定义网格。我找不到任何我能理解的例子，所以我做了这个小提琴来展示我想要实现的目标。

/// 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/

我只是希望三角形具有与立方体相同的纹理，我知道网格上需要有UV坐标才能使其工作，但我不确定如何实现它。

Answer 1

三角形上的纹理看起来很奇怪......以防万一，将UV调整到你的实际物体可能会有所帮助：

Your updated fiddle

以下是：

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

Answer 2

搞定了，所以我确实需要几何上的UV坐标。感谢另外一个问题：

https://stackoverflow.com/a/27317936/2419584

我添加了这个函数并通过它传递几何。

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

这会自动从几何体生成UV坐标，然后允许带有图像的纹理显示在自定义几何体上。

这是我更新的工作jsfiddle。

https://jsfiddle.net/benaloney/L7js807k/9/

Three.js - 将纹理添加到自定义几何体

2 个答案: