I’m using the fbxLoader, but there’s a problem with it coming out black.
If you use another fbx file, the color comes out well, but if you use that fbx file, the color comes out black.
Leaflet and Three.js Integration
#map {
height: 300vh;
}
#three-container {
position: absolute;
top: 0;
left: 0;
}
var threeContainer = document.createElement("div");
threeContainer.id = "three-container";
document.getElementById("map").appendChild(threeContainer);
let scene, camera, renderer;
initThree();
function initThree() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0xdddddd);
camera = new THREE.PerspectiveCamera(
5,
window.innerWidth / window.innerHeight,
1,
5000
);
camera.position.z = 1500;
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
threeContainer.appendChild(renderer.domElement);
light = new THREE.HemisphereLight(0xffffff, 0x444444, 1.0);
light.position.set(0, 1, 0);
scene.add(light);
light = new THREE.DirectionalLight(0xffffff, 1.0);
light.position.set(0, 1, 0);
scene.add(light);
controls = new THREE.OrbitControls(camera, renderer.domElement);
const fbxLoader = new THREE.FBXLoader();
fbxLoader.load(
//"Mojo_Idle.fbx",
"simplified_3d_mesh.fbx",
(object) => {
object.traverse(function (child) {
if (child.isMesh) {
child.material.map = null;
}
});
//object.scale.set(100, 100, 100);
scene.add(object);
animate();
},
(xhr) => {
console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
},
(error) => {
console.log(error);
}
);
}
function animate() {
controls.update();
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
</script>
I need someone to check the problem with my source!
Check console to find normals, uvs maybe they are empty. Or send fbx file
if (child.isMesh) {
console.log(child.geometry.attributes);
child.material.map = null;
}
Thank you!! This is my fbx file, can you check it?
There is no normals. Only positions and uvs. Need normals.
You can calculate them by
child.geometry.computeVertexNormals();
You light sources are 1 away from origin, but your camera is 1500 away from the origin.
Depending on the size of your model, my guess is this lights are inside your model.
Try scaling your model down object.scale.setScalar(0.01) or 0.001 or move your lights further away like your camera to see if that helps
child.geometry.computeVertexNormals();
I used a function on top and the picture changed like this, but it’s different from the original color!
Your program must export fbx with normals
can you explain about me “export fbx with normals” ?
Can you explain in detail the sauce that needs to be fixed or something like that?
Three.js cant get the “normals” data from this fbx file, because this file not contain normals data or contain normals but this version of fbx file not support three.js fully and can get only positions, uvs.