How to change the directional light orientation?

Questions
1

I know that directional light has a position like directional.light.position.set(0,0,0) that changes the position of directional light, but, how to change the orientation light by lookAt or a target? I tried bot, but the result is that the light keeps the position, but not the orientation. Could someone help me? Thanks anyway.

2

The description is insufficient to guess what exactly you have tried. Most often the issue with directional light’s direction is caused by forgetting to put the target object as a child of the scene.

3

I used the commands:

	function render(){
		scene.traverse(function(object){
			object.castShadow = true
			object.receiveShadow = true
		})

		directionalLight.position.set(camera.position.x,1,camera.position.z)

		directionalLight.lookAt(camera.position.x,0,camera.position.z)

		renderer.shadowMap.render(directionalLight,scene,camera)

In the function render, but the light doesnt appear correctly working. The render function is a loop called everytime. The navigator is reading the position but not the rotation.

4

The threejs target isnt working too, so the code is it:

	var plane;
	function render(){
		scene.traverse(function(object){
			object.castShadow = true
			object.receiveShadow = true
		})
		directionalLight.position.set(0, camera.position.y+1, 0)
		targetObject = new THREE.Object3D(); 
		scene.add(targetObject);
		targetObject.position.set(0, camera.position.y+0, 0)
		light.target = targetObject;
		directionalLight.castShadow=true
		directionalLight.shadow.camera.position.set(camera.position.x, camera.position.y, camera.position.z)
5

image
image925Ă—403 78.4 KB

image
image1014Ă—449 42.4 KB

These are the results…

6

I had preconfigured this for the 2 shadowmaps:

	//Create a DirectionalLight and turn on shadows for the light
	const directionalLight = new THREE.DirectionalLight( 0xffffff, 1.5 );
	directionalLight.position.set( 0, 1, 0 ); //default; light shining from top
	directionalLight.castShadow = true; // default false
	scene.add( directionalLight );

	directionalLight.shadow.mapSize.width=1024
	directionalLight.shadow.mapSize.height=1024
	directionalLight.shadow.camera.near = 0.1
	directionalLight.shadow.camera.far = 10**10

	directionalLight.shadow.camera.top = 100
	directionalLight.shadow.camera.right = 100
	directionalLight.shadow.camera.bottom = -100
	directionalLight.shadow.camera.left = -100

	directionalLight.shadow.camera.fov = 75

	directionalLight.shadow.camera.view = 100

	renderer.shadowMap.enabled = true
	renderer.shadowMap.type = THREE.PCFShadowMap
	renderer.shadowMap.alias = true

	renderer.shadowMap.width=1024
	renderer.shadowMap.height=1024
7

Any chance to demonstrate the issue with some minimal working code that can be debugged online? When I try to move the position and target of a directional light, it behaves as expected:

https://codepen.io/boytchev/full/ByBjYPq

image

1 Like
8

The camera rotation axis is hidden, i cant extract from your code.

9

The code is here:
index.php (30.8 KB)
perlin.js (10.2 KB)
PointerLockControls.js (3.1 KB)
stats.js (3.7 KB)
three.js (1.2 MB)
And the textures:

bottom
bottom512Ă—512 53 KB

leaves
leaves2563Ă—2611 3.7 MB

side
side512Ă—1544 133 KB

top
top512Ă—512 60.4 KB

trunk
trunk720Ă—4772 1.84 MB

10

I cant post links because i dont have the money for paying the hosting, sorry >_<

11

Hi @FreeistDrMarxio …

Please take a look at:

https://jrlazz.eu5.org/anim/direct.html

direct
direct400Ă—243 13.7 KB

PS: Sorry… I posted just after your first post!

12

I mean the angle of the camera.

13

Sorry, I don’t have the time to install and debug your full code. You can make a minimal example for free at CodePen or another similar service. The demo that I made about how to change the direction of the directional light is posted on CodePen too. It did not cost me any money.

BTW, your code makes a vertical light that does not move horizontally:

directionalLight.position.set(0, camera.position.y+1, 0)|
:
targetObject.position.set(0, camera.position.y+0, 0)

I am confused at what you try to achieve. I hope someone with better understanding could help you.

14

Can you simplify what you’re tying to achieve with diagrams, video, or live example that illustrates the behavioural outcome?

Ps… If the following is in a recursive animation call I need to quickly go bleach my eyes :sweat_smile:

1 Like
15

Sorry, i cant upload textures to fiddle or something and i have no paid hosting only, they banned me when i posted any game, but you have my files up to here.

16

Hi @FreeistDrMarxio …

Maybe creating a target for the directional…

https://jrlazz.eu5.org/anim/direct2.html