# The position of directioal light is incorrectly display

**URL:** <https://discourse.threejs.org/t/the-position-of-directioal-light-is-incorrectly-display/41910>\
**Category:** Questions\
**Tags:** directional-light\
**Created:** [August 26, 2022, 7:30am UTC](https://discourse.threejs.org/t/the-position-of-directioal-light-is-incorrectly-display/41910 "2022-08-26T07:30:29Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Delicialin](https://avatars.discourse-cdn.com/v4/letter/d/aca169/32.png) [@Delicialin](https://discourse.threejs.org/u/Delicialin)\
**Post date:** [August 26, 2022, 7:30am UTC](https://discourse.threejs.org/t/the-position-of-directioal-light-is-incorrectly-display/41910/1 "2022-08-26T07:30:29Z")

</div>

Hi, I’m new to Three.js, and I have a problem about directional light.  
The code is as follows:

```javascript
//Model loader
const loader = new GLTFLoader().setPath( 'models/gltf/' );
loader.setKTX2Loader( ktx2Loader );
loader.setMeshoptDecoder( MeshoptDecoder );
loader.load( 'cpt0826.glb', function ( gltf ) {
	gltf.scene.position.x = 0;
	gltf.scene.position.y = 0;
	gltf.scene.position.z = 0;

	gltf.scene.scale.set(10, 10, 10);

	scene.add( gltf.scene );
	// Directioal light
	directionalLight = new THREE.DirectionalLight(0x999999,0.8);
	// directionalLight.castShadow = true;

	directionalLight.position.set(500, 1100, 500);
	directionalLight.target = gltf.scene;
	directionalLight.shadow.radius = 0.5;
	directionalLight.shadow.camera.near = 100;
	directionalLight.shadow.camera.far = 3000;
	directionalLight.shadow.camera.left = -500;
	directionalLight.shadow.camera.right = 500;
	directionalLight.shadow.camera.top = 500;
	directionalLight.shadow.camera.bottom = -500;

	directionalLight.visible = true;

	scene.add(directionalLight);

	let helper = new THREE.CameraHelper( directionalLight.shadow.camera );

scene.add( helper );
}

```

 ![图片](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/b/bb17f67ced877d4be99f0f5a3f6e38e238c5e726.png)  
generally speaking, Directional light start position is (500, 1100, 500), but the position is set at original point, so I don’t know why.

And does there are other ways to load GLTF/GLB model without gltf.scene?

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [August 26, 2022, 8:46am UTC](https://discourse.threejs.org/t/the-position-of-directioal-light-is-incorrectly-display/41910/2 "2022-08-26T08:46:15Z")

</div>

> [@Delicialin](#):
>
> are other ways to load GLTF/GLB model without gltf.scene?

1. Why? GLTF Scene in a glTF is kinda just a root Object3D that’s called a scene. You’re also free to just move objects from the glTF scene to your own:

```javascript
// NOTE Since object can have only a single parent, this will remove children from gltf.scene
gltf.scene.children.forEach(child => scene.add(child));

```

1. Your code is [correct](https://codepen.io/mjurczyk/pen/qBoGMbw?editors=0010) though. But with `.castShadow = false`, the CameraHelper seems to just not see the shadow map camera.

Just set the directional light and model shadow casting to true, and it should work just fine:

```javascript
new GLTFLoader().load('model.gltf', gltf => {
  // NOTE You must enable shadow casting on submeshes of the glTF tree as well:
  gltf.scene.traverse(child => {
    child.castShadow = true;
  });

  // NOTE [...] Add model and lights to the scene here [...]

  // NOTE Enable shadows for the light and the ground
  directionalLight.castShadow = true;
  ground.receiveShadow = true;
});

```