The position of directioal light is incorrectly display

Questions
1

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

//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 );
}

图片
图片1329×877 30.9 KB

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?

2
  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:
// 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 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:

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;
});