DirectionalLightHelper.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. /**
  2. * @author alteredq / http://alteredqualia.com/
  3. *
  4. * - shows directional light color, intensity, position, orientation and target
  5. */
  6. THREE.DirectionalLightHelper = function ( light, sphereSize ) {
  7. THREE.Object3D.call( this );
  8. this.light = light;
  9. // position
  10. this.position = light.position;
  11. // direction
  12. this.direction = new THREE.Vector3();
  13. this.direction.subVectors( light.target.position, light.position );
  14. // color
  15. var intensity = THREE.Math.clamp( light.intensity, 0, 1 );
  16. this.color = light.color.clone();
  17. this.color.multiplyScalar( intensity );
  18. var hexColor = this.color.getHex();
  19. // light helper
  20. var bulbGeometry = new THREE.SphereGeometry( sphereSize, 16, 8 );
  21. var raysGeometry = new THREE.AsteriskGeometry( sphereSize * 1.25, sphereSize * 2.25 );
  22. var bulbMaterial = new THREE.MeshBasicMaterial( { color: hexColor, fog: false } );
  23. var raysMaterial = new THREE.LineBasicMaterial( { color: hexColor, fog: false } );
  24. this.lightSphere = new THREE.Mesh( bulbGeometry, bulbMaterial );
  25. this.lightRays = new THREE.Line( raysGeometry, raysMaterial, THREE.LinePieces );
  26. this.add( this.lightSphere );
  27. this.add( this.lightRays );
  28. this.lightSphere.properties.isGizmo = true;
  29. this.lightSphere.properties.gizmoSubject = light;
  30. this.lightSphere.properties.gizmoRoot = this;
  31. // light target helper
  32. this.targetSphere = null;
  33. if ( light.target.properties.targetInverse ) {
  34. var targetGeo = new THREE.SphereGeometry( sphereSize, 8, 4 );
  35. var targetMaterial = new THREE.MeshBasicMaterial( { color: hexColor, wireframe: true, fog: false } );
  36. this.targetSphere = new THREE.Mesh( targetGeo, targetMaterial );
  37. this.targetSphere.position = light.target.position;
  38. this.targetSphere.properties.isGizmo = true;
  39. this.targetSphere.properties.gizmoSubject = light.target;
  40. this.targetSphere.properties.gizmoRoot = this.targetSphere;
  41. var lineMaterial = new THREE.LineDashedMaterial( { color: hexColor, dashSize: 4, gapSize: 4, opacity: 0.75, transparent: true, fog: false } );
  42. var lineGeometry = new THREE.Geometry();
  43. lineGeometry.vertices.push( this.position.clone() );
  44. lineGeometry.vertices.push( this.targetSphere.position.clone() );
  45. lineGeometry.computeLineDistances();
  46. this.targetLine = new THREE.Line( lineGeometry, lineMaterial );
  47. this.targetLine.properties.isGizmo = true;
  48. }
  49. //
  50. this.properties.isGizmo = true;
  51. }
  52. THREE.DirectionalLightHelper.prototype = Object.create( THREE.Object3D.prototype );
  53. THREE.DirectionalLightHelper.prototype.update = function () {
  54. // update arrow orientation
  55. // pointing from light to target
  56. this.direction.subVectors( this.light.target.position, this.light.position );
  57. // update arrow, spheres, rays and line colors to light color * light intensity
  58. var intensity = THREE.Math.clamp( this.light.intensity, 0, 1 );
  59. this.color.copy( this.light.color );
  60. this.color.multiplyScalar( intensity );
  61. this.lightSphere.material.color.copy( this.color );
  62. this.lightRays.material.color.copy( this.color );
  63. this.targetSphere.material.color.copy( this.color );
  64. this.targetLine.material.color.copy( this.color );
  65. // update target line vertices
  66. this.targetLine.geometry.vertices[ 0 ].copy( this.light.position );
  67. this.targetLine.geometry.vertices[ 1 ].copy( this.light.target.position );
  68. this.targetLine.geometry.computeLineDistances();
  69. this.targetLine.geometry.verticesNeedUpdate = true;
  70. }