Addons: Remove `PeppersGhostEffect`. (#31037)

examples/files.json

@@ -19,7 +19,6 @@
 		"webgl_effects_anaglyph",
 		"webgl_effects_ascii",
 		"webgl_effects_parallaxbarrier",
-		"webgl_effects_peppersghost",
 		"webgl_effects_stereo",
 		"webgl_framebuffer_texture",
 		"webgl_geometries",

examples/jsm/Addons.js

@@ -28,7 +28,6 @@ export * from './effects/AnaglyphEffect.js';
 export * from './effects/AsciiEffect.js';
 export * from './effects/OutlineEffect.js';
 export * from './effects/ParallaxBarrierEffect.js';
-export * from './effects/PeppersGhostEffect.js';
 export * from './effects/StereoEffect.js';
 
 export * from './environments/DebugEnvironment.js';

examples/jsm/effects/PeppersGhostEffect.js

@@ -1,174 +0,0 @@
-import {
-	PerspectiveCamera,
-	Quaternion,
-	Vector3
-} from 'three';
-
-/**
- * A class that implements a peppers ghost effect.
- *
- * Reference: [Reflective Prism]{@link http://www.instructables.com/id/Reflective-Prism/?ALLSTEPS}
- *
- * @three_import import { PeppersGhostEffect } from 'three/addons/effects/PeppersGhostEffect.js';
- */
-class PeppersGhostEffect {
-
-	/**
-	 * Constructs a new peppers ghost effect.
-	 *
-	 * @param {(WebGPURenderer|WebGLRenderer)} renderer - The renderer.
-	 */
-	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;
-
-		/**
-		 * Resizes the effect.
-		 *
-		 * @param {number} width - The width of the effect in logical pixels.
-		 * @param {number} height - The height of the effect in logical pixels.
-		 */
-		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 );
-
-		};
-
-		/**
-		 * When using this effect, this method should be called instead of the
-		 * default {@link WebGLRenderer#render}.
-		 *
-		 * @param {Object3D} scene - The scene to render.
-		 * @param {Camera} camera - The camera.
-		 */
-		this.render = function ( scene, camera ) {
-
-			if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
-
-			if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) 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 };

examples/webgl_effects_peppersghost.html

@@ -1,126 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<title>three.js webgl - effects - peppers ghost</title>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<link type="text/css" rel="stylesheet" href="main.css">
-	</head>
-	<body>
-
-		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - <a href="https://en.wikipedia.org/wiki/Pepper%27s_ghost">peppers ghost effect</a> demo <br />
-			<a href="http://www.instructables.com/id/Reflective-Prism/?ALLSTEPS" target="_blank" rel="noopener">how to build the reflective prism</a>
-		</div>
-
-		<script type="importmap">
-			{
-				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/"
-				}
-			}
-		</script>
-
-		<script type="module">
-
-			import * as THREE from 'three';
-
-			import { PeppersGhostEffect } from 'three/addons/effects/PeppersGhostEffect.js';
-
-			let container;
-
-			let camera, scene, renderer, effect;
-			let group;
-
-			init();
-
-			function init() {
-
-				container = document.createElement( 'div' );
-				document.body.appendChild( container );
-
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
-
-				scene = new THREE.Scene();
-
-				group = new THREE.Group();
-				scene.add( group );
-
-				// Cube
-
-				const geometry = new THREE.BoxGeometry().toNonIndexed(); // ensure unique vertices for each triangle
-
-				const position = geometry.attributes.position;
-				const colors = [];
-				const color = new THREE.Color();
-
-				// generate for each side of the cube a different color
-
-				for ( let i = 0; i < position.count; i += 6 ) {
-
-					color.setHex( Math.random() * 0xffffff );
-
-					// first face
-
-					colors.push( color.r, color.g, color.b );
-					colors.push( color.r, color.g, color.b );
-					colors.push( color.r, color.g, color.b );
-
-					// second face
-
-					colors.push( color.r, color.g, color.b );
-					colors.push( color.r, color.g, color.b );
-					colors.push( color.r, color.g, color.b );
-
-				}
-
-				geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
-
-				const material = new THREE.MeshBasicMaterial( { vertexColors: true } );
-
-				for ( let i = 0; i < 10; i ++ ) {
-
-					const cube = new THREE.Mesh( geometry, material );
-					cube.position.x = Math.random() * 2 - 1;
-					cube.position.y = Math.random() * 2 - 1;
-					cube.position.z = Math.random() * 2 - 1;
-					cube.scale.multiplyScalar( Math.random() + 0.5 );
-					group.add( cube );
-
-				}
-
-				renderer = new THREE.WebGLRenderer();
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setAnimationLoop( animate );
-				container.appendChild( renderer.domElement );
-
-				effect = new PeppersGhostEffect( renderer );
-				effect.setSize( window.innerWidth, window.innerHeight );
-				effect.cameraDistance = 5;
-
-				window.addEventListener( 'resize', onWindowResize );
-
-			}
-
-			function onWindowResize() {
-
-				camera.aspect = window.innerWidth / window.innerHeight;
-				camera.updateProjectionMatrix();
-
-				effect.setSize( window.innerWidth, window.innerHeight );
-
-			}
-
-			function animate() {
-
-				group.rotation.y += 0.01;
-
-				effect.render( scene, camera );
-
-			}
-
-		</script>
-
-	</body>
-</html>