title: Adding spotlight effect on an object in the scene using three.js
body: <p>I'm trying to add a spotlight effect on different parts of my scene but for some reason I'm unable to accomplish it. I tried using <code>PointLight</code> and <code>SpotLight</code> but they both didn't work.</p>
  
  <p>Example of the code</p>
  
  <pre class="lang-js prettyprint-override"><code> var pointLight = new THREE.PointLight( 0xffffff, 1, 10 );
   pointLight.position.set(obj.position);
   scene.add( pointLight );
  </code></pre>
  
  <p>The light effect doesn't need to follow the mouse movement. It just needs to appear after specific event trigger. </p>
  
  <p>I'm not sure if the spotLight or the pointLight is the right way to do this.
  I appreciate any feedback on what approach I should take and what is the best way to accomplish this animation.</p>
  
  <p>Attempted adding <code>SpotLight</code> like so</p>
  
  <pre class="lang-js prettyprint-override"><code>var spotLight = new THREE.SpotLight(  0xffffff );
  spotLight.position.set( 0, 0, 0 );
  
  spotLight.shadow.mapSize.width = 512;
  spotLight.shadow.mapSize.height = 512;
  spotLight.target = obj;
  spotLight.intensity = 2;
  scene.add( spotLight );
  
  var spotLightHelper = new THREE.SpotLightHelper( spotLight );
  scene.add( spotLightHelper );
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/644Ym.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/644Ym.gif" alt="Animation example"></a></p>