英文:
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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论