Screen is a Spark AR script utility for the following purpose:
- Convert coordinate World Position, Canvas Position, Face Position to Focal Plane Position.
- Positioning 3D object (e.g. ) by percent
[0-1]
. - Scale 3D object to fit different screen size.
You can download script and import it into your Spark AR project, or use this with npm.
-
Drag/Import it into your project. (Spark AR support TypeScript since v105)
-
Import
Screen
module at the top of your script.import * as Screen from './Screen';
-
You can also Click Here to Download Sample Project (v115.1).
const FaceTracking = require('FaceTracking');
const Screen = require('./Screen');
const face = FaceTracking.face(0);
const feature = face.cameraTransform.applyToPoint(face.leftEye.center);
(async function () {
const position = await Screen.cameraTransformToFocalDistance(feature);
const focalPlanePosition = await Screen.cameraTransformToFocalPlane(feature);
const canvasPosition = await Screen.cameraTransformToCanvas(feature);
})();
const Scene = require('Scene');
const Screen = require('./Screen');
(async function () {
const positioning = await Scene.root.findFirst('positioning');
positioning.transform.x = await Screen.percentToFocalPlaneX(.1);
positioning.transform.y = await Screen.percentToFocalPlaneY(.2);
})();
It's recommanded to use this with percentage positioning.
const Scene = require('Scene');
const Screen = require('./Screen');
(async function () {
const scaler = Screen.createScaler(9, 16);
const scaleTarget = await Scene.root.findFirst('scaleTarget');
scaler.autoScaleObject(scaleTarget);
})();
Canvas Position | Focal Plane Position | Percentage Position | |
---|---|---|---|
Canvas Position to | – | ✔ | ✔ |
Focal Plane Position to | ✔ | – | ✔ |
Percent Position to | ✔ | ✔ | – |
Face Position to | ✔ | ✔ | ✔ |
World Position to | ✔ | ✔ | ✔ |
If this is useful for you, please consider a donation🙏🏼. One-time donations can be made with PayPal.