在 Three.js 中分配给 glb 模型的纹理被反转，并且只适用于 THREE.RepeatWrapping

Question

我在 SketchUp 生成的 Three.js 中加载了一个 glb 模型。该文件可以在这里找到 https://www.graviditetsberegner.dk/bpnew.skp

该模型包含一个名为带有网格的文本的组。我想在这里显示一个包含文本的纹理。我使用以下代码：

var modelLoader = new THREE.GLTFLoader();

modelLoader.load("https://www.graviditetsberegner.dk/bpnew.glb", function (gltf) {

model = gltf.scene.clone();
model.scale.set(50,50,50)
scene.add(model);

//Use canvas to draw texture and add it to the model group Text
var textModelMesh = FindMeshWithNameInModel(model, "Text");
var textTexture = CreateCanvasTexture("This is a test");

textTexture.wrapS = THREE.RepeatWrapping;
textTexture.wrapT = THREE.RepeatWrapping;

textModelMesh.material.map = textTexture;

我的代码有两个问题：

文本已镜像。 dae等其他格式，文本不镜像
仅当我将wrapS 和wrapT 设置为RepeatWrapping 时才会显示文本。但是，SketchUp 中使用的纹理应该与 canvas.

我该如何解决这些问题？

A fiddle 显示问题：https://jsfiddle.net/Lgmds9ce/2/

Answer 1

The text is mirrored. In other formats such as dae, the text is not mirrored

如官方documentation中所述，对于THREE.GLTFLoader，如果手动替换纹理，则必须将Texture.flipY设置为false。

The text is only displayed when I set wrapS and wrapT to RepeatWrapping. However, the texture used in SketchUp should be similar to the dimensions of the generated texture in the canvas.

资产的纹理也将 Texture.wrapS 和 Texture.wrapT 设置为 THREE.RepeatWrapping。

已更新 fiddle：https://jsfiddle.net/d12t6p5q/1/

three.js R105

在 Three.js 中分配给 glb 模型的纹理被反转，并且只适用于 THREE.RepeatWrapping

Assigned texture to glb model in Three.js is reversed and only working with THREE.RepeatWrapping

3d

three.js

sketchup