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

Question

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

要定义我使用的正面 UV 贴图:

geometry.faceVertexUvs[0]

相应地工作。
对于我使用的背面 UV 贴图:

geometry.faceVertexUvs[1];

但是我无法访问这个“第二”层 UV 贴图。

所以我的问题是:

1. 是否可以根据对象的比例更新 UV 贴图？
2. 是否可以访问 Material 中的“第二”层 UV 贴图？

我在这里创建了一个示例:jsfiddle .

我创建了三个不同的盒子，具有 3 种不同的比例。从左到右:0.01 x 2.97 x 2.1、0.01 x 1 x 1 和 0.01 x 0.297 x 0.21。在最左边的盒子上，纹理只覆盖了盒子的一小部分。中间框有正确的纹理。右边的框有更新的 uv 贴图(否则只会显示一小部分纹理)。
(我必须使用盒子上的小秤!)

希望有人能帮帮我!

三.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);
}