Mirror and glass in Blender with three.js export

Questions
,
1

Please tell me how to make glass effect and mirror metall so that it can then be exported to threejs in gltf format

2

It’s not possible to export such specific materials. Especially since many real-time implementations of reflective and refractive surfaces require a flat geometry (e.g. a plane).

You might want to check out THREE.Reflector and THREE.Refractor. The first one can be used to create a mirror effect like in the following example.

https://threejs.org/examples/webgl_mirror.html

The second one allows see-through materials. The following example demonstrate a simple refractive effect based on a dudv map. The default shader implements no distortion.

https://threejs.org/examples/webgl_refraction.html

1 Like
3

as is done in this example?
https://threejs.org/examples/?q=gltf#webgl_loader_gltf_extensions

4

Can you please be more specific? I don’t understand why you referring to this example…

5

On the right, you can select the MetalRoughSpheres scene and it shows the objects with reflection.

And please tell me how to make trees with export to three js. I tried to generate the trees, as the leaves use the textures of the branches c, photo png, but the textures are not displayed
(example implementation: https://youtu.be/lYWDK1ul0g4?list=PL28TFa0wVNGSEvVn_Ch5vHELGv50DiA-q)

6

Now I see what you mean. This effect is based on environment mapping. AFAIK, you have to setup such maps manually with three.js like demonstrated in the following example (/cc @donmccurdy) .

https://threejs.org/examples/webgl_loader_gltf.html

7

Please include more detail about what your’e asking — are you asking how to create the glTF file? Or do you have a file and it doesn’t look the way you expect in three.js? There are many modeling tools, and we’ve documented how to create glTF from several of them on https://threejs.org/docs/#manual/en/introduction/Loading-3D-models.

If you’ve created a metallic model (e.g. using Principled BSDF materials in Blender) and exported to glTF, then you’ll also need to assign an environment map to get reflections, as @Mugen87 mentions. Creating glass effects is pretty advanced — start with basic transparency or alpha and get that working first.

8

I have a file and it doesn’t look the way i expect in three.js
I used BSDF tried and through PBR Metal.
You can give me some article on this material so I know how to do everything with export in threejs

9

I don’t know how to help you without much more detail about the file, how it was created, how you expect it to look, and how it actually looks, and how you’ve written your three.js code.

I would also suggest comparing the file in some existing viewers:

1 Like
10

Here are all the files in my project, loaded the file .blend need to export it only to gltf.
http://test.asvpage.ru/parkk/park2.zip
http://test.asvpage.ru/park.blend
http://test.asvpage.ru/park.blend1

Help please make the object glass and metal object with reflection to load in threejs and I can’t install the texture of the branches on the trees in png format to generate the trees in the Park.
I did everything, but it’s not load in threejs.
(my glass, metal(remont) and branches materials are in the project)

11

You’ve reported this already on the Blender exporter GitHub page (https://github.com/KhronosGroup/glTF-Blender-IO/issues/178), and it’s a bug there, so I don’t think we can help you on the three.js side.

Once that bug is fixed, you’ll be able to exporter PBR metal/rough materials. You will not be able to export realistic PBR glass to three.js in any format I’m aware of, you’ll need to work with simpler alpha transparency.