PeppersGhostEffect.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. /**
  2. * Created by tpowellmeto on 29/10/2015.
  3. *
  4. * peppers ghost effect based on http://www.instructables.com/id/Reflective-Prism/?ALLSTEPS
  5. */
  6. import {
  7. PerspectiveCamera,
  8. Quaternion,
  9. Vector3
  10. } from "../../../build/three.module.js";
  11. var PeppersGhostEffect = function ( renderer ) {
  12. var scope = this;
  13. scope.cameraDistance = 15;
  14. scope.reflectFromAbove = false;
  15. // Internals
  16. var _halfWidth, _width, _height;
  17. var _cameraF = new PerspectiveCamera(); //front
  18. var _cameraB = new PerspectiveCamera(); //back
  19. var _cameraL = new PerspectiveCamera(); //left
  20. var _cameraR = new PerspectiveCamera(); //right
  21. var _position = new Vector3();
  22. var _quaternion = new Quaternion();
  23. var _scale = new Vector3();
  24. // Initialization
  25. renderer.autoClear = false;
  26. this.setSize = function ( width, height ) {
  27. _halfWidth = width / 2;
  28. if ( width < height ) {
  29. _width = width / 3;
  30. _height = width / 3;
  31. } else {
  32. _width = height / 3;
  33. _height = height / 3;
  34. }
  35. renderer.setSize( width, height );
  36. };
  37. this.render = function ( scene, camera ) {
  38. scene.updateMatrixWorld();
  39. if ( camera.parent === null ) camera.updateMatrixWorld();
  40. camera.matrixWorld.decompose( _position, _quaternion, _scale );
  41. // front
  42. _cameraF.position.copy( _position );
  43. _cameraF.quaternion.copy( _quaternion );
  44. _cameraF.translateZ( scope.cameraDistance );
  45. _cameraF.lookAt( scene.position );
  46. // back
  47. _cameraB.position.copy( _position );
  48. _cameraB.quaternion.copy( _quaternion );
  49. _cameraB.translateZ( - ( scope.cameraDistance ) );
  50. _cameraB.lookAt( scene.position );
  51. _cameraB.rotation.z += 180 * ( Math.PI / 180 );
  52. // left
  53. _cameraL.position.copy( _position );
  54. _cameraL.quaternion.copy( _quaternion );
  55. _cameraL.translateX( - ( scope.cameraDistance ) );
  56. _cameraL.lookAt( scene.position );
  57. _cameraL.rotation.x += 90 * ( Math.PI / 180 );
  58. // right
  59. _cameraR.position.copy( _position );
  60. _cameraR.quaternion.copy( _quaternion );
  61. _cameraR.translateX( scope.cameraDistance );
  62. _cameraR.lookAt( scene.position );
  63. _cameraR.rotation.x += 90 * ( Math.PI / 180 );
  64. renderer.clear();
  65. renderer.setScissorTest( true );
  66. renderer.setScissor( _halfWidth - ( _width / 2 ), ( _height * 2 ), _width, _height );
  67. renderer.setViewport( _halfWidth - ( _width / 2 ), ( _height * 2 ), _width, _height );
  68. if ( scope.reflectFromAbove ) {
  69. renderer.render( scene, _cameraB );
  70. } else {
  71. renderer.render( scene, _cameraF );
  72. }
  73. renderer.setScissor( _halfWidth - ( _width / 2 ), 0, _width, _height );
  74. renderer.setViewport( _halfWidth - ( _width / 2 ), 0, _width, _height );
  75. if ( scope.reflectFromAbove ) {
  76. renderer.render( scene, _cameraF );
  77. } else {
  78. renderer.render( scene, _cameraB );
  79. }
  80. renderer.setScissor( _halfWidth - ( _width / 2 ) - _width, _height, _width, _height );
  81. renderer.setViewport( _halfWidth - ( _width / 2 ) - _width, _height, _width, _height );
  82. if ( scope.reflectFromAbove ) {
  83. renderer.render( scene, _cameraR );
  84. } else {
  85. renderer.render( scene, _cameraL );
  86. }
  87. renderer.setScissor( _halfWidth + ( _width / 2 ), _height, _width, _height );
  88. renderer.setViewport( _halfWidth + ( _width / 2 ), _height, _width, _height );
  89. if ( scope.reflectFromAbove ) {
  90. renderer.render( scene, _cameraL );
  91. } else {
  92. renderer.render( scene, _cameraR );
  93. }
  94. renderer.setScissorTest( false );
  95. };
  96. };
  97. export { PeppersGhostEffect };