Three.js - 向自定义几何图形添加纹理答案

【问题标题】：Three.js - Adding texture to custom geometryThree.js - 向自定义几何图形添加纹理
【发布时间】：2017-03-28 18:56:36
【问题描述】：

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

/// 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 坐标才能使其工作，但不确定如何实现。

【问题讨论】：

标签： javascript three.js

【解决方案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;

【讨论】：

【解决方案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/

【讨论】：

感谢您的链接...为我节省了很多时间。这个代码+texture.wrapS = texture.wrapT = THREE.MirroredRepeatWrapping;是我需要的。