/ObjCanvas.js

Load *.obj file or depth map array and draw them as 3D object on Canvas. Drawn canvas image can be downloaded as file.

Primary LanguageJavaScriptMIT LicenseMIT

ObjCanvas

Load and draw *.obj file on Canvas, and download as image.

How to Use

Import

You can import ObjCanvas.js by the ways below:

  • Import by script tag in your HTML.
  • Import into your app scripts by build tools(e.g. webpack).

Implementation

1.Locate div area used as Canvas in your HTML

2.Relate div area to ObjCanvas.js object by calling its constructor

3.Load *.obj file and draw it on canvas by calling ObjCanvas#loadObjFile

4.Save scenes drawn on canvas as image by calling ObjCanvas#save or ObjCanvas#autoSave

Options

ObjCanvas.js has options below:

  • Object can be drawn as Depth Map
  • Threshold angle drawn as contour

Please see JsDoc for more details.

Sample Application

This project contains sample application SampleApp for reference.
SampleApp needs to be run on web server(e.g. Apache or nginx).

Requirements

ObjCanvas requires libraries below:

  • Three.js
  • OBJLoader(Contained in examples for Three.js)
  • OrbitControls(Contained in examples for Three.js)
  • Canvas-toBlob.js
  • FileSaver.js

SampleApp requires:

  • Libraries mentioned above