Name: tofu.js
Owner: Alibaba
Description: The official web framework for WebAR.
Created: 2018-03-05 02:36:22.0
Updated: 2018-05-24 16:29:19.0
Pushed: 2018-05-23 09:29:13.0
Size: 114461
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
The official web framework for UC WebAR.
tofu.js is a helper framework for building AR VR 3D application.
AR: you can use ARViewer (get from tofu.js) to create a ar-view, you can tracking a nft-marker easy.
XR: XR was cover VR and 3D, you can use XRViewer (get from tofu.js) to create a powerful xr-view, XRViewer built-in support vrmode and vrsensor.
interaction: tofu.js base on three.js but surpass it. tofu.js support full interaction manager, it means you can add interaction-event like browser-dom.
timeline: tofu.js has built-in animation timeline, you can let any display-object start a animate, and you can manager it like timeline.
after-effect: so cool, if you use tofu.js you can add after-effect very easy.
rt { Mesh, BoxGeometry, MeshLambertMaterial } from 'three';
rt { ARViewer, ARGlue } from 'tofu.js';
t width = window.innerWidth;
t height = window.innerHeight;
t arViewer = new ARViewer({
nvas: '#webar', // `required` pass a `canvas-dom` or `css-selector`
dth,
ight,
ew a `AR-Glue`, it was glue container, can paste some 3d-model to video stream
t arGlue = new ARGlue({
me: 'glue-name',
dd a glue to scene
ewer.add(arGlue);
ssume `demoModel` was a 3d-model to tracker video stream
t demoModel = new Mesh(
w BoxGeometry(1, 1, 1),
w MeshLambertMaterial({ color: 0xffffff })
dd a 3d-model to `AR-Glue`
ue.add(demoModel);
et camera matrix, on get camera internal parameters
ewer.updateCameraMatrix(matrix);
et markers poses, on detector markers' poses
ewer.updatePoses(poses);
tart render
ewer.start();
rt { Mesh, BoxGeometry, MeshLambertMaterial } from 'three';
rt { XRViewer } from 'tofu.js';
t xrViewer = new XRViewer({
nvas: '#webgl',
v: 75,
dth: WIDTH,
ight: HEIGHT,
ar: 0.01,
r: 3000,
mode: true, // turn on vr-mode ?
sensor: true, // turn on vr-sensor ?
Enable: true, // turn on after effect ?
reate a cube
t cube = new Mesh(
w BoxGeometry(1, 1, 1),
w MeshLambertMaterial({ color: 0xffffff })
ewer.add(cube);
tart render
ewer.start();
tofu.js add an animator patch for three.js, so you can start a animation very easy, this animator built-in support animate motion and runners type animations.
t timeline = cube.animate({
om: { 'position.x': 0 }, // optional, play an animation start with this pose
: { 'position.x': 0 }, // play an animation to this pose
ration: 1000, // animation duration
peat: 1, // do you need repeat once?
finite: true, // you want infinite repeat this animation?
ternate: true, // you want repeat with alternate, just like yoyo?
se: Tween.Bounce.Out, // you want to use which timing function?
line.on('update', () => {}); // call on each update
line.on('complete', () => {}); // call on complete animation
line.pause(); // pause animation progress
line.restart(); // restart animation progress, use with pause
line.stop(); // stop animation to end, will trigger onComplete callback
line.cancle(); // cancle animation right now, will not trigger onComplete callback
line.timeScale = 0.5; // set timeScale, get a Slow motion?just like speed * 0.5
t timeline = cube.motion({
th: curve, // should instance of Curve
ngthMode: false, // whether move with length-mode or not
tachTangent: false, // whether display-object should attach tangent or not
ration: 1, // animation duration
peat: 1, // do you need repeat once?
finite: true, // you want infinite repeat this animation?
ternate: true, // you want repeat with alternate, just like yoyo?
se: Tween.Bounce.Out, // you want to use which timing function?
imeline same with before
t timeline = cube.runners({
nners: [], // combine animation, support `animate`?`motion`
peat: 1, // do you need repeat once?
finite: true, // you want infinite repeat this animation?
se: Tween.Bounce.Out, // you want to use which timing function?
imeline same with before
ind interaction-event for cube, like click?touchstart and so on
.on('click', function(ev) {});
.on('touchstart', function(ev) {});
.on('mousedown', function(ev) {});
nd so on ...
you can also listen on parent-node or any display-tree node,source event will bubble up along with display-tree.you can stop the bubble-up by invoke ev.stopPropagation function.
rt { BloomPass, FilmPass, FocusShader } from 'tofu.postprogressing.js';
rt { XRViewer, RenderPass, ShaderPass } from 'tofu.js';
t xrViewer = new XRViewer({
nvas: '#webgl',
v: 75,
dth: WIDTH,
ight: HEIGHT,
ar: 0.01,
r: 3000,
Enable: true, // turn on after effect ?
t renderModel = new RenderPass();
t effectBloom = new BloomPass(1.05);
t effectFilm = new FilmPass(0.15, 0.15, 1500, false);
t effectFocus = new ShaderPass(FocusShader);
ctFocus.uniforms["screenWidth"].value = WIDTH;
ctFocus.uniforms["screenHeight"].value = HEIGHT;
ctFocus.renderToScreen = true;
ewer.composer.addPass(renderModel);
ewer.composer.addPass(effectBloom);
ewer.composer.addPass(effectFilm);
ewer.composer.addPass(effectFocus);
ewer.start();
run http-server and go to ./docs directory
run http
run http-server and go to ./examples directory
run http