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?
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>
