# Shadow on itself GLTF model

**URL:** <https://discourse.threejs.org/t/shadow-on-itself-gltf-model/22272>\
**Category:** Questions\
**Tags:** shadows\
**Created:** [January 10, 2021, 1:52pm UTC](https://discourse.threejs.org/t/shadow-on-itself-gltf-model/22272 "2021-01-10T13:52:14Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![tizkon](https://avatars.discourse-cdn.com/v4/letter/t/a6a055/32.png) [@tizkon](https://discourse.threejs.org/u/tizkon)\
**Post date:** [January 10, 2021, 1:52pm UTC](https://discourse.threejs.org/t/shadow-on-itself-gltf-model/22272/1 "2021-01-10T13:52:14Z")

</div>

Can a GLTF gets his own shadow.

For example an animation of a Terrain and a Plane where both are from the same GLTF model.

Can this plan represent a shadow on the terrain where it’s passing above?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [January 10, 2021, 5:22pm UTC](https://discourse.threejs.org/t/shadow-on-itself-gltf-model/22272/2 "2021-01-10T17:22:24Z")

</div>

How does it look like if you do this in your `onLoad()` callback?

```javascript
gltf.scene.traverse( function ( object ) {

    if ( object.isMesh ) {

        object.castShadow = true;
        object.receiveShadow = true;

    }

} );

```

With this, it is possible to implement self-shadowing. If you need an example, check:

[https://threejs.org/examples/webgl\_loader\_fbx](https://threejs.org/examples/webgl_loader_fbx)

---

<div class="post-metadata">

**Author:** ![tizkon](https://avatars.discourse-cdn.com/v4/letter/t/a6a055/32.png) [@tizkon](https://discourse.threejs.org/u/tizkon)\
**Post date:** [January 10, 2021, 6:03pm UTC](https://discourse.threejs.org/t/shadow-on-itself-gltf-model/22272/3 "2021-01-10T18:03:51Z")

</div>

I already have this settings added on this code:

```
import * as THREE from 'https://threejs.org/build/three.module.js';

import { GLTFLoader } from 'https://threejs.org/examples/jsm/loaders/GLTFLoader.js';
import {GUI} from 'https://threejsfundamentals.org/threejs/../3rdparty/dat.gui.module.js';
import { RGBELoader } from '../loaders/RGBELoader.js';
import { RoughnessMipmapper } from '../loaders/RoughnessMipmapper.js';
import { EffectComposer } from 'https://threejs.org/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'https://threejs.org/examples/jsm/postprocessing/RenderPass.js';

let camera, scene, renderer, clock, mixer, composer, controls;

init();
render();

function init() {
  clock = new THREE.Clock();

  const canvas = document.querySelector('#c');

  camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
  camera.position.set( -0.05, 0.37, 0.29 );
  camera.lookAt(new THREE.Vector3(-0.05,-0.12,-0.15));

  scene = new THREE.Scene();

 // scene.fog = new THREE.Fog( 0xffffff, 0.1, 2.55 );

  var ambientLight = new THREE.AmbientLight( 0xffffff, 0.15 );
  scene.add( ambientLight );

  var spotLight = new THREE.SpotLight( 0xffffff, 0.2 );
  spotLight.position.set( -10, 7, 6.6 );
  spotLight.angle = 0.4;
  spotLight.penumbra = 0.05;
  spotLight.decay = 1;
  spotLight.distance = 2000;

  spotLight.castShadow = true;
  spotLight.shadow.mapSize.width = 2024;
  spotLight.shadow.mapSize.height = 2024;
  spotLight.shadow.camera.near = 0.01;
  spotLight.shadow.camera.far = 1;

  scene.add( spotLight );

  spotLight.target.position.set( 3, 0, - 3 );
  scene.add( spotLight.target );

  new RGBELoader()
    .setDataType( THREE.UnsignedByteType )
    .setPath( '/assets/threeJS/map/gltf/' )
    .load( 'GCanyon_C_YumaPoint_3k.hdr', function ( texture ) {

      const envMap = pmremGenerator.fromEquirectangular( texture ).texture;

      scene.background = envMap;
      scene.environment = envMap;

      texture.dispose();
      pmremGenerator.dispose();

      render();

      const roughnessMipmapper = new RoughnessMipmapper( renderer );

      const loader = new GLTFLoader();
      loader.load( 'assets/threeJS/map/gltf/scene.gltf', function ( gltf ) {

       mixer = new THREE.AnimationMixer( gltf.scene );

        let model = gltf.scene;

        model.traverse( function ( child ) {

          if ( child.isMesh ) {

            child.material.shading = THREE.SmoothShading;
            child.castShadow = true;
            child.receiveShadow = true;

          }

        });

        scene.add(model);

        mixer = new THREE.AnimationMixer( gltf.scene );

        gltf.animations.forEach( ( clip ) => {

          mixer.clipAction( clip ).play();

        } );

        scene.add( gltf.scene );

        roughnessMipmapper.dispose();

        render();

      } );

    } );

  renderer = new THREE.WebGLRenderer( {canvas, antialias: true } );
  renderer.gammaOutput = true;
  renderer.gammaFactor = 2.2;
  renderer.shadowMap = THREE.VSMShadowMap;

  const renderScene = new RenderPass( scene, camera );

  composer = new EffectComposer( renderer );
  composer.addPass( renderScene );

  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );

  renderer.toneMapping = THREE.ACESFilmicToneMapping;
  renderer.toneMappingExposure = 1;
  renderer.outputEncoding = THREE.sRGBEncoding;

  const pmremGenerator = new THREE.PMREMGenerator( renderer );
  pmremGenerator.compileEquirectangularShader();

  const gui = new GUI();

  gui.add(camera.position, 'x', -5,5).step(0.001).onChange( function( value ){ camera.position.z = value; } );
  gui.add(camera.position, 'y', -5,5).step(0.001).onChange( function( value ){ camera.position.z = value; } );
  gui.add(camera.position, 'z', 1,5).step(0.001).onChange( function( value ){ camera.position.z = value; } );

  window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {

  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize( window.innerWidth, window.innerHeight );

  render();

}

function render() {

  var delta = clock.getDelta();
  controls.update();
  if ( mixer ) mixer.update( delta );

  renderer.render( scene, camera );

  requestAnimationFrame( render );

  composer.render();
}

```

And I am unable to see any shadows

> **[Gyazo](https://gyazo.com/238f729c11f378c3e4e5e956c430d155)**

Here you can see the it closer:

> **[Gyazo](https://gyazo.com/2b15f36190f0a45844f1479bf2319e0f)**

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [January 10, 2021, 10:44pm UTC](https://discourse.threejs.org/t/shadow-on-itself-gltf-model/22272/4 "2021-01-10T22:44:22Z")

</div>

@tizkon

Do you have

```
renderer.shadowMap.enabled = true

```

In this code?

---

<div class="post-metadata">

**Author:** ![tizkon](https://avatars.discourse-cdn.com/v4/letter/t/a6a055/32.png) [@tizkon](https://discourse.threejs.org/u/tizkon)\
**Post date:** [January 11, 2021, 10:01am UTC](https://discourse.threejs.org/t/shadow-on-itself-gltf-model/22272/5 "2021-01-11T10:01:43Z")

</div>

No I don’t but I had in the past and it didn’t worked but I should had other config and now it’s working.

First at all many thanks, I was struggling with all this configs but now the shadows are making many lines on the map and I don’t know how to solve it’s probably a numeric term:

> **[Gyazo](https://gyazo.com/ce635dc7fe8f02cda2c7729cd6251f09)**

My code is now:

```
import * as THREE from 'https://threejs.org/build/three.module.js';

import {GUI} from 'https://threejsfundamentals.org/threejs/../3rdparty/dat.gui.module.js';
import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'https://threejs.org/examples/jsm/loaders/GLTFLoader.js';
import { RGBELoader } from 'https://threejs.org/examples/jsm/loaders/RGBELoader.js';
import { RoughnessMipmapper } from 'https://threejs.org/examples/jsm/utils/RoughnessMipmapper.js';

var container, controls,pmremGenerator;
var camera, scene, renderer, mixer, clock;

init();
animate();

function init() {

  const canvas = document.querySelector('#c');

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera( 46, window.innerWidth / window.innerHeight, 0.01, 20 );
  camera.position.set( -0.05, 0.37, 0.29 );
  camera.lookAt(new THREE.Vector3(-0.05,-0.12,-0.15));

  clock = new THREE.Clock();

  var hemiLight = new THREE.HemisphereLight( 0x0000ff, 0x00ff00, 1 );
  scene.add(hemiLight);

  var spotLight = new THREE.SpotLight( 0xffffff, 0.85 );
  spotLight.position.set( 1, 1, -1 );
  spotLight.angle = 0.5;
  spotLight.penumbra = 0.05;
  spotLight.decay = 1;
  spotLight.distance = 20;
  spotLight.castShadow = true;
  spotLight.shadow.mapSize.width = window.innerWidth;
  spotLight.shadow.mapSize.height = window.innerHeight;
  spotLight.shadow.camera.near = 0.1;
  spotLight.shadow.camera.far = 2;

  scene.add( spotLight );

  spotLight.target.position.set( 0, 0, 0 );
  scene.add( spotLight.target );

  new RGBELoader()
    .setDataType( THREE.UnsignedByteType )
    .setPath( '/assets/threeJS/map/gltf/' )
    .load( 'GCanyon_C_YumaPoint_3k.hdr', function ( texture ) {

      const envMap = pmremGenerator.fromEquirectangular( texture ).texture;

      scene.background = envMap;
      scene.environment = envMap;

      texture.dispose();
      pmremGenerator.dispose();

      animate();

      const roughnessMipmapper = new RoughnessMipmapper( renderer );

      var loader = new GLTFLoader();
      loader.load( 'assets/threeJS/map/gltf/scene.gltf', function ( gltf ) {

        mixer = new THREE.AnimationMixer( gltf.scene );

        let model = gltf.scene;

        model.traverse( function ( child ) {

          if ( child.isMesh ) {

            child.material.shading = THREE.SmoothShading;
            child.castShadow = true;
            child.receiveShadow = true;

          }

        });

        scene.add(model);

        gltf.animations.forEach( ( clip ) => {

          mixer.clipAction( clip ).play();

        } );

      } );

    } );

  renderer = new THREE.WebGLRenderer( {canvas, antialias: true } );
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.toneMapping = THREE.ReinhardToneMapping;
  renderer.toneMappingExposure = 1;
  renderer.shadowMap.enabled = true;
  renderer.receiveShadow = true;
  renderer.shadowMap.type = THREE.PCFShadowMap;

  const pmremGenerator = new THREE.PMREMGenerator( renderer );
  pmremGenerator.compileEquirectangularShader();

  controls = new OrbitControls( camera, renderer.domElement );

  camera.position.set( -0.05, 0.37, 0.29 );

  camera.lookAt(new THREE.Vector3(-0.05,-0.12,-0.15));

  window.addEventListener( 'resize', onWindowResize, false );
}

function onWindowResize() {

  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize( window.innerWidth, window.innerHeight );

}

function animate() {

  var delta = clock.getDelta();
  controls.update();
  if ( mixer ) mixer.update( delta );

  renderer.render( scene, camera );

  requestAnimationFrame( animate );
}

```

Now its looks much better than before but also the performance of the browser is much worse. Could it be cause this problem with Shadows?

Greetings

---

<div class="post-metadata">

**Author:** ![tizkon](https://avatars.discourse-cdn.com/v4/letter/t/a6a055/32.png) [@tizkon](https://discourse.threejs.org/u/tizkon)\
**Post date:** [January 11, 2021, 10:58am UTC](https://discourse.threejs.org/t/shadow-on-itself-gltf-model/22272/6 "2021-01-11T10:58:09Z")

</div>

Now I solved it settling that bias:

spotLight.shadow.bias = -0.0005;

But now the performance is still bad and lagging

> **[Gyazo](https://gyazo.com/117471ab0c2b9f8966602fe3c7cdf497)**

One important detail is that the Animation file is at 60 fps exported from blender

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [January 11, 2021, 11:08am UTC](https://discourse.threejs.org/t/shadow-on-itself-gltf-model/22272/7 "2021-01-11T11:08:01Z")

</div>

@tizkon  
Have you tried using directional light instead of spotlight?

---

<div class="post-metadata">

**Author:** ![tizkon](https://avatars.discourse-cdn.com/v4/letter/t/a6a055/32.png) [@tizkon](https://discourse.threejs.org/u/tizkon)\
**Post date:** [January 11, 2021, 11:53am UTC](https://discourse.threejs.org/t/shadow-on-itself-gltf-model/22272/8 "2021-01-11T11:53:08Z")

</div>

Yes, and still the same problem:

> **[Gyazo](https://gyazo.com/078ef469a2e754d4870eda49ec6bafea)**

---

<div class="post-metadata">

**Author:** ![tizkon](https://avatars.discourse-cdn.com/v4/letter/t/a6a055/32.png) [@tizkon](https://discourse.threejs.org/u/tizkon)\
**Post date:** [January 11, 2021, 12:06pm UTC](https://discourse.threejs.org/t/shadow-on-itself-gltf-model/22272/9 "2021-01-11T12:06:45Z")

</div>

I got new info regarding my problem on this post

> [@Weird shadow lines on my terrain](https://discourse.threejs.org/t/weird-shadow-lines-on-my-terrain/5113):
>
> Please have a look at this: [Demo weird shadows](http://test.ngongo-b.net/shaderExperiment/TileBlendShader4.html) The shadows on the terrain have some sort of hard lines in them. Does anyone know how to get rid of them? This is the setup of the light: // LIGHT scene.add( new THREE.AmbientLight( 0x222222 ) ); var light = new THREE.DirectionalLight( 0xffffff, 1 ); light.position.set(300, 400, 50); light.position.multiplyScalar(1.3); light.castShadow=true; light.castShadow = true; light.shadow.camera.visible = true; var d = 200; ligh…

But If I remove the shadow casting of my own file, I lost all the shadows so I can’t go this way.

Now I am learning about how to change the frustum of the camera that is what @Mugen87 told in that forum post.

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [January 11, 2021, 12:09pm UTC](https://discourse.threejs.org/t/shadow-on-itself-gltf-model/22272/10 "2021-01-11T12:09:20Z")

</div>

@tizkon  
laggy and lines?

have you considered removing the hemisphere light seeing as you’ve got a hdr in there anyway, if your hdr is 3k as it says it is i think using that as env map will have to make a lot of calculations, might need to use one or the other?

---

<div class="post-metadata">

**Author:** ![tizkon](https://avatars.discourse-cdn.com/v4/letter/t/a6a055/32.png) [@tizkon](https://discourse.threejs.org/u/tizkon)\
**Post date:** [January 11, 2021, 12:16pm UTC](https://discourse.threejs.org/t/shadow-on-itself-gltf-model/22272/11 "2021-01-11T12:16:16Z")

</div>

Yes i just trid with one of 1k

> **[Gyazo](https://gyazo.com/04b8417ab6e48b9ed66c544e48899144)**

The performance became a bit better not a big change

I tried this one: [HDRI: Kloppenheim 06 | HDRI Haven](https://hdrihaven.com/hdri/?c=skies&h=kloppenheim_06)

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [January 11, 2021, 12:17pm UTC](https://discourse.threejs.org/t/shadow-on-itself-gltf-model/22272/12 "2021-01-11T12:17:59Z")

</div>

your camera far clipping plane is only set to 20 which seems reasonable but you shadow camera.far is set to 2 which seems big enough to cover the entire scene with shadows right? can always add the light helper to see if the bounds of the shadow camera are too big and adjust camera far clip to a similar value…

just out of curiosity, did your directional light have a setup like this?..

```
directionalLight = new THREE.DirectionalLight( 0xffffff, 0.7, 18 );
directionalLight.position.set(1, 1, -1);
directionalLight.castShadow = true;
directionalLight.shadow.camera.left = - 3;
directionalLight.shadow.camera.right = 3;
directionalLight.shadow.camera.top = 3;
directionalLight.shadow.camera.bottom = - 3;
directionalLight.shadow.camera.fov = 45;
directionalLight.shadow.camera.aspect = 1;
directionalLight.shadow.camera.near = 0.1;
directionalLight.shadow.camera.far = 3;
directionalLight.shadow.bias = -0.001;
directionalLight.shadow.mapSize.width = 2048;
directionalLight.shadow.mapSize.height = 2048;

scene.add( directionalLight );
```

---

<div class="post-metadata">

**Author:** ![tizkon](https://avatars.discourse-cdn.com/v4/letter/t/a6a055/32.png) [@tizkon](https://discourse.threejs.org/u/tizkon)\
**Post date:** [January 11, 2021, 12:21pm UTC](https://discourse.threejs.org/t/shadow-on-itself-gltf-model/22272/13 "2021-01-11T12:21:22Z")

</div>

No mine looks like this:

var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.95 );  
directionalLight.position.set( 1, 0.5, -0.6 );  
directionalLight.castShadow = true;  
directionalLight.shadow.bias = -0.0001;  
directionalLight.shadow.mapSize.width = window.innerWidth;  
directionalLight.shadow.mapSize.height = window.innerHeight;  
directionalLight.shadow.camera.near = 0.1;  
directionalLight.shadow.camera.far = 2;

scene.add( directionalLight );

Also I tried your’s and that was the result:

> **[Gyazo](https://gyazo.com/271ae10cbec30f7b84090b29a76d40fe)**

Now its likes better but its still laggy.

It’s all throught Shadow, I should optimize this I think.

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [January 11, 2021, 12:22pm UTC](https://discourse.threejs.org/t/shadow-on-itself-gltf-model/22272/14 "2021-01-11T12:22:37Z")

</div>

> [@tizkon](#):
>
> `scene.environment = envMap;`

do you want/need the actual lighting from the hdr? because you could try removing this line, should increse performance but then again i’ve used hdr in conjunction with directional light before here [xenzvr.com](http://xenzvr.com) and seems to run ok on medium teir devices, bit slower on older ones like iphone 6s for example but rapid on my p30

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [January 11, 2021, 12:25pm UTC](https://discourse.threejs.org/t/shadow-on-itself-gltf-model/22272/15 "2021-01-11T12:25:39Z")

</div>

@tizkon

yeah sorry you can try setting

```
directionalLight.shadow.bias = 0.001;

```

i put a negative number by accident

and try add

```
directionalLight.shadow.normalBias = 0.003;
```

---

<div class="post-metadata">

**Author:** ![tizkon](https://avatars.discourse-cdn.com/v4/letter/t/a6a055/32.png) [@tizkon](https://discourse.threejs.org/u/tizkon)\
**Post date:** [January 11, 2021, 12:30pm UTC](https://discourse.threejs.org/t/shadow-on-itself-gltf-model/22272/16 "2021-01-11T12:30:29Z")

</div>

Just tested this settings and still near the same result:

> **[Gyazo](https://gyazo.com/922c86cc6c468f0aa273944c9eaef253)**

---

<div class="post-metadata">

**Author:** ![tizkon](https://avatars.discourse-cdn.com/v4/letter/t/a6a055/32.png) [@tizkon](https://discourse.threejs.org/u/tizkon)\
**Post date:** [January 11, 2021, 12:31pm UTC](https://discourse.threejs.org/t/shadow-on-itself-gltf-model/22272/17 "2021-01-11T12:31:02Z")

</div>

The code looks like this now:

```
import * as THREE from 'https://threejs.org/build/three.module.js';

```

import {GUI} from ‘[https://threejsfundamentals.org/threejs/../3rdparty/dat.gui.module.js](https://threejsfundamentals.org/threejs/../3rdparty/dat.gui.module.js)’;  
import { OrbitControls } from ‘[https://threejs.org/examples/jsm/controls/OrbitControls.js](https://threejs.org/examples/jsm/controls/OrbitControls.js)’;  
import { GLTFLoader } from ‘[https://threejs.org/examples/jsm/loaders/GLTFLoader.js](https://threejs.org/examples/jsm/loaders/GLTFLoader.js)’;  
import { RGBELoader } from ‘[https://threejs.org/examples/jsm/loaders/RGBELoader.js](https://threejs.org/examples/jsm/loaders/RGBELoader.js)’;  
import { RoughnessMipmapper } from ‘[https://threejs.org/examples/jsm/utils/RoughnessMipmapper.js](https://threejs.org/examples/jsm/utils/RoughnessMipmapper.js)’;

var container, controls,pmremGenerator;  
var camera, scene, renderer, mixer, clock;

init();  
animate();

function init() {

const canvas = document.querySelector(’#c’);

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera( 46, window.innerWidth / window.innerHeight, 0.01, 20 );  
camera.position.set( -0.05, 0.37, 0.29 );  
camera.lookAt(new THREE.Vector3(-0.05,-0.12,-0.15));

clock = new THREE.Clock();

//var hemiLight = new THREE.HemisphereLight( 0x0000ff, 0x00ff00, 1 );  
[//scene.add](https://scene.add)(hemiLight);

let directionalLight = new THREE.DirectionalLight( 0xffffff, 0.7, 18 );  
directionalLight.position.set(1, 1, -1);  
directionalLight.castShadow = true;  
directionalLight.shadow.camera.left = - 3;  
directionalLight.shadow.camera.right = 3;  
directionalLight.shadow.camera.top = 3;  
directionalLight.shadow.camera.bottom = - 3;  
directionalLight.shadow.camera.fov = 45;  
directionalLight.shadow.camera.aspect = 1;  
directionalLight.shadow.camera.near = 0.1;  
directionalLight.shadow.camera.far = 3;  
directionalLight.shadow.bias = 0.001;  
directionalLight.shadow.normalBias = 0.003;  
directionalLight.shadow.mapSize.width = 2048;  
directionalLight.shadow.mapSize.height = 2048;

scene.add( directionalLight );

scene.add( directionalLight );

new RGBELoader()  
.setDataType( THREE.UnsignedByteType )  
.setPath( ‘/assets/threeJS/map/gltf/’ )  
.load( ‘kloppenheim\_06\_1k.hdr’, function ( texture ) {

```
  const envMap = pmremGenerator.fromEquirectangular( texture ).texture;

  scene.background = envMap;
  scene.environment = envMap;

  texture.dispose();
  pmremGenerator.dispose();

  animate();

  var loader = new GLTFLoader();
  loader.load( 'assets/threeJS/map/gltf/scene.gltf', function ( gltf ) {

    mixer = new THREE.AnimationMixer( gltf.scene );

    let model = gltf.scene;

    model.traverse( function ( child ) {

      if ( child.isMesh ) {

        child.material.shading = THREE.SmoothShading;
        child.castShadow = true;
        child.receiveShadow = true;
        child.material.metalness = 1;
        child.material.roughness = 1;
      }

    });

    scene.add(model);

    gltf.animations.forEach( ( clip ) => {

      mixer.clipAction( clip ).play();

    } );

  } );

} );

```

renderer = new THREE.WebGLRenderer( {canvas, antialias: true } );  
renderer.setPixelRatio( window.devicePixelRatio );  
renderer.setSize( window.innerWidth, window.innerHeight );  
renderer.toneMapping = THREE.ReinhardToneMapping;  
renderer.toneMappingExposure = 1;  
renderer.shadowMap.enabled = true;  
renderer.shadowMap.autoUpdate = true;  
renderer.receiveShadow = true;  
renderer.gammaFactor = 2.2;  
renderer.shadowMap.type = THREE.PCFShadowMap;  
[//renderer.outputEncoding](https://renderer.outputEncoding) = THREE.sRGBEncoding;

const pmremGenerator = new THREE.PMREMGenerator( renderer );  
pmremGenerator.compileEquirectangularShader();

controls = new OrbitControls( camera, renderer.domElement );

camera.position.set( -0.05, 0.37, 0.29 );

camera.lookAt(new THREE.Vector3(-0.05,-0.12,-0.15));

window.addEventListener( ‘resize’, onWindowResize, false );  
}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;  
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

}

function animate() {

var delta = clock.getDelta();  
controls.update();  
if ( mixer ) mixer.update( delta );

renderer.render( scene, camera );

requestAnimationFrame( animate );  
}

---

<div class="post-metadata">

**Author:** ![tizkon](https://avatars.discourse-cdn.com/v4/letter/t/a6a055/32.png) [@tizkon](https://discourse.threejs.org/u/tizkon)\
**Post date:** [January 11, 2021, 1:03pm UTC](https://discourse.threejs.org/t/shadow-on-itself-gltf-model/22272/18 "2021-01-11T13:03:23Z")

</div>

Now I tried to reduce the pixel ratio of my scene this way:

renderer.setPixelRatio( window.devicePixelRatio\*0.8 );

And now its looks more smooth and also it has like a small blur and a tunnel effect on the camera:

> **[Gyazo](https://gyazo.com/4e6b509b0cecafdcf734cd51ab129c07)**

Also I would be good to have a good performance with the 100% of the pixel ratio.

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [January 11, 2021, 1:49pm UTC](https://discourse.threejs.org/t/shadow-on-itself-gltf-model/22272/19 "2021-01-11T13:49:30Z")

</div>

@tizkon  
do you have a live link to share as a codepen or something? that would be easier to help you out i think…

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [January 11, 2021, 2:52pm UTC](https://discourse.threejs.org/t/shadow-on-itself-gltf-model/22272/20 "2021-01-11T14:52:43Z")

</div>

@tizcon  
here’s a simple demo of a shadow setup, maybe looking at this can help?

https://codepen.io/forerunrun/embed/preview/BaLOxLB?height=300&slug-hash=BaLOxLB&default-tabs=js,result&host=https://codepen.io

[Next page](https://discourse.threejs.org/t/shadow-on-itself-gltf-model/22272.md?page=2)