PeppersGhostEffect.js 3.4 KB

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