I'm having a problem with loading objects in three.js. As I said, colors won't appear and the object is black and white!
Here is my code:
Getting Started (I'm not really sure if this section works fine, so I put it here.)
const
width = window.innerWidth - 300,
height = window.innerHeight,
scene = new THREE.Scene(),
camera = new THREE.PerspectiveCamera(90, width / height, 1, 1000),
renderer = new THREE.WebGLRenderer(),
controls = new THREE.OrbitControls(camera, renderer.domElement),
light = new THREE.AmbientLight(0xffffff, .5),
loader = new THREE.OBJLoader();
camera.position.z = 50;
scene.add(camera);
controls.update();
scene.add(light);
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
animate();
$(window).resize(function () {
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
});
Loading The Object
function onProgress(xhr) {
if (xhr.lengthComputable) {
const percentComplete = xhr.loaded / xhr.total * 100;
console.log(Math.round(percentComplete, 2) + '% downloaded');
}
}
function onError() {
}
const manager = new THREE.LoadingManager();
manager.addHandler(/\.dds$/i, new THREE.DDSLoader());
new THREE.MTLLoader(manager)
.setPath('http://localhost/X/assets/models/house/')
.load('CH_building1.mtl', function (materials) {
materials.preload();
new THREE.OBJLoader(manager)
.setMaterials(materials)
.setPath('http://localhost/X/assets/models/house/')
.load('CH_building1.obj', function (object) {
object.position.y = -10;
scene.add(object);
}, onProgress, onError);
});
Sorry if it's too long.
Maybe the object file is broken. And if so, then how can I fix it?
Edit: Is that because of the lights reflection?