Setting Environment Maps in Three.js

To achieve the "Modelviewer" environment look you're seeing in the editor, you'll need to work with environment maps in Three.js. This is related to the envMap property of materials like MeshStandardMaterial.

Here's how you can implement this:

1. First, you'll need to create a preprocessed environment map using the PMREMGenerator:

JAVASCRIPTCopied
// Create a PMREMGenerator
const pmremGenerator = new THREE.PMREMGenerator(renderer);
pmremGenerator.compileEquirectangularShader();

// Load the environment map
new THREE.TextureLoader().load('path/to/environment.hdr', function(texture) {
  // Generate the environment map
  const envMap = pmremGenerator.fromEquirectangular(texture).texture;
  
  // Set the scene's environment map
  scene.environment = envMap;
  
  // Optionally, set it as the background too
  scene.background = envMap;
  
  // Clean up
  texture.dispose();
  pmremGenerator.dispose();
});

2. If you want to adjust the intensity of the environment map's effect, you can modify the envMapIntensity property on your materials:

JAVASCRIPTCopied
// Assuming your model has MeshStandardMaterial
model.traverse(function(child) {
  if (child.isMesh && child.material) {
    // For a single material
    if (child.material.isMeshStandardMaterial) {
      child.material.envMapIntensity = 1.5; // Adjust as needed
    }
    
    // For multiple materials in an array
    if (Array.isArray(child.material)) {
      child.material.forEach(material => {
        if (material.isMeshStandardMaterial) {
          material.envMapIntensity = 1.5; // Adjust as needed
        }
      });
    }
  }
});

You'll need to find the specific environment map texture that the editor is using for the "Modelviewer" setting. You might want to look for HDR environment maps that are similar to what you're seeing in the editor.

For loading your GLB file, you'll need to use the GLTFLoader:

JAVASCRIPTCopied
const loader = new THREE.GLTFLoader();
loader.load('path/to/your/model.glb', function(gltf) {
  const model = gltf.scene;
  scene.add(model);
  
  // Apply environment map settings to the model materials here
});

This approach should help you achieve a similar look to what you're seeing in the editor with the "Modelviewer" environment setting.