ff-3d-preview v1.1.8

What is ff-3d-preview

ff-3d-preview is a package to easily add 3d rendering to a HTML5 canvas with a 3d model with a face with an image.
The package uses Three.JS, has a .gltf loader and orbit-controls implemented.

An example:

How do I use ff-3d-preview?

Install the package using:
npm install ff-3d-preview

Using ff-3d-preview

3D thumbnail render (returns base64) example

 const thumbnail3DRenderer = new FF3DPreview();
 thumbnail3DRenderer.FFGenerate3DThumbnail(canvas, gltfModel);  

3D preview rendering with animation loop example

let frameId = -1;

(async function () {
    const renderFrame = await load3DPreview(canvasRef.current, sheetIndex);
    setLoading(false);
    (function animationLoop() {
        renderFrame();
        frameId = requestAnimationFrame(animationLoop);
    }());
}());

return () => {
    cancelAnimationFrame(frameId);
};

In load3DPreview function:

const thumbnail3DRenderer = new FF3DPreview();
return await thumbnail3DRenderer.FFRender3DPreviewFrame(previewImageCanvas.toDataURL(), gltfModel, previewCanvas);

Prerequisites 3D model

The 3D model has a few prerequisites in order to work with this package.

• .gltf extension.
• There needs to be a face called PreviewMesh in the root of the model where the image will be placed.
• PreviewMesh will be transparent so placing a face below PreviewMesh is advised.
• In order to use reflections (using a cube-map), give the face the name ReflectionMesh.

This package is brought to you by: