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:

Returns: FSpyCamerLoader

Main Properties

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:

Returns: void

loadAsync

▸ loadAsync(url: string, onProgress?: undefined | function): Promise‹any›

Defined in node_modules/three/src/loaders/Loader.d.ts:20

Parameters:

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:

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:

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