Direction of the SpotLightHelper

While doing some experiments with light, I noticed that SpotLightHelper does not fit to the SpotLight.

The center ray of the cone always points to the origin.

What am I doing wrong?
20181025-1540-57514

The complete site:


<!DOCTYPE html>
<!-- @author hofk -->
<head>
  <title> spotLight - Helper</title>
  <meta charset="utf-8" />
</head>
<body> </body>
<script src="https://threejs.org/build/three.min.js"></script>	
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script>
'use strict'
var scene  = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 0.01, 100 );
camera.position.set( 10, 8, 12 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xcccccc );
document.body.appendChild( renderer.domElement );
var controls = new THREE.OrbitControls( camera, renderer.domElement );	
var axesHelper = new THREE.AxesHelper( 20 );
scene.add( axesHelper );

var ambientLight = new THREE.AmbientLight( 0x404040, 0.9 ); 
scene.add( ambientLight );

var pointLight = new THREE.PointLight( 0x303030 );
pointLight.position.set( 8, 80, 0 );
scene.add( pointLight );

var spotLight = new THREE.SpotLight( 0xffffff, 5, 24, 0.3, 0.25, 2 );
spotLight.position.set( 8, 10, -2 );
spotLight.target.position.set( 0.5, 0, 5 );
scene.add( spotLight.target);
var spotLightHelper = new THREE.SpotLightHelper( spotLight );
scene.add( spotLightHelper );
scene.add( spotLight );

var floorGeo  = new THREE.PlaneBufferGeometry( 8, 8 );
floorGeo.rotateX( 1.57 );
floorGeo.translate( 4, 0, 0 );
var floor = new THREE.Mesh( floorGeo, new THREE.MeshStandardMaterial( { color: 0xccccff, side: THREE.DoubleSide } ) );
scene.add( floor );

var wallGeo = new THREE.PlaneBufferGeometry( 8, 8 );
wallGeo.rotateY( 1.57 );
wallGeo.translate( 0, 4, 0 );
var wallMat = new THREE.MeshPhongMaterial( { color: 0xee44ee, side: THREE.DoubleSide } );
var wall = new THREE.Mesh( wallGeo, wallMat );
scene.add( wall );

var pictureGeo  = new THREE.PlaneBufferGeometry( 3, 3 );
pictureGeo.rotateY( 1.57 );
pictureGeo.translate( 0.01, 2.5, 1.5);
//var texture	= new THREE.TextureLoader().load( "dahlia.jpg" ); // "white.png"
//var pictureMat = new THREE.MeshPhongMaterial( { map: texture, side: THREE.DoubleSide } );
var pictureMat = new THREE.MeshPhongMaterial( { color: 0xffff00, side: THREE.DoubleSide } );
var picture = new THREE.Mesh( pictureGeo, pictureMat );
scene.add( picture );

animate();

function animate() {

	requestAnimationFrame( animate );	
	renderer.render( scene, camera );
	
}
</script>
</html>

You have to update the light helper in the render loop:

https://jsfiddle.net/f2Lommf5/15490/

This is also demonstrated in the respective spot light example:

https://threejs.org/examples/#webgl_lights_spotlight

3 Likes

Thank you very much, sir, :+1:
it’s always the simple things I don’t come up with! :frowning_face:

20181025-1834-46918