Dies ist das Repository meines kleinen Portfolios.
Im Hintergrund läuft eine Planetensimulation, geschrieben in JavaScript und Three.js.
Die zu sehenden Texturen stammen von:
https://www.solarsystemscope.com/textures/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
153 lines
3.4 KiB
153 lines
3.4 KiB
import { |
|
PerspectiveCamera, |
|
Quaternion, |
|
Vector3 |
|
} from 'three'; |
|
|
|
/** |
|
* peppers ghost effect based on http://www.instructables.com/id/Reflective-Prism/?ALLSTEPS |
|
*/ |
|
|
|
class PeppersGhostEffect { |
|
|
|
constructor( renderer ) { |
|
|
|
const scope = this; |
|
|
|
scope.cameraDistance = 15; |
|
scope.reflectFromAbove = false; |
|
|
|
// Internals |
|
let _halfWidth, _width, _height; |
|
|
|
const _cameraF = new PerspectiveCamera(); //front |
|
const _cameraB = new PerspectiveCamera(); //back |
|
const _cameraL = new PerspectiveCamera(); //left |
|
const _cameraR = new PerspectiveCamera(); //right |
|
|
|
const _position = new Vector3(); |
|
const _quaternion = new Quaternion(); |
|
const _scale = new Vector3(); |
|
|
|
// Initialization |
|
renderer.autoClear = false; |
|
|
|
this.setSize = function ( width, height ) { |
|
|
|
_halfWidth = width / 2; |
|
if ( width < height ) { |
|
|
|
_width = width / 3; |
|
_height = width / 3; |
|
|
|
} else { |
|
|
|
_width = height / 3; |
|
_height = height / 3; |
|
|
|
} |
|
|
|
renderer.setSize( width, height ); |
|
|
|
}; |
|
|
|
this.render = function ( scene, camera ) { |
|
|
|
scene.updateMatrixWorld(); |
|
|
|
if ( camera.parent === null ) camera.updateMatrixWorld(); |
|
|
|
camera.matrixWorld.decompose( _position, _quaternion, _scale ); |
|
|
|
// front |
|
_cameraF.position.copy( _position ); |
|
_cameraF.quaternion.copy( _quaternion ); |
|
_cameraF.translateZ( scope.cameraDistance ); |
|
_cameraF.lookAt( scene.position ); |
|
|
|
// back |
|
_cameraB.position.copy( _position ); |
|
_cameraB.quaternion.copy( _quaternion ); |
|
_cameraB.translateZ( - ( scope.cameraDistance ) ); |
|
_cameraB.lookAt( scene.position ); |
|
_cameraB.rotation.z += 180 * ( Math.PI / 180 ); |
|
|
|
// left |
|
_cameraL.position.copy( _position ); |
|
_cameraL.quaternion.copy( _quaternion ); |
|
_cameraL.translateX( - ( scope.cameraDistance ) ); |
|
_cameraL.lookAt( scene.position ); |
|
_cameraL.rotation.x += 90 * ( Math.PI / 180 ); |
|
|
|
// right |
|
_cameraR.position.copy( _position ); |
|
_cameraR.quaternion.copy( _quaternion ); |
|
_cameraR.translateX( scope.cameraDistance ); |
|
_cameraR.lookAt( scene.position ); |
|
_cameraR.rotation.x += 90 * ( Math.PI / 180 ); |
|
|
|
|
|
renderer.clear(); |
|
renderer.setScissorTest( true ); |
|
|
|
renderer.setScissor( _halfWidth - ( _width / 2 ), ( _height * 2 ), _width, _height ); |
|
renderer.setViewport( _halfWidth - ( _width / 2 ), ( _height * 2 ), _width, _height ); |
|
|
|
if ( scope.reflectFromAbove ) { |
|
|
|
renderer.render( scene, _cameraB ); |
|
|
|
} else { |
|
|
|
renderer.render( scene, _cameraF ); |
|
|
|
} |
|
|
|
renderer.setScissor( _halfWidth - ( _width / 2 ), 0, _width, _height ); |
|
renderer.setViewport( _halfWidth - ( _width / 2 ), 0, _width, _height ); |
|
|
|
if ( scope.reflectFromAbove ) { |
|
|
|
renderer.render( scene, _cameraF ); |
|
|
|
} else { |
|
|
|
renderer.render( scene, _cameraB ); |
|
|
|
} |
|
|
|
renderer.setScissor( _halfWidth - ( _width / 2 ) - _width, _height, _width, _height ); |
|
renderer.setViewport( _halfWidth - ( _width / 2 ) - _width, _height, _width, _height ); |
|
|
|
if ( scope.reflectFromAbove ) { |
|
|
|
renderer.render( scene, _cameraR ); |
|
|
|
} else { |
|
|
|
renderer.render( scene, _cameraL ); |
|
|
|
} |
|
|
|
renderer.setScissor( _halfWidth + ( _width / 2 ), _height, _width, _height ); |
|
renderer.setViewport( _halfWidth + ( _width / 2 ), _height, _width, _height ); |
|
|
|
if ( scope.reflectFromAbove ) { |
|
|
|
renderer.render( scene, _cameraL ); |
|
|
|
} else { |
|
|
|
renderer.render( scene, _cameraR ); |
|
|
|
} |
|
|
|
renderer.setScissorTest( false ); |
|
|
|
}; |
|
|
|
} |
|
|
|
} |
|
|
|
export { PeppersGhostEffect };
|
|
|