Question

我试图弄清楚如何在盒子的正面和背面使用两种不同的纹理。每当我缩放我的盒子（ExtrudeGeometry）时，UV贴图似乎都不会更新。因此，我正在为盒子的正面和背面定义自己的UV贴图。

要定义我使用的前UV贴图：

geometry.faceVertexUvs[0]

相应的工作原理。
对于后面的UV贴图，我使用：

geometry.faceVertexUvs[1];

但是我无法访问这个＆＃39;第二个＆＃39;图层UV贴图。

所以我的问题是：

是否可以根据对象的比例更新UV贴图？
是否可以访问第二个＆＃39;材质中的图层UV贴图？

我在这里创建了一个示例：jsfiddle。

我创建了三个不同的盒子，有3种不同的比例。从左到右：0.01×2.97×2.1,0.01×1×1和0.01×0.297×0.21。在最左边的框中，纹理仅覆盖框的一小部分。中间框具有正确的纹理。右边的框有更新的uv贴图（否则只会显示一小部分纹理）。
（我需要在盒子上使用小刻度！）

我希望有人可以帮助我！

Three.js 84

Answer 1

您可以在顶点着色器中定义attribute vec2 uv2，然后照常访问它。

precision highp int;
precision highp float;

uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;

attribute vec2 uv;
attribute vec2 uv2;
attribute vec3 normal;
attribute vec3 position;

void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

Answer 2

作为@danyim的答案。

最后我还避免使用着色器代码。我选择完全uv-解开我的对象并使用WebGL绘制我自己的纹理（因为我只需要一个简单的正面和背面纹理）。在下面的函数中，我绘制一个具有可变数量的细分的对象并解开这些细分。

使用drawTexture函数（下面的内容），我提供了一个＆＃39; O＆＃39;和一个＆＃39; X＆＃39;作为我对象前后的纹理。

希望这可以帮助你（以及其他可能的人）。如果您有任何其他问题，请不要犹豫。

 drawObject() {
    //Draw a shape with the measures of a object.
    var length = 0.01, width = 0.297;
    var shape = new THREE.Shape();
    shape.moveTo(0, 0);
    shape.lineTo(0, width);
    shape.lineTo(length, width);
    shape.lineTo(length, 0);
    shape.lineTo(0, 0);

    var canvasTexture = drawTexture('x', 'o');
    var textures = [
        new THREE.MeshPhongMaterial({ color: 0xf9f9f9, side: THREE.BackSide, overdraw: 0.5 }),//GENERAL 0
        new THREE.MeshPhongMaterial({ map: canvasTexture, side: THREE.BackSide, overdraw: 0.5 }), //FRONT 1
        new THREE.MeshPhongMaterial({ map: canvasTexture, side: THREE.BackSide, overdraw: 0.5 }), //BACK 2
        new THREE.MeshPhongMaterial({ color: 0x00ff00, side: THREE.BackSide, overdraw: 0.5 })
    ];

    var material = new THREE.MultiMaterial(textures);

    subDivs = parseInt(objectLength / 40); //Amount of subdivision (more provides a smoother result)
    subDivs = 5;
    var extrudeSettings = {
        amount: 0.21,
        steps: this.subDivs,
        bevelEnabled: false
    };
    //Create a UVMap(u,v). 
    var uvMap = [];
    for (let i = 0; i <= (subDivs) * 2; i++) {
        var u = i / (subDivs * 2);
        uvMap.push(new THREE.Vector2(u, 0));
        uvMap.push(new THREE.Vector2(u, 1));
    }

    //Create the object.
    var geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
    var tempI = (uvMap.length - 2) / 2;
    //Map the vertices to the UVMap (only mapping top and bottom of the object (for 'x' and 'o' texture))
    for (let i = 0; i < geometry.faceVertexUvs[0].length; i++) {
        if (i >= 4 && i < 4 + (subDivs * 2)) {
            if (isOdd(i)) {
                geometry.faceVertexUvs[0][i] = [uvMap[i - 4], uvMap[i - 2], uvMap[i - 3]];
            } else {
                geometry.faceVertexUvs[0][i] = [uvMap[i - 4], uvMap[i - 3], uvMap[i - 2]];
            }
        }
        else if (i >= 4 + (subDivs * 4) && i < 4 + (subDivs * 4) + (subDivs * 2)) {
            if (isOdd(i)) {
                geometry.faceVertexUvs[0][i] = [uvMap[tempI], uvMap[tempI + 2], uvMap[tempI + 1]];
            } else {
                geometry.faceVertexUvs[0][i] = [uvMap[tempI], uvMap[tempI + 1], uvMap[tempI + 2]];
            }
            tempI++;
        }
    }

    //Assigning different materialIndices to different faces
    for (var i = 4; i <= 13; i++) { //Front
        geometry.faces[i].materialIndex = 1;
    }

    for (var i = 4 + (subDivs * 4); i < 4 + (subDivs * 4) + (subDivs * 2); i++) { //Back
        geometry.faces[i].materialIndex = 2;
    }

    for (var i = 0; i <= 1; i++) { 
        geometry.faces[i].materialIndex = 3;
    }
    var plane = new THREE.Mesh(geometry, material);
    return plane;

function drawTexture (msg1, msg2) {
    var canvas = document.createElement('canvas'); //Create a canvas element.
    var size = 128;
    canvas.width = size;
    canvas.height = size;

    var ctx = canvas.getContext('2d');
    //Draw a white background
    ctx.beginPath();
    ctx.rect(0, 0, size, size);
    ctx.fillStyle = 'white';
    ctx.fill();

    //Draw the message (e.g. 'x' or 'o')
    ctx.fillStyle = 'black';
    ctx.font = '64px Arial';

    //Determien the size of the letters.
    var metrics1 = ctx.measureText(msg1);
    var textWidth1 = metrics1.width;
    var textHeight = parseInt(ctx.font);

    var metrics2 = ctx.measureText(msg2);
    var textWidth2 = metrics2.width;

    ctx.fillText(msg1, size / 4 - textWidth1 / 2, size / 2 + (textHeight / 4));
    ctx.fillText(msg2, (3 * size / 4) - textWidth2 / 2, size / 2 + (textHeight / 4));

    //Store the canvas in a THREE.js texture.
    var texture = new THREE.Texture(canvas);
    texture.needsUpdate = true;
    return texture; //Return Three.Texture

Three.js单个对象上的多个UV贴图

2 个答案: