-
Notifications
You must be signed in to change notification settings - Fork 13
/
script.js
121 lines (93 loc) · 2.9 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import './style.css'
const sizes = {
width: window.innerWidth,
height: window.innerHeight
}
const canvas = document.querySelector('.webgl')
const scene = new THREE.Scene();
const axesHelper = new THREE.AxesHelper(0.2);
scene.add( axesHelper );
const camera = new THREE.PerspectiveCamera(75, sizes.width * 2 / sizes.height, 0.1, 1000);
camera.position.z = 1
scene.add(camera);
const renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: true,
alpha: true
});
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
//AR.JS
// setup arToolkitSource
const arToolkitSource = new THREEx.ArToolkitSource({
sourceType: 'webcam',
//uncomment these to fix camera view on mobile.
sourceWidth: sizes.height,
sourceHeight: sizes.width,
displayWidth: sizes.width,
displayHeight: sizes.height,
});
const onResize = () => {
arToolkitSource.onResize()
arToolkitSource.copySizeTo(canvas)
if (arToolkitContext.arController !== null) {
arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)
}
}
arToolkitSource.init(function onReady() {
onResize()
});
// handle resize event
window.addEventListener('resize', function () {
onResize()
//desktop resize
sizes.width = window.innerWidth
sizes.height = window.innerHeight
camera.aspect = sizes.width / sizes.height
camera.updateProjectionMatrix()
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
});
// setup arToolkitContext
const arToolkitContext = new THREEx.ArToolkitContext({
cameraParametersUrl: 'camera_para.dat', //from https://github.com/jeromeetienne/AR.js/blob/master/data/data/camera_para.dat
detectionMode: 'mono',
});
// copy projection matrix to camera when initialization complete
arToolkitContext.init(function onCompleted() {
camera.projectionMatrix.copy(arToolkitContext.getProjectionMatrix());
});
// setup markerRoots and build markerControls
const markerRoot = new THREE.Group();
scene.add(markerRoot);
let markerControls = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
type: 'pattern',
patternUrl: "pattern-1.patt", //https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html
//make sure bg color is light grey 240 240 240
})
//scene content
const geometry = new THREE.BoxBufferGeometry(2, 2, 2);
const material = new THREE.MeshNormalMaterial({
transparent: true,
opacity: 0.5,
side: THREE.DoubleSide
});
const mesh = new THREE.Mesh(geometry, material);
// mesh.position.y = 0.5;
// mesh.rotation.x = Math.PI / 2
markerRoot.add(mesh);
const update = () => {
// update artoolkit on every frame
if (arToolkitSource.ready !== false) {
arToolkitContext.update(arToolkitSource.domElement)
}
}
const render = () => {
renderer.render(scene, camera);
}
const animate = () => {
requestAnimationFrame(animate);
update();
render();
}
animate()