Three-fspy-camera-loader NPM

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›