import { Mesh, BoxGeometry, MeshLambertMaterial } from 'three';
import { ARViewer, ARGlue } from 'tofu.js';

const width = window.innerWidth;
const height = window.innerHeight;
const arViewer = new ARViewer({
  canvas: '#webar', // `required` pass a `canvas-dom` or `css-selector`
  width,
  height,
});

// new a `AR-Glue`, it was glue container, can paste some 3d-model to video stream
const arGlue = new ARGlue({
  name: 'glue-name',
});
// add a glue to scene
arViewer.add(arGlue);

// assume `demoModel` was a 3d-model to tracker video stream
const demoModel = new Mesh(
  new BoxGeometry(1, 1, 1),
  new MeshLambertMaterial({ color: 0xffffff })
));
// add a 3d-model to `AR-Glue`
arGlue.add(demoModel);

// set camera matrix, on get camera internal parameters
arViewer.updateCameraMatrix(matrix);

// set markers poses, on detector markers' poses
arViewer.updatePoses(poses);

// start render
arViewer.start();

import { Mesh, BoxGeometry, MeshLambertMaterial } from 'three';
import { XRViewer } from 'tofu.js';
const xrViewer = new XRViewer({
  canvas: '#webgl',
  fov: 75,
  width: WIDTH,
  height: HEIGHT,
  near: 0.01,
  far: 3000,
  vrmode: true, // turn on vr-mode ?
  vrsensor: true, // turn on vr-sensor ?
  aeEnable: true, // turn on after effect ?
});

// create a cube
const cube = new Mesh(
  new BoxGeometry(1, 1, 1),
  new MeshLambertMaterial({ color: 0xffffff })
);

xrViewer.add(cube);

// start render
xrViewer.start();

const timeline = cube.animate({
  from: { 'position.x': 0 }, // optional, play an animation start with this pose
  to: { 'position.x': 0 }, // play an animation to this pose
  duration: 1000, // animation duration
  repeat: 1, // do you need repeat once?
  infinite: true, // you want infinite repeat this animation?
  alternate: true, // you want repeat with alternate, just like yoyo?
  ease: Tween.Bounce.Out, // you want to use which timing function?
});
timeline.on('update', () => {}); // call on each update
timeline.on('complete', () => {}); // call on complete animation

timeline.pause(); // pause animation progress
timeline.restart(); // restart animation progress, use with pause
timeline.stop(); // stop animation to end, will trigger onComplete callback
timeline.cancle(); // cancle animation right now, will not trigger onComplete callback
timeline.timeScale = 0.5; // set timeScale, get a Slow motion，just like speed * 0.5

const timeline = cube.motion({
  path: curve, // should instance of Curve
  lengthMode: false, // whether move with length-mode or not
  attachTangent: false, // whether display-object should attach tangent or not
  duration: 1, // animation duration
  repeat: 1, // do you need repeat once?
  infinite: true, // you want infinite repeat this animation?
  alternate: true, // you want repeat with alternate, just like yoyo?
  ease: Tween.Bounce.Out, // you want to use which timing function?
});
// timeline same with before

const timeline = cube.runners({
  runners: [], // combine animation, support `animate`、`motion`
  repeat: 1, // do you need repeat once?
  infinite: true, // you want infinite repeat this animation?
  ease: Tween.Bounce.Out, // you want to use which timing function?
});
// timeline same with before

// bind interaction-event for cube, like click、touchstart and so on
cube.on('click', function(ev) {});
cube.on('touchstart', function(ev) {});
cube.on('mousedown', function(ev) {});
// and so on ...

import { BloomPass, FilmPass, FocusShader } from 'tofu.postprogressing.js';
import { XRViewer, RenderPass, ShaderPass } from 'tofu.js';
const xrViewer = new XRViewer({
  canvas: '#webgl',
  fov: 75,
  width: WIDTH,
  height: HEIGHT,
  near: 0.01,
  far: 3000,
  aeEnable: true, // turn on after effect ?
});

const renderModel = new RenderPass();
const effectBloom = new BloomPass(1.05);
const effectFilm = new FilmPass(0.15, 0.15, 1500, false);
const effectFocus = new ShaderPass(FocusShader);
effectFocus.uniforms["screenWidth"].value = WIDTH;
effectFocus.uniforms["screenHeight"].value = HEIGHT;
effectFocus.renderToScreen = true;

xrViewer.composer.addPass(renderModel);
xrViewer.composer.addPass(effectBloom);
xrViewer.composer.addPass(effectFilm);
xrViewer.composer.addPass(effectFocus);

xrViewer.start();