three-fspy-camera-loader
What is this?
Script for importing fSpy camera data into three.js.
You can create a pseudo AR-like visual representation.
I made a demo on this page.
It takes in the json format camera data output by fSpy and converts it into the PerspetiveCamera of three.js.
three-fspy-camera-loader inherits the Loader object of three.js and can be used in the same way as other loaders.
I'm Japanese so I'm not good at English. So I'm sorry if I used the wrong English.
Installing from npm
$ npm install --save three-fspy-camera-loader
Examples
If it doesn't work, reload.
Other examples are in preparation.
Link Collection
fSpy importer addon for Blender
Getting Started
var loader = ;var camera; loader;
If you want to include a background image, you can use the following example. Of course, other methods are also acceptable.
var camera; var renderer = canvas: document alpha: true;renderer;renderer;renderer; var scene = ;var geometry = 3 3 3;var material = ;var box = geometry material;boxposition;scene; var fSpyCameraLoader = ;fSpyCameraLoader;// If you want to make the behavior behave like CSS background-size: cover, use this function.fSpyCameraLoader; fSpyCameraLoader; window; { ; renderer; boxrotationy += 001;}
Notice
json export
You can export json using fSpy from here.
Axis setting
When using with three.js, it is recommended that the Y-axis be up.
constructor
+ new FSpyCamerLoader(manager?
: LoadingManager): FSpyCamerLoader
Overrides void
Defined in src/FSpyCameraLoader.ts:37
Parameters:
Name | Type |
---|---|
manager? |
LoadingManager |
Returns: FSpyCamerLoader
Main Properties
Name | Type | Description |
---|---|---|
.camera | PerspectiveCamera | PerspectiveCamera of three.js. The final result is stored on this camera. |
.dataManager | FSpyDataManager | Class that manages camera data of fSpy. Mainly used internally. more information |
.targetCanvas | HTMLCanvasElement | null | Canvas that is the target for drawing WebGL. It is mainly used for updating the camera according to the resize. |
.isEnableResizeEvent | boolean | (get) Gets whether the resize event is set. (set) Enable / disable resize event |
Main Methods
load
▸ load(url
: string, onLoad?
: undefined | function, onProgress?
: undefined | function, onError?
: undefined | function): void
Defined in src/FSpyCameraLoader.ts:80
load fSpy's camera data json
Parameters:
Name | Type | Description |
---|---|---|
url |
string | Path to camera data json to be exported by fSpy |
onLoad? |
undefined | function | Function after loading |
onProgress? |
undefined | function | Function being loaded. Probably not needed due to the small data size. |
onError? |
undefined | function | Function when the error occurred TODO: IE |
Returns: void
loadAsync
▸ loadAsync(url
: string, onProgress?
: undefined | function): Promise‹any›
Defined in node_modules/three/src/loaders/Loader.d.ts:20
Parameters:
Name | Type | Description |
---|---|---|
url |
string | Path to camera data json to be exported by fSpy |
onProgress? |
undefined | function | Function being loaded. Probably not needed due to the small data size. |
Returns: Promise‹any›
parse
▸ parse(fSpyJson
: FSpyCameraJson): PerspectiveCamera
Defined in src/FSpyCameraLoader.ts:115
Parses fSpy json data. This function is also called after the load function.
Parameters:
Name | Type | Description |
---|---|---|
fSpyJson |
FSpyCameraJson | json data from fSpy. Please put the parsed one, such as JSON.parse (json) ;. |
Returns: PerspectiveCamera
Camera using fSpy camera data
getComputedData
▸ getComputedData(): FSpyCameraData | null
Defined in src/FSpyCameraLoader.ts:227
Get camera data processed for three.js
Returns: FSpyCameraData | null
json data from fSpy converted to data for three.js
getData
▸ getData(): FSpyCameraJson | null
Defined in src/FSpyCameraLoader.ts:219
Get unprocessed internal camera data
Returns: FSpyCameraJson | null
json data output from fSpy
onResize
▸ onResize(): void
Defined in src/FSpyCameraLoader.ts:195
Change the camera data according to the size of the canvas to render.
Returns: void
setCanvas
▸ setCanvas(canvas
: HTMLCanvasElement): void
Defined in src/FSpyCameraLoader.ts:124
Add the data for the canvas element for the library to know.
Parameters:
Name | Type | Description |
---|---|---|
canvas |
HTMLCanvasElement | Canvas that is the target for drawing WebGL |
Returns: void
removeCanvas
▸ removeCanvas(): void
Defined in src/FSpyCameraLoader.ts:131
Remove the data for the canvas element.
Returns: void
setResizeUpdate
▸ setResizeUpdate(): void
Defined in src/FSpyCameraLoader.ts:138
Enables the ability to change the camera data according to the size of the canvas to render.
Returns: void
removeResizeupdate
▸ removeResizeupdate(): void
Defined in src/FSpyCameraLoader.ts:145
Disables the ability to change camera data to fit the size of the canvas to render.
Returns: void
API documentation
Please see here.
LISENCE
MIT