m3

magnify-3d

Real time Javascript optic magnifying glass library.

Showing:

Popularity

Downloads/wk

20

GitHub Stars

25

Maintenance

Last Commit

3yrs ago

Contributors

1

Package

Dependencies

0

Size (min+gzip)

4.5KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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

NameTypeDefaultMandatoryDescription
rendererWebGLRendererVThe renderer used to render the original scene.
renderSceneCBfunctionVA callback function used for rendering the original scene on a zoomed target.
pos{ x, y }VPosition of the magnifying glass in client coordinates.
zoomnumber2.0Zoom factor of the magnifying glass.
expnumber35.0Exponent used to calculate the glass' shape. Higher exp value means flatter glass shape.
radiusnumber100.0Radius of the magnifying glass in pixels.
outlineColorhex0xccccccColor of the glass' outline.
outlineThicknessnumber8.0Thickness of the glass' outline in pixels. Can be set to 0.
antialiasBooleantrueWhether to add an antialiasing pass or not.
inputBufferWebGLRenderTargetBuffer filled with the original scene render. In case inputBuffer is not supplied, the canvas will be the input buffer.
outputBufferWebGLRenderTargetRender 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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial