3D object viewer does not show all model faces correctly with three.js web viewer

Questions
1

I have created 3D model using Blender and exported to GLB.
The model is cube with 6 faces and applied textures for each of them.
Each texture has opacity and emission definitions.
While trying to embed model on web page I’ve discovered that it displays correctly only with babylon.js but not with three.js.
In case of three.js viewer some faces look completely opaque although opacity definition for all textures is the same.
Link to the model

2

Does it look better if you do this after the loading process:

gltf.scene.traverse( function( object ) {

    if ( object.isMesh ) object.material.depthWrite = true;

} );
1 Like
3

I’m not so “techy”… Where I should add this code?

4

Or is there anything I could do in Blender before exporting the model?
The issue is that these models are going to be used out of my control and owners might use different viewers. Thus I’m trying to understand is there something wrong with model itself that can be fixed/improved?

5

Inside the onLoad() callback. In our basic glTF example it would be right before this line:

6

I found that it appears only if texture has set Alpha <1. Even Alpha=0.99 causes the same glitch

7

Have you actually tried the suggested fix from above? Does the model look as expected now?

It’s important to know if changing the depthWrite produces the result you are looking for.

8

NO, I don’t know how to apply and test this fix as I’m not familiar with Java

9

What you can do is to drag’n’drop the model into the three.js editor and then enable the depthWrite checkbox in the material tab for each side of your cube.

I can confirm that with this setup the asset renders more like BabylonJS.

@donmccurdy Is that something that can be fixed in the loader? I remember similar transparency issues in the past.

10

I confirm that by enabling depthWrite for each texture model does looks “more like” babylon.js but with this setting transparency is affected and does not render correctly anymore

11

I don’t see the same thing here. Open the model in https://gltf.report/ or https://gltf-viewer.donmccurdy.com/ (both based on three.js) and all sides of the cube are semi-transparent, with alpha blending. If you modify materials so that depthWrite=true (it is false originally) then some sides become opaque, which I don’t think is what you want.

12

Is that something that can be fixed in the loader? I remember similar transparency issues in the past.

I think depthWrite=false is still the correct default here. One thing that might improve this example (particularly if depthWrite were enabled) would be sorting by the AABB or OBB of each mesh rather than by the local origin.

1 Like
13

you are a genius, it helped me a lot, greetings from mexico