1.0.3 • Published 4 years ago
magnify-3d-new v1.0.3
Magnify 3d
Real time optic magnifying glass for three.js. Get a high-res zoomed section of your 3d scene, with a single API.
FORK FROM https://github.com/amitdiamant/magnify-3d
SUPPORT NEW THREE.js VERSION
Demo
Install
$ npm install magnify-3d-new --save
Usage
import Magnify3d from 'magnify-3d-new';
const magnify3d = new Magnify3d();
magnify3d.render({
renderer: renderer,
pos: { mouse.x, mouse.y },
renderSceneCB: (target) => {
if (target) {
renderer.setRenderTarget(target);
} else {
renderer.setRenderTarget(null);
}
renderer.render(scene, camera);
}
});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.