在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中使用的纹理应类似于画布中生成的纹理的尺寸。

如何解决这些问题？

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

推荐答案

文本已镜像。在其他格式（例如dae）中，文本未镜像

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

如官方文档对于 THREE.GLTFLoader ，您必须设置<$如果您手动替换纹理，则将c $ c> 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屋！