How I can create material glass in Threejs



Current, I want to create glass material like this in blender. But How I can export it to .gltf or create material with threejs like below


Related: Mirror and glass in Blender with three.js export


I using this code for create material

  const r = 'assets/env/texture1/';
    const urls = [
      r + 'px.jpg',
      r + 'nx.jpg',
      r + 'py.jpg',
      r + 'ny.jpg',
      r + 'pz.jpg',
      r + 'nz.jpg'
    this.textureCube = new THREE.CubeTextureLoader().load(urls);
const glassMaterial = new THREE.MeshPhongMaterial({
          color: 0xffffff,
    //      envMap: that.textureCube,
          refractionRatio: 0.8


Instead using envMap from CubeTextureLoader, I think they generate dynamic texture by PathTracing-Renderer. But I can’t see any exmaple code in threejs :roll_eyes:


In your case it’s best to start with a simple transparent material. Implementing a real-time see-through effect with distortions (something like this) is expensive, especially if you have more than a single window in your room. Using a static env-map might be a good compromise.


I’d recommend environment map with a bump or normal map too, when refractions are required and more than a single water surface i would go for screenspace refractions.


I exported project to .gltf format. But unfortunately not supported, then I must create material manually then replace it when threeJs on Init


Could you take a screenshot in node material (Blender 2.8) for example :frowning:


Env maps and refraction can’t be exported from Blender right now, you’ll have to add those textures to your material after loading it in threejs.


I got :slight_smile: