Directional/spotlight light in threejs with helper

i m following this guide for the light Light in Threejsand i already add some light in my scene.

Now i m try to add a light on the character of my game, but still dont work. i use the same code of the guide changing just the position.set

 const color = 0xFFFFFF; const intensity = 1; const light2 = new THREE.SpotLight(color, intensity,0,); light2.position.set(100,-5000,1000); light2.target = lightTarget; light2.castShadow = true; const helper2 = new THREE.SpotLightHelper(light2);

and after i add in this way to my character

 self.flame.add( helper2 ); self.flame.add(lightTarget); self.flame.add(light2);

I added a helper too, but if I use just the helper in the scene , so if comment

 self.flame.add(light2)

I see the position of the light in perfect way, when add the light the helper disappear (in other light don't happened) and the light go as her want.

Someone can help me?

1 Answer

The helpers have to be parented to the scene (or at least the SpotLightHelper does). You may or may not want to parent the target to the scene.

You also need to call helper.update for each helper

'use strict';
/* global THREE, dat */
function main() { const canvas = document.querySelector('#c'); const renderer = new THREE.WebGLRenderer({canvas}); const fov = 45; const aspect = 2; // the canvas default const near = 0.1; const far = 100; const camera = new THREE.PerspectiveCamera(fov, aspect, near, far); camera.position.set(0, 10, 20); const controls = new THREE.OrbitControls(camera, canvas); controls.target.set(0, 5, 0); controls.update(); const scene = new THREE.Scene(); scene.background = new THREE.Color('black'); { const planeSize = 40; const loader = new THREE.TextureLoader(); const texture = loader.load('); texture.wrapS = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; texture.magFilter = THREE.NearestFilter; const repeats = planeSize / 2; texture.repeat.set(repeats, repeats); const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize); const planeMat = new THREE.MeshPhongMaterial({ map: texture, side: THREE.DoubleSide, }); const mesh = new THREE.Mesh(planeGeo, planeMat); mesh.rotation.x = Math.PI * -.5; scene.add(mesh); } const cubes = []; let parent = scene; { const cubeSize = 1; const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize); const cubeMat = new THREE.MeshPhongMaterial({ color: '#8AC', emissive: '#333', }); for (let i = 0; i < 6; ++i) { const mesh = new THREE.Mesh(cubeGeo, cubeMat); mesh.position.set(1, 0, 0); parent.add(mesh); cubes.push(mesh); parent = mesh; } } cubes[0].position.set(-3, 7, 0); const color = 0xFFFFFF; const intensity = 1; const light = new THREE.SpotLight(color, intensity); light.position.set(0, 0, 0); light.target.position.set(0, -1, 0); parent.add(light); parent.add(light.target); //scene.add(light.target); const helper = new THREE.SpotLightHelper(light); scene.add(helper); function resizeRendererToDisplaySize(renderer) { const canvas = renderer.domElement; const width = canvas.clientWidth; const height = canvas.clientHeight; const needResize = canvas.width !== width || canvas.height !== height; if (needResize) { renderer.setSize(width, height, false); } return needResize; } function render(time) { time *= 0.001; if (resizeRendererToDisplaySize(renderer)) { const canvas = renderer.domElement; camera.aspect = canvas.clientWidth / canvas.clientHeight; camera.updateProjectionMatrix(); } for (const cube of cubes) { cube.rotation.z = Math.sin(time) * .4; } light.angle = THREE.Math.lerp( THREE.Math.degToRad(20), THREE.Math.degToRad(80), Math.sin(time * 0.77) * 0.5 + 0.5); helper.update(); renderer.render(scene, camera); requestAnimationFrame(render); } requestAnimationFrame(render);
}
main();

html, body { margin: 0; height: 100%;
}
#c { width: 100%; height: 100%; display: block;
}

<canvas></canvas>
<script src=""></script>
<script src=""></script>