Magnify 3d

Real time optic magnifying glass for three.js. Get a high-res zoomed section of your 3d scene, with a single API.

Demo

• Live Demo
• Sample Code

Install

$ npm install magnify-3d --save

Usage

import Magnify3d from 'magnify-3d';

const magnify3d = new Magnify3d();

magnify3d.render({

    renderer: renderer,
    
    pos: { mouse.x, mouse.y },
    
    renderSceneCB: (target) => {
    
        renderer.render(scene, camera, target);
      
    }
    
});

Options

Name	Type	Default	Mandatory	Description
renderer	WebGLRenderer		V	The renderer used to render the original scene.
renderSceneCB	function		V	A callback function used for rendering the original scene on a zoomed target.
pos	{ x, y }		V	Position of the magnifying glass in client coordinates.
zoom	number	2.0		Zoom factor of the magnifying glass.
exp	number	35.0		Exponent used to calculate the glass' shape. Higher exp value means flatter glass shape.
radius	number	100.0		Radius of the magnifying glass in pixels.
outlineColor	hex	0xcccccc		Color of the glass' outline.
outlineThickness	number	8.0		Thickness of the glass' outline in pixels. Can be set to 0.
antialias	Boolean	true		Whether to add an antialiasing pass or not.
inputBuffer	WebGLRenderTarget			Buffer filled with the original scene render. In case inputBuffer is not supplied, the canvas will be the input buffer.
outputBuffer	WebGLRenderTarget			Render target. In case outputBuffer is not supplied, the output will be directly on the screen.

Contribute

If you have a feature request, please add it as an issue or make a pull request.

References

• three.js
• Fast Approximate Anti-Aliasing
• Teapot Geometry

License

MIT