Hey guys! I’ve recently been doing some interesting things with three.js and I stumbled upon a library called PeppersGhostEffect.js which serves as a way to create a Pepper Ghost Hologram effect based on any object. So I have an object here(just a random one that I designed in blender) and I used that PepperGhostEffect.js library on that object. The object was renderer 4 times on the screen as expected. On the top, the bottom, the left and the right side of the screen respectively. What I’ve come to realise is that if the object is slightly bigger and you want to apply some kind of rotation on it, the effect breaks. Essentially, that PepperGhostEffect.js library just creates 4 scissor regions and within these 4 regions, is renderer the object. And frankly, those 4 regions that it creates are quite small and so whenever I rotate my object, the object just gets cut somewhere in its rotation. I’ve been trying to modify the scissor regions within the PepperGhostEffect.js file itself, but I haven’t been successful. When the object rotates, it always gets cut. Here’s my current code below. I also attached a video to showcase what I mean.
import * as THREE from ‘three’;
import { PeppersGhostEffect } from ‘three/examples/jsm/effects/PeppersGhostEffect.js’;
import { GLTFLoader } from ‘three/examples/jsm/loaders/GLTFLoader.js’;
let scene, earth, container, effect,mesh;
scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
const renderer = new THREE.WebGLRenderer({antialias: true});
scene.background = new THREE.Color( 0x00ff0f );
renderer.setSize(window.innerWidth, window.innerHeight);
effect = new PeppersGhostEffect(renderer);
effect.setSize(window.innerWidth, window.innerHeight);
effect.cameraDistance = 47.5
container = document.createElement( ‘div’ );
document.body.appendChild( container );
container.appendChild( renderer.domElement );
const ambient = new THREE.AmbientLight(0x404040,3);
//scene.add(ambient);
// load model
let loader = new GLTFLoader();
loader.load(“./testing.gltf”, function(gltf) {
var scale = 4;
scene.add(gltf.scene);
console.log(gltf);
earth = gltf.scene.children[0];
earth.scale.set (scale,scale,scale);
});
function animate() {
requestAnimationFrame(animate);
earth.rotation.y += 0.01
effect.render(scene,camera);
}
animate();
If anyone knows how to make those scissor regions bigger, I’d really appreciate a hand. Many thanks!