three-fspy-camera-loader

demo page

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

codesandbox(TypeScript)

If it doesn't work, reload.

Other examples are in preparation.

Link Collection

fSpy official website

fspy repository

fSpy video

fSpy importer addon for Blender

Getting Started

var loader = new FSpyCameraLoader();
var camera;

loader.load(
  'path/to/fSpyJsonFile',
  // onload
  function ( result ) {
    camera = result;
  },
  // onprogress
  function ( xhr ) {
    console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
  },
  // onerror
  function ( error ) {
    console.log( 'ERROR' );
  }
);

If you want to include a background image, you can use the following example. Of course, other methods are also acceptable.

html,body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}
#myCanvas {
  width: 100%;
  height: 100%;
  background-image: url(path/to/image);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

var camera;

var renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#myCanvas'),
  alpha: true,
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setClearColor(0x000000, 0);
renderer.setSize(window.innerWidth, window.innerHeight);

var scene = new THREE.Scene();
var geometry = new THREE.BoxGeometry(3, 3, 3);
var material = new THREE.MeshNormalMaterial();
var box = new THREE.Mesh(geometry, material);
box.position.set(0, 0, 0);
scene.add(box);

var fSpyCameraLoader = new FSpyCameraLoader();
fSpyCameraLoader.setCanvas(document.querySelector('#myCanvas'));
// If you want to make the behavior behave like CSS background-size: cover, use this function.
fSpyCameraLoader.setResizeUpdate();

fSpyCameraLoader.load('path/to/fSpyJson', function ( result ) {
  camera = result;
  renderLoop();
});

window.addEventListener('resize', function () {
  renderer.setSize(window.innerWidth, window.innerHeight);
});

function renderLoop() {
  requestAnimationFrame(renderLoop);
  renderer.render(scene, camera);
  box.rotation.y += 0.01;
}

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 |

all properties

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

all methods

API documentation

Please see here.

LISENCE

MIT