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.
