I used fbxloader and treejs, but the original color of fbx is not applied

Questions
,
1

캡처
캡처809×612 134 KB

The color of the original fbx file is not applied when I ran it with this source.

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;

  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;

    light = new THREE.HemisphereLight(0xffffff, 0x444444, 1);
    light.position.set(0, 1, 0);
    scene.add(light);

    light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(0, 1, 0);
    scene.add(light);

    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    threeContainer.appendChild(renderer.domElement);

    controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.addEventListener("change", renderer);

    const fbxLoader = new THREE.FBXLoader();

    fbxLoader.load(
      //"Mojo_Idle.fbx",
      "3d_mesh.fbx",
      (object) => {
        object.traverse(function (child) {
          if (child.isMesh) {
            console.log(child.geometry);
            child.geometry.computeVertexNormals();
            console.log(child);
            child.material.map = null;
          }
        });
        scene.add(object);
        animate();
      },
      (xhr) => {
        console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
      },
      (error) => {
        console.log(error);
      }
    );
  }
  function animate() {
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
  }
  initThree();
</script>
2 
            child.material.map = null;

that line ^ looks suspicious…

are they supposed to be vertexColors?
try:
child.material.vertexColors = true;

1 Like
3

child.material.vertexColors = true; << I’ve applied it.But it turned black.

캡처
캡처359×599 3.61 KB

4

Try removing the line manthrax pointed at.

For as long as you keep it you will never use any mesh texture that’s a part of your model and is assigned to the child.material.map.

1 Like