我们导入一个模型重新赋值一个材质图片,会出现材质翻转问题,如图
这是因为材质贴图默认是上下翻转的,需要false即可,代码如下:
上下翻转:
texture.flipY = false //默认是true
完整代码如下:
var textureLoader = new THREE.TextureLoader();
new THREE.GLTFLoader().load("./models/box.glb", result => {
var model = result.scene;
model.position.set(0,0,0)
model.traverse( function ( child ) {
// console.log(child)
if ( child.isMesh) {
var texture = textureLoader.load( "../images/texture/left4.jpg" );
texture.repeat.set( 1,1 );
texture.flipY = false //默认是true
if(child.name == '前面屏'){
child.material = new THREE.MeshBasicMaterial({ map:texture})
}
}
} );
scene.add(model)
})
设置后效果图下图: