How I can create material glass in Threejs

Questions
1

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
image
image

2

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

3

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
        });
4

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:

5

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.

2 Likes
6

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.

7

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

8

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

9

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.

1 Like
10

I got :slight_smile: