在 Three.js 中为 glb 模型分配的纹理被反转，并且只适用于 THREE.RepeatWrapping [英] Assigned texture to glb model in Three.js is reversed and only working with THREE.RepeatWrapping

问题描述

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

I load a glb model in Three.js generated in SketchUp. The file can be found here https://www.graviditetsberegner.dk/bpnew.skp

该模型包含一个名为 text 的组，其中包含一个网格.我想在此处显示包含文本的纹理.我使用以下代码:

The model contains a group called text with a mesh. I want to display a texture containing text here. I use the below code:

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 中使用的纹理应该与画布中生成的纹理的尺寸相似.

我该如何解决这些问题?

How can I fix these issues?

显示问题的小提琴:https://jsfiddle.net/Lgmds9ce/2/

推荐答案

文字是镜像的.其他格式如dae，文字不镜像

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

正如官方文档中提到的THREE.GLTFLoader 如果您手动替换纹理，则必须将 Texture.flipY 设置为 false.

As mentioned in the official documentation for THREE.GLTFLoader you have to set Texture.flipY to false if you manually replace a texture.

文本仅在我将 wrapS 和 wrapT 设置为 RepeatWrapping 时显示.但是，SketchUp 中使用的纹理应该与画布中生成的纹理的尺寸相似.

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.

The texture from the asset has also set Texture.wrapS and Texture.wrapT to THREE.RepeatWrapping.

更新小提琴:https://jsfiddle.net/d12t6p5q/1/

three.js R105

这篇关于在 Three.js 中为 glb 模型分配的纹理被反转，并且只适用于 THREE.RepeatWrapping的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！