https://i.sstatic.net/BlZ6E.png
Hey there, I've imported my model (obj + mtl + texture) but it appears with a different color.
It's supposed to look like this:
https://i.sstatic.net/9BwS9.png
Currently, here's the scene configuration code:
loadModel()
scene.current.background = new THREE.Color( 'transparent' );
scene.current.add(new THREE.AxesHelper( 5 ));
const mesh = new THREE.Mesh( new THREE.PlaneGeometry( 100, 100 ), new THREE.MeshPhongMaterial( { color: 0xffffff, depthWrite: false } ) );
mesh.rotation.x = - Math.PI / 2;
mesh.receiveShadow = true;
scene.current.add( mesh );
controls.current.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
controls.current.dampingFactor = 0.2;
controls.current.screenSpacePanning = false;
controls.current.maxPolarAngle = Math.PI / 2;
controls.current.maxDistance = 200
controls.current.minDistance = 20
controls.current.target = new THREE.Vector3(0, 16, 0)
camera.current.position.set(-3, 17, 8);
camera.current.lookAt(new THREE.Vector3(0, 15, 0));
controls.current.update();
scene.current.background = new THREE.Color(0xFFFFFF);
const ambilentLight = new THREE.AmbientLight(0xffffff, 0.5)
scene.current.add(ambilentLight)
const hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff);
hemiLight.position.set(0, 500, 30);
hemiLight.castShadow = true
scene.current.add(hemiLight);
scene.current.add(new THREE.HemisphereLightHelper(hemiLight, 5));
const dirLight = new THREE.DirectionalLight(0xffffff, 0.5);
dirLight.position.set(-10, 50, 50);
dirLight.castShadow = true;
scene.current.add(dirLight);
scene.current.add(new THREE.DirectionalLightHelper(dirLight, 5));
renderer.current.shadowMap.enabled = true;
renderer.current.setPixelRatio(window.devicePixelRatio);
renderer.current.setSize(window.innerWidth, window.innerHeight);
renderer.current.outputEncoding = THREE.sRGBEncoding;
renderer.current.toneMapping = THREE.ACESFilmicToneMapping;
renderer.current.toneMappingExposure = 1;
renderer.current.physicallyCorrectLights = true;
container.current.appendChild(renderer.current.domElement);
window.addEventListener('resize', onWindowResize);
animate();
I'm not entirely sure if it's a lighting issue or something else. Does anyone have insight into this problem?