Directional light target not tracking target

Questions
1

Hello,

I am trying to add a target to the scene and have a light point at it. However, I am having issues with the target not being tracked by the light.

I made a JS fiddle describing my issue: Edit fiddle - JSFiddle - Code Playground

<script type="module">
        import * as three from "three"
        import { OrbitControls } from "https://unpkg.com/three@v0.121.1/examples/jsm/controls/OrbitControls.js"
        var scene = new three.Scene();
        var camera = new three.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        var renderer = new three.WebGLRenderer({
        });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        const directionalLight = new three.DirectionalLight(0xffffff, 0.5);
        scene.add(directionalLight);
        directionalLight.position.y = (5 + 5)
        directionalLight.position.x = -(5 + 5)
        directionalLight.position.z = -(5 + 5)
        camera.position.y = 5 + 5
        camera.position.x = 5 + 5
        camera.position.z = 5 + 5
        let target1 = new three.Mesh(new three.BoxGeometry(1,1,1), new three.MeshStandardMaterial({
        color: "red"
        }))
        scene.add(target1)
        target1.position.y = 20
        directionalLight.target = target1
        const controls = new OrbitControls(camera, renderer.domElement);
        const helper = new three.DirectionalLightHelper(directionalLight, 5 );
        scene.add( helper );
        const animate = () => {
            requestAnimationFrame(animate);
             controls.update()
                 renderer.render(scene, camera);
        };
        animate();
    </script>

image
image718×556 4.46 KB

2

If the directional light’s transformation is changed after you have created the respective helper, you have to call its update().

Fixed live example: Edit fiddle - JSFiddle - Code Playground

1 Like
3

How come adding helper.update() before the loop does nothing, but putting it within the loop causing a update?

  helper.update()
const animate = () => {
         requestAnimationFrame(animate);
         controls.update()
         renderer.render(scene, camera);
 };
  animate();
4

This is caused by a bug which is unfortunately not yet fixed:

1 Like