<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r122/three.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r122/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/3.3.2/three.js/build/ar.js"></script>
<title>Document</title>
</head>
<body>
<script>
const clock = new THREE.Clock();
let scene, camera, renderer;
let arToolkitSource, arToolkitContext;
let mixer;
init();
function init() {
scene = new THREE.Scene();
camera = new THREE.Camera();
scene.add(camera);
renderer = new THREE.WebGLRenderer({
antialias : true,
alpha: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
arToolkitContext = new THREEx.ArToolkitContext({
cameraParametersUrl: 'data/camera_para.dat',
detectionMode: 'mono'
});
arToolkitContext.init(() => {
camera.projectionMatrix.copy(arToolkitContext.getProjectionMatrix());
});
arToolkitSource = new THREEx.ArToolkitSource({
sourceType : 'webcam',
});
function handleResize() {
arToolkitSource.onResize();
arToolkitSource.copySizeTo(renderer.domElement);
if (arToolkitContext.arController) {
arToolkitSource.copySizeTo(arToolkitContext.arController.canvas);
}
}
arToolkitSource.init(() => {
setTimeout(() => {
tick();
handleResize();
[].slice.call(document.querySelectorAll('.invisible')).forEach((elm) => {
elm.classList.remove('invisible');
});
}, 200);
});
window.addEventListener('resize', handleResize, {
passive: true
});
const markerRoot = new THREE.Group();
scene.add(markerRoot);
const arMarkerControls = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
type: 'pattern',
patternUrl: './pattern-marker (1).patt'
});
const loader = new THREE.GLTFLoader();
const url = './walk.glb';
loader.load(
url,
(gltf) => {
const animations = gltf.animations;
const model = gltf.scene;
if (animations && animations.length) {
mixer = new THREE.AnimationMixer(model);
for (let i = 0; i < animations.length; i++) {
const animation = animations[i];
const action = mixer.clipAction(animation);
action.play();
}
}
model.scale.set(1, 1, 1);
model.position.set(0, 0, 0);
markerRoot.add(gltf.scene);
},
(err) => {
console.error(err);
}
);
}
function update() {
if (arToolkitSource.ready) {
arToolkitContext.update(arToolkitSource.domElement);
}
if (mixer) {
mixer.update(clock.getDelta());
}
}
function render() {
renderer.render(scene, camera);
}
function tick() {
update();
render();
requestAnimationFrame(tick);
}
</script>
</body>
</html>
