Diffuse gltf texture? balylon.js sandbox feature in three.js how to do?

I’m using gltf with textures compressed in a glb and tested in the balylon.js sandbox … I’m noticing that one of the textures is different when the “diffuse” is unchecked in the “core textures channels” as shown below … how to do this in three.js?

obs: sorry for my english, it is not my native language.

WITH DIFFUSE

WITHOUT DIFFUSE

MY PROJECT WITH THREE.JS

Babylon’s diffuse texture is material.map in three.js. See MeshStandardMaterial for the full material API:

1 Like

I had already read about MeshStandardMaterial … but I am confused about its practice in this example …
1 ° is it called inside the loader (GLTF)?
2 ° is his reference the direct object? or child … or object.scene …
3 ° in the “map” do I have to add the texture or is it a boolean?

  let controls;
  let camera;
  let scene;
  let renderer;
  let pmremGenerator;
  let mesh;

  const clock = new THREE.Clock();

  let mixer;

  function init() {
    camera = new THREE.PerspectiveCamera(
      35,
      window.innerWidth / window.innerHeight,
    );
    camera.position.set(40, 20, 60);

    scene = new THREE.Scene();

    new RGBELoader()
      .setDataType(THREE.UnsignedByteType)
      .load(royal, texture => {
        const envMap = pmremGenerator.fromEquirectangular(texture).texture;

        scene.background = envMap;
        scene.environment = envMap;

        texture.dispose();
        pmremGenerator.dispose();

        // use of RoughnessMipmapper is optional
        const roughnessMipmapper = new RoughnessMipmapper(renderer);

        const loader = new GLTFLoader();
        loader.load(tesla, object => {
          mixer = new THREE.AnimationMixer(object.scene);
          // MeshStandardMaterial Test Failed
          mesh = new THREE.MeshStandardMaterial(object);
          mesh.map = true;

          const action = mixer.clipAction(object.animations[0]);
          action.play();

          object.scene.traverse(child => {
            if (child.isMesh) {
              // child.castShadow = true;
              // child.receiveShadow = true;
            }
          });

          scene.add(object.scene);

          roughnessMipmapper.dispose();
        });
      });

    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);

    renderer.toneMapping = THREE.ACESFilmicToneMapping;
    renderer.toneMappingExposure = 1;
    renderer.outputEncoding = THREE.sRGBEncoding;

    pxRef.current.appendChild(renderer.domElement);

    pmremGenerator = new THREE.PMREMGenerator(renderer);
    pmremGenerator.compileEquirectangularShader();

    controls = new OrbitControls(camera, renderer.domElement);
    controls.target.set(0, 10, 0);
    controls.update();
  }

  function animate() {
    requestAnimationFrame(animate);

    const delta = clock.getDelta();

    if (mixer) mixer.update(delta);

    renderer.render(scene, camera);
  }

The object that THREE.GLTFLoader returns has a gltf.scene property, which is a THREE.Group. The group could have many descendants — because the model could have many meshes and many materials. From the example you shared:

object.scene.traverse(child => {
            if (child.isMesh) {
                    child.material; // MeshStandardMaterial
            }
});

For the other questions, please refer to the MeshStandardMaterial documentation, and other three.js examples. material.map must be a Texture, not a boolean. If the texture was included in the glTF, then it’s already enabled on the material.

I’m not sure what you’re asking, beyond that. You don’t have to enable a diffuse texture — If the model is set up correctly, then three.js will show all of the textures it uses. If the model is not appearing the way you expect, you will need to share a demo or the model for someone to debug. I’d also recommend the troubleshooting steps here: https://threejs.org/docs/#manual/en/introduction/Loading-3D-models