Skip to content

amitdiamant/magnify-3d

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

version

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

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

License

MIT