# Help or any advice

**URL:** <https://discourse.threejs.org/t/help-or-any-advice/6141>\
**Category:** Questions\
**Tags:** materials, shaders\
**Created:** [February 15, 2019, 6:31am UTC](https://discourse.threejs.org/t/help-or-any-advice/6141 "2019-02-15T06:31:23Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![1116](https://avatars.discourse-cdn.com/v4/letter/1/439d5e/32.png) [@1116](https://discourse.threejs.org/u/1116)\
**Post date:** [February 15, 2019, 6:31am UTC](https://discourse.threejs.org/t/help-or-any-advice/6141/1 "2019-02-15T06:31:23Z")

</div>

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](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/1/189182cb8bff786fa839e0f736995b474a850f85.png)

other people with webgl  
 ![ClayViewer](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/c/cbf2392321561197fd2af304ea9a02a1752fc036.png)

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [February 15, 2019, 6:50am UTC](https://discourse.threejs.org/t/help-or-any-advice/6141/2 "2019-02-15T06:50:37Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![1116](https://avatars.discourse-cdn.com/v4/letter/1/439d5e/32.png) [@1116](https://discourse.threejs.org/u/1116)\
**Post date:** [February 15, 2019, 7:32am UTC](https://discourse.threejs.org/t/help-or-any-advice/6141/3 "2019-02-15T07:32:14Z")

</div>

thank you very much

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

---

<div class="post-metadata">

**Author:** ![1116](https://avatars.discourse-cdn.com/v4/letter/1/439d5e/32.png) [@1116](https://discourse.threejs.org/u/1116)\
**Post date:** [February 15, 2019, 7:38am UTC](https://discourse.threejs.org/t/help-or-any-advice/6141/4 "2019-02-15T07:38:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [February 15, 2019, 2:09pm UTC](https://discourse.threejs.org/t/help-or-any-advice/6141/5 "2019-02-15T14:09:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [February 15, 2019, 7:16pm UTC](https://discourse.threejs.org/t/help-or-any-advice/6141/6 "2019-02-15T19:16:32Z")

</div>

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

```javascript
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.

---

<div class="post-metadata">

**Author:** ![1116](https://avatars.discourse-cdn.com/v4/letter/1/439d5e/32.png) [@1116](https://discourse.threejs.org/u/1116)\
**Post date:** [February 16, 2019, 2:01am UTC](https://discourse.threejs.org/t/help-or-any-advice/6141/7 "2019-02-16T02:01:12Z")

</div>

> [@donmccurdy](#):
>
> o.material.transparent = false; o.material.alphaTest = 0.5; o.material.needsUpdate = true;

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/4/47b3c417cb30b41127ad84fcfc1e6f641c7414d4.jpeg)

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/7/768b6c21e5aad5bb7df42dcd866afcc3dba1d48e.js) (26.9 KB)

loading model  
[test.js](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/c/c04f4f77ea68c2303a62d796408a192d0382f23e.js) (9.1 KB)

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

---

<div class="post-metadata">

**Author:** ![1116](https://avatars.discourse-cdn.com/v4/letter/1/439d5e/32.png) [@1116](https://discourse.threejs.org/u/1116)\
**Post date:** [February 16, 2019, 2:03am UTC](https://discourse.threejs.org/t/help-or-any-advice/6141/8 "2019-02-16T02:03:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [February 16, 2019, 4:31am UTC](https://discourse.threejs.org/t/help-or-any-advice/6141/9 "2019-02-16T04:31:16Z")

</div>

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/](https://gltf-viewer.donmccurdy.com/) or [http://sandbox.babylonjs.com/](http://sandbox.babylonjs.com/), and adjusting lighting there, to see what you prefer.

---

<div class="post-metadata">

**Author:** ![1116](https://avatars.discourse-cdn.com/v4/letter/1/439d5e/32.png) [@1116](https://discourse.threejs.org/u/1116)\
**Post date:** [February 16, 2019, 8:08am UTC](https://discourse.threejs.org/t/help-or-any-advice/6141/11 "2019-02-16T08:08:10Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![1116](https://avatars.discourse-cdn.com/v4/letter/1/439d5e/32.png) [@1116](https://discourse.threejs.org/u/1116)\
**Post date:** [February 18, 2019, 9:46am UTC](https://discourse.threejs.org/t/help-or-any-advice/6141/12 "2019-02-18T09:46:48Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/4/45682971b5f3c11c83400e0ec8078a0c56c4579d.jpeg) Screen-2019-02-18\_17-45-11