Help or any advice

Questions
,
1

Hi
I’m a beginner of three.js. I need help about a glTF model effect.
Except the lights and shadows the model shows up very different in my demo and in third person program.
I don’t know where to start to find my problems please help thanks a lot

my three.js capture

mine

other people with webgl
ClayViewer

2

Will need more information, or ideally a way to reproduce the problem. Can you share your code? The model? By “other people with WebGL” do you mean a specific device, or a different viewer? If so, which?

1 Like
3

thank you very much

this is a online webgl glTF viewer like three.js
https://pissang.github.io/clay-viewer/editor/

4

I cann’t share my code now but i can say I’m using three.js very basic way and I’m a beginner.
I’m not using special lights shadows post processing
I just load a glTF model in to web with three.js
The model files are large cann’t be up loaded here but I can send the files to you
Thanks

5

The second of your pictures has stronger lighting, but other than that I can’t see much difference.

6

It also looks like the beard is using transparency, and should be using only alphaTest. You can test that:

var model = gltf.scene;
model.traverse( function ( o ) {
  if ( ! o.isMesh ) return;
  o.material.transparent = false;
  o.material.alphaTest = 0.5;
  o.material.needsUpdate = true;
} );

If that’s not solving the problem, @1116 please share much more detail. If you’re not willing to do the work of providing detail – say exactly which differences you mean, and how you have set up your code – then it is unfair to expect others to spend time guessing for you.

1 Like
7

Thank you for your time very much and sorry for my poor english
I add your code to my project and it’s looks like this (lights added)

image
image1322×1216 270 KB

I really like to share my code and I thought there are many UI logic make things more complicated so I said I can not share my code but I really don’t not mean that

At first I thought maybe someone with much three.js experience can see the differences from pictures and I was wrong. I’m so sorry for that

my problems is:

1:beard/hair/brow looks bad even with your code o.material.alphaTest = 0.5; maybe some special shaders or settings need to be set ? transparent material error?

2:the lights part or maybe the material parts

ClayViewer loading same model looks shinny, bright and more real. My demo looks ster and no reflection

I tried with lights and shadows but not wok

for me It is like fishing for a needle in the ocean。 I really don’t know where to start and there are too many possibilities. I tried lights/HDR/some postprocessing and failed

Here is my main code and sorry again for my poor english

three.js manager
Create3DSceneObj.js (26.9 KB)

loading model
test.js (9.1 KB)

switch()
case “4”
…“allbody.gltf”…

8

thank you for your reply

1:the beard part is transparent and not showing correct
2: clayviwer load the same model looks more shining and feels better. my english is poor and I don’t know how to express it

1 Like
9

I think you’ll need to test different alphaTest values (between 0 and 1) with the beard… the model itself may have a bug there.

For the lighting, just increasing renderer.exposure might get you closer to the effect you want. Also consider adding an HDR environment map.

The Clay viewer has enabled shadows, which would be worth a try too.

You could also try viewing the model in https://gltf-viewer.donmccurdy.com/ or http://sandbox.babylonjs.com/, and adjusting lighting there, to see what you prefer.

11

Thank you so much! I will test what you suggested and if there is any achievement I will share it

Thanks for everybody’s time.

1 Like
12

Dear donmccurdy:

I made a little progress today by changing the texture filter
child.material.map.minFilter = THREE.LinearFilter;

still not good enough and the beard looks too white

               app.getMainObj().traverse(function(child)
               {
                   if( child instanceof THREE.Mesh && "polySurface161"==child.name)
                   {
                       if(child.material)
                       {
                            //child.material.transparent = false;
                            child.material.alphaTest = 0.5;
                            child.material.needsUpdate = true;
                            if(child.material.map)
                                child.material.map.minFilter =  THREE.LinearFilter;
                            //child.material.map.magFilter = THREE.LinearFilter;
                            child.material.side = THREE.DoubleSide;
                       }
                   }
                       
               });

image Screen-2019-02-18_17-45-11