https://developer.mozilla.

org/en-US/docs/Web/CSS/transform-function/translate3d

https://github.com/amitdiamant/magnify-3d

https://github.com/amitdiamant/magnify-3d/blob/master/sample/index.js#L165

impo
rt *
as
THRE
E
from
'thr
ee';
import * as dat from 'dat.gui';
import Magnify3d from '../src/Magnify3d';
import { TeapotBufferGeometry } from './TeapotGeometry';

// FPS monitor
javascript:(function(){var
script=document.createElement('script');script.onload=function(){var stats=new
Stats();document.body.appendChild(stats.dom);requestAnimationFrame(function loop()
{stats.update();requestAnimationFrame(loop)});};script.src='//mrdoob.github.io/
stats.js/build/stats.min.js';document.head.appendChild(script);})()

let camera, scene, renderer, defaultTarget, boxMesh1, boxMesh2;

let magnify3d, params, gui;
let shiftDown, ctrlDown;

const MIN_ZOOM = 1;
const MAX_ZOOM = 15;
const MIN_EXP = 1;
const MAX_EXP = 100;
const MIN_RADIUS = 10;
const MAX_RADIUS = 500;
const MIN_OUTLINE_THICKNESS = 0;
const MAX_OUTLINE_THICKNESS = 50;

function initScene() {
scene = new THREE.Scene();

const texture = new THREE.TextureLoader().load( 'res/checkerboard.png');

const checkerMaterial = new THREE.MeshBasicMaterial( { map: texture } );

const normalMaterial = new THREE.MeshNormalMaterial();

const boxGeometry = new THREE.BoxGeometry(20, 20, 20);

boxMesh1 = new THREE.Mesh(boxGeometry, checkerMaterial);
boxMesh1.position.x = 50;
scene.add(boxMesh1);

boxMesh2 = new THREE.Mesh(boxGeometry, checkerMaterial);

boxMesh2.position.x = -50;
scene.add(boxMesh2);

const boxMesh3 = new THREE.Mesh(boxGeometry, normalMaterial);

boxMesh3.position.x = 100;
scene.add(boxMesh3);

const boxMesh4 = new THREE.Mesh(boxGeometry, normalMaterial);

boxMesh4.position.x = -100;
scene.add(boxMesh4);

const sphereGeometry = new THREE.SphereGeometry(10, 64, 64);

const sphereMesh = new THREE.Mesh(sphereGeometry, normalMaterial);

scene.add(sphereMesh);
 const teapotGeometry = new TeapotBufferGeometry(10, 32);
const teapotMesh1 = new THREE.Mesh(teapotGeometry, normalMaterial);
teapotMesh1.position.y = 50;
scene.add(teapotMesh1);

const teapotMesh2 = new THREE.Mesh(teapotGeometry, normalMaterial);

teapotMesh2.position.y = -50;
scene.add(teapotMesh2);
}

function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight,
0.01, 1000);
camera.position.set(0.0, 40.0, 250.0);
camera.lookAt(0.0, 0.0, 0.0);
}

function initRenderer() {
const pixelRatio = window.devicePixelRatio;

renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });

renderer.setPixelRatio( pixelRatio );
renderer.setSize(window.innerWidth, window.innerHeight);

const container = document.createElement('div');

container.appendChild(renderer.domElement);
document.body.appendChild(container);

defaultTarget = new THREE.WebGLRenderTarget(window.innerWidth * pixelRatio,

window.innerHeight * pixelRatio);
}

function initEventListeners() {
 document.addEventListener('mousemove', (e) => {
params.mouse = new THREE.Vector2(e.clientX, window.innerHeight - e.clientY);
});

document.addEventListener('touchmove', (e) => {

params.mouse = new THREE.Vector2(e.pageX, window.innerHeight - e.pageY);
e.preventDefault();
e.stopPropagation();
});

window.addEventListener('resize', (e) => {

renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.clientWidth = window.innerWidth;
camera.clientHeight = window.innerHeight;
camera.updateProjectionMatrix();
});

function onMouseWheel(e) {
e.preventDefault();
const delta = (e.wheelDelta && e.wheelDelta / 40) || -e.detail;

if (shiftDown) {
params.zoom = Math.min(Math.max(MIN_ZOOM, params.zoom + (delta / 10)),
MAX_ZOOM);
} else if (ctrlDown) {
params.exp = Math.min(Math.max(MIN_EXP, params.exp + delta), MAX_EXP);
} else {
params.radius = Math.min(Math.max(MIN_RADIUS, params.radius + delta),
MAX_RADIUS);
}

gui.updateDisplay();
}

window.addEventListener( 'mousewheel', onMouseWheel );

window.addEventListener( 'DOMMouseScroll', onMouseWheel ); // firefox
 document.addEventListener('keydown', (e) => {
const key = e.keyCode;
switch (key) {
case 16:
shiftDown = true;
break;
case 17:
ctrlDown = true;
break;
default:
break;
}
});

document.addEventListener('keyup', (e) => {

const key = e.keyCode;
switch (key) {
case 16:
shiftDown = false;
break;
case 17:
ctrlDown = false;
break;
default:
break;
}
});
}

function initGUI() {
params = {
zoom: 2.0,
exp: 30.0,
radius: 110.0,
outlineThickness: 4.0,
outlineColor: 0x555555
}
 gui = new dat.GUI();
gui.add(params, 'radius', MIN_RADIUS, MAX_RADIUS);
gui.add(params, 'zoom', MIN_ZOOM, MAX_ZOOM);
gui.add(params, 'exp', MIN_EXP, MAX_EXP);
gui.add(params, 'outlineThickness', MIN_OUTLINE_THICKNESS,
MAX_OUTLINE_THICKNESS);
gui.addColor(params, 'outlineColor');
}

function init() {
initScene();
initCamera();
initRenderer();
initEventListeners();
initGUI();

magnify3d = new Magnify3d();

}

function renderSceneToTarget(tgt) {
renderer.render(scene, camera, tgt);
}

function render() {
renderSceneToTarget(defaultTarget); // Render original scene to target / screen
(depends on defaultTarget).

magnify3d.render({
renderer,
renderSceneCB: renderSceneToTarget,
pos: params.mouse,
zoom: params.zoom,
exp: params.exp,
radius: params.radius,
outlineThickness: params.outlineThickness,
outlineColor: params.outlineColor,
antialias: true,
inputBuffer: defaultTarget,
outputBuffer: undefined
 });
}

function animate() {
requestAnimationFrame(animate);

boxMesh1.rotation.y += 0.01;
boxMesh2.rotation.y -= 0.01;

render();
}

init();
animate();