The model is *.glb. There are two maps to set the texture of the nodes in the model: A and B. The texture A shows texture B set in the model and the texture B shows white in the model.
The model has UV. And the model shows normally in the threejs editor.
The code is as follows:
import * as THREE from 'three'
import {GLTFLoader, OrbitControls, RoomEnvironment} from "three/addons";
export default {
data(){
return{
modelURL: "static/newchair.glb"
}
},
mounted() {
this.initThree();
},
methods:{
initThree(){
const scene = new THREE.Scene();
const canvas = document.querySelector('#three');
const renderer = new THREE.WebGLRenderer({canvas, antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth,window.innerHeight);
renderer.setClearColor('#FFFFFF', 1.0);
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
let camera = new THREE.PerspectiveCamera(40, window.innerWidth/window.innerHeight,1,1000);
camera.position.set(2,3,4);
scene.add(camera);
const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change',()=>{renderer.render(scene, camera)});
controls.minDistance = 1;
controls.maxDistance = 3;
controls.maxPolarAngle = Math.PI / 2;
controls.enablePan = false;
const filllight = new THREE.AmbientLight(0x404040);
scene.add(filllight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
directionalLight.position.set( 5, 5, 1);
scene.add(directionalLight);
const environment = new RoomEnvironment( renderer );
const pmremGenerator = new THREE.PMREMGenerator( renderer );
scene.environment = pmremGenerator.fromScene( environment ).texture;
const textureLoader = new THREE.TextureLoader();
let texture = textureLoader.load('static/texture/texture_A.jpg'); // texture_A and B to change
texture.encoding = THREE.sRGBEncoding;
const loader = new GLTFLoader();
loader.load(this.modelURL,(gltf)=>{
// Set the nodes to change the material
const targetNodeNames = [
'对象015',
'对象016',
'对象017',
'对象018',
'对象019',
'对象020',
'对象021',
'对象022',
'对象023',
'对象024'
];
gltf.scene.traverse((child) => {
if (child.isMesh && targetNodeNames.includes(child.name)){
child.material = new THREE.MeshBasicMaterial();
child.material.map = texture;
child.material.side = THREE.DoubleSide
child.material.flatShading = true
child.material.needsUpdate = true
renderer.render(scene, camera);
console.log(child)
}
scene.add(gltf.scene);
})
},(xhr)=>{
console.log((xhr.loaded / xhr.total) * 100 + '% loaded');
},(error)=>{
console.log(error);
});
function animate(){
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
animate();
}
}
}
TextureA:
TextureB:
The Browser Shows:
Development evironment: Vue
So why does it happens? how to fix it?And what requirements of the texture pictures(resolution ratio,width and height,bit depth etc.)?