Three JS纹理未显示出来。

huangapple go评论64阅读模式
英文:

Three JS texture is not showing up

问题

I am trying to apply a texture to my 3D model with Three JS.
我正在尝试在我的Three JS 3D模型上应用纹理。

I tried a lot of ways from the Three JS Examples but for any reasons nothing is working.
我尝试了很多来自Three JS示例的方法,但出于某种原因没有任何效果。

Here is how I apply the texture to my model:
这是我如何将纹理应用到我的模型上:

//LOADING TEXTURE
//加载纹理

var textureLoader = new THREE.TextureLoader();
var diffuse = textureLoader.load("models/Carbon.png");
diffuse.encoding = THREE.sRGBEncoding;
diffuse.wrapS = THREE.RepeatWrapping;
diffuse.wrapT = THREE.RepeatWrapping;
diffuse.repeat.x = 1;
diffuse.repeat.y = 1;

var normalMap = textureLoader.load("models/Carbon_Normal.png");
normalMap.wrapS = THREE.RepeatWrapping;
normalMap.wrapT = THREE.RepeatWrapping;

var material = new THREE.MeshPhysicalMaterial({
roughness: 0.5,
clearcoat: 1.0,
clearcoatRoughness: 0.1,
map: diffuse,
normalMap: normalMap
});

// LOADING MODEL
//加载模型

var loader = new THREE.GLTFLoader();
loader.load("models/stairs.gltf", function(gltf){
model = gltf.scene

model.traverse((newModel) => {
    if (newModel.isMesh){
        newModel.material = material;
        newModel.castShadow = true;
        newModel.receiveShadow = true;
    }
});

scene.add(model);

});

I appreciate any help!
我感激任何帮助!

英文:

I am trying to apply a texture to my 3D model with Three JS.
I tried a lot of ways from the Three JS Examples but for any reasons nothing is working.

Here is how I apply the texture to my model:

    //LOADING TEXTURE

    var textureLoader = new THREE.TextureLoader();
    
    var diffuse = textureLoader.load( "models/Carbon.png" );
    diffuse.encoding = THREE.sRGBEncoding;
    diffuse.wrapS = THREE.RepeatWrapping;
    diffuse.wrapT = THREE.RepeatWrapping;
    diffuse.repeat.x = 1;
    diffuse.repeat.y = 1;
    
    var normalMap = textureLoader.load( "models/Carbon_Normal.png" );
    normalMap.wrapS = THREE.RepeatWrapping;
    normalMap.wrapT = THREE.RepeatWrapping;
    
    
    var material = new THREE.MeshPhysicalMaterial({
    	roughness: 0.5,
    	clearcoat: 1.0,
    	clearcoatRoughness: 0.1,
    	map: diffuse,
    	normalMap: normalMap
    });
    
// LOADING MODEL

    var loader = new THREE.GLTFLoader();
    
    loader.load("models/stairs.gltf", function(gltf){
    	model = gltf.scene
    	
    	model.traverse((newModel) => {
    		if (newModel.isMesh){
    			newModel.material = material;
    			newModel.castShadow = true;
    			newModel.receiveShadow = true;
    		}
    	});
    	
    	scene.add(model);
    });

I appreciate any help!

答案1

得分: 2

当加载一个 glTF 模型的纹理时,你需要将 Texture.flipY 设置为 false,以满足 glTF 的纹理坐标约定。

diffuse.flipY = false;
normalMap.flipY = false;

此外,你始终需要确保你的模型具有纹理坐标。你可以通过检查你的网格的几何体是否具有 uv 属性来实现这一点。如果缺少此属性,建议你在类似 Blender 这样的 DCC 工具中生成纹理坐标。

three.js R112

英文:

When loading a texture for a glTF model, you have to set Texture.flipY to false to satisfy the uv convention of glTF.

diffuse.flipY = false;
normalMap.flipY = false;

Besides, you always have to ensure that your model has texture coordinates. You can do this by checking if the geometries of your meshes have an uv attribute. If this attribute is missing, I suggest you generate texture coordinates in a DCC tool like Blender.

three.js R112

huangapple
  • 本文由 发表于 2020年1月3日 23:21:43
  • 转载请务必保留本文链接:https://go.coder-hub.com/59581090.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定