How can I achieve flashlight beam using spotLight?

Questions
,
1

Hello, I’m struggling with getting spotLight work as a flashlight. I want to attach it to the camera object so it shines where center of screen is

camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z=1;
scene.add(camera);
spotlight = new THREE.SpotLight(0xffffff, 10, 150, Math.PI * 0.2);
camera.add(spotlight);
camera.add(spotlight.target);
controls = new PointerLockControls( camera, document.body );

but this results in:

shine1
shine11842×828 46.8 KB

and what I want: circleBeam
How can I achieve this? Is it even possible?

2

Do it like in this example: Edit fiddle - JSFiddle - Code Playground

The spot light in three.js is a so called targeted light. That means its target property defines the direction of the light. target is an instance of Object3D and its position at (0,0,0) by default.

For your use case, I suggest you add the light and the target to the camera as a child (what you already do) and then translate the target a bit along the negative z axis. In this way, the spot light will always “look” along the current viewing direction of the player.

1 Like