Skip to content

Commit 2506f24

Browse files
kalwaltkalwalt
committed
new dev example
1 parent 9457140 commit 2506f24

File tree

7 files changed

+268
-2
lines changed

7 files changed

+268
-2
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,4 +25,4 @@ The module export two namespaces as in the old implementation: **THREEx** and **
2525
- [x] Utils
2626

2727
## Examples
28-
For now, you can find one **example** in vanilla JS and another one in Typescript in the **example-ts** folder. More examples will be added in a near future.
28+
For now, you can find two vanilla JS examples in the **examples** folder and another one in Typescript in the **example-ts** folder. More examples will be added in a near future.

‎example/basic.html renamed to ‎examples/basic.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
<body style='font-family: Monospace;'>
1010
<div style='position: absolute; top: 10px; width:100%; text-align: center; z-index: 1;'>
11-
<a href="https://github.com/AR-js-org/AR.js/" target="_blank">AR.js</a> - three.js camera transform
11+
<a href="https://github.com/AR-js-org/AR.js-threejs/" target="_blank">AR.js</a> - three.js camera transform
1212
<br />
1313
Contact me any time at <a href='https://twitter.com/nicolocarp' target='_blank'>@nicolocarp</a>
1414
</div>

‎example/data/camera_para.dat renamed to ‎examples/data/camera_para.dat

File renamed without changes.

‎example/data/patt.hiro renamed to ‎examples/data/patt.hiro

File renamed without changes.

‎examples/dev.html

Lines changed: 261 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,261 @@
1+
<!DOCTYPE html>
2+
<meta name='viewport' content='width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'>
3+
<!-- three.js and stats.js library -->
4+
<script src='js/three.min.js'></script>
5+
<script src='js/stats.min.js'></script>
6+
<!-- include threex.artoolkit -->
7+
<script src="../dist/ar.js"></script>
8+
<!--<script>THREEx.ArToolkitContext.baseURL = '../'</script>-->
9+
10+
<body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
11+
<div style='position: absolute; top: 10px; width:100%; text-align: center;z-index:1' ;>
12+
<a href='https://github.com/AR-js-org/AR.js-threejs/' target='_blank'>AR.js</a> - developement playground
13+
<br />
14+
Contact me any time at <a href='https://twitter.com/nicolocarp' target='_blank'>@nicolocarp</a>
15+
</div>
16+
<script>
17+
//////////////////////////////////////////////////////////////////////////////////
18+
// Init
19+
//////////////////////////////////////////////////////////////////////////////////
20+
21+
// init renderer
22+
var renderer = new THREE.WebGLRenderer({
23+
// antialias : true,
24+
alpha: true
25+
});
26+
renderer.setClearColor(new THREE.Color('lightgrey'), 0)
27+
// renderer.setPixelRatio( 2 );
28+
renderer.setSize(window.innerWidth, window.innerHeight);
29+
renderer.domElement.style.position = 'absolute'
30+
renderer.domElement.style.top = '0px'
31+
renderer.domElement.style.left = '0px'
32+
document.body.appendChild(renderer.domElement);
33+
34+
// array of functions for the rendering loop
35+
var onRenderFcts = [];
36+
var arToolkitContext, arMarkerControls, markerRoot;
37+
38+
// init scene and camera
39+
var scene = new THREE.Scene();
40+
41+
var ambient = new THREE.AmbientLight(0x666666);
42+
scene.add(ambient);
43+
44+
var directionalLight = new THREE.DirectionalLight(0x887766);
45+
directionalLight.position.set(-1, 1, 1).normalize();
46+
scene.add(directionalLight);
47+
48+
//////////////////////////////////////////////////////////////////////////////////
49+
// Initialize a basic camera
50+
//////////////////////////////////////////////////////////////////////////////////
51+
52+
// Create a camera
53+
var camera = new THREE.Camera();
54+
scene.add(camera);
55+
56+
markerRoot = new THREE.Group
57+
scene.add(markerRoot)
58+
59+
////////////////////////////////////////////////////////////////////////////////
60+
// handle arToolkitSource
61+
////////////////////////////////////////////////////////////////////////////////
62+
63+
var arToolkitSource = new THREEx.ArToolkitSource({
64+
// to read from the webcam
65+
sourceType: 'webcam',
66+
67+
// // to read from an image
68+
// sourceType : 'image',
69+
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg',
70+
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/armchair.jpg',
71+
72+
// to read from a video
73+
// sourceType : 'video',
74+
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/videos/headtracking.mp4',
75+
})
76+
77+
arToolkitSource.init(() => {
78+
arToolkitSource.domElement.addEventListener('canplay', () => {
79+
console.log(
80+
'canplay',
81+
'actual source dimensions',
82+
arToolkitSource.domElement.videoWidth,
83+
arToolkitSource.domElement.videoHeight
84+
);
85+
86+
initARContext();
87+
});
88+
89+
window.arToolkitSource = arToolkitSource;
90+
onResize();
91+
});
92+
93+
// handle resize
94+
window.addEventListener('resize', function () {
95+
onResize()
96+
})
97+
function onResize() {
98+
arToolkitSource.onResizeElement()
99+
arToolkitSource.copyElementSizeTo(renderer.domElement)
100+
if (window.arToolkitContext.arController !== null) {
101+
arToolkitSource.copyElementSizeTo(window.arToolkitContext.arController.canvas)
102+
}
103+
}
104+
105+
////////////////////////////////////////////////////////////////////////////////
106+
// initialize arToolkitContext
107+
////////////////////////////////////////////////////////////////////////////////
108+
109+
// create atToolkitContext
110+
function initARContext() {
111+
console.log('initARContext()');
112+
113+
// CONTEXT
114+
arToolkitContext = new THREEx.ArToolkitContext({
115+
cameraParametersUrl: THREEx.ArToolkitContext.baseURL + '../data/data/camera_para.dat',
116+
// debug: true,
117+
// detectionMode: 'mono_and_matrix',
118+
detectionMode: 'mono',
119+
// detectionMode: 'color_and_matrix',
120+
// matrixCodeType: '3x3',
121+
122+
canvasWidth: 80 * 3,
123+
canvasHeight: 60 * 3,
124+
125+
maxDetectionRate: 30,
126+
})
127+
128+
arToolkitContext.init(() => {
129+
camera.projectionMatrix.copy(arToolkitContext.getProjectionMatrix());
130+
131+
arToolkitContext.arController.orientation = getSourceOrientation();
132+
arToolkitContext.arController.options.orientation = getSourceOrientation();
133+
134+
console.log('arToolkitContext', arToolkitContext);
135+
window.arToolkitContext = arToolkitContext;
136+
});
137+
138+
139+
140+
// MARKER
141+
arMarkerControls = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
142+
type: 'pattern',
143+
patternUrl: THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro',
144+
})
145+
146+
console.log('ArMarkerControls', arMarkerControls);
147+
window.arMarkerControls = arMarkerControls;
148+
}
149+
150+
function getSourceOrientation() {
151+
if (!arToolkitSource) {
152+
return null;
153+
}
154+
155+
console.log(
156+
'actual source dimensions',
157+
arToolkitSource.domElement.videoWidth,
158+
arToolkitSource.domElement.videoHeight
159+
);
160+
161+
if (arToolkitSource.domElement.videoWidth > arToolkitSource.domElement.videoHeight) {
162+
console.log('source orientation', 'landscape');
163+
return 'landscape';
164+
} else {
165+
console.log('source orientation', 'portrait');
166+
return 'portrait';
167+
}
168+
}
169+
170+
// update artoolkit on every frame
171+
onRenderFcts.push(function () {
172+
if (!arToolkitContext || !arToolkitSource || !arToolkitSource.ready) {
173+
return;
174+
}
175+
176+
arToolkitContext.update(arToolkitSource.domElement)
177+
})
178+
179+
180+
// build a smoothedControls
181+
var smoothedRoot = new THREE.Group()
182+
scene.add(smoothedRoot)
183+
var smoothedControls = new THREEx.ArSmoothedControls(smoothedRoot, {
184+
lerpPosition: 0.4,
185+
lerpQuaternion: 0.3,
186+
lerpScale: 1,
187+
// minVisibleDelay: 1,
188+
// minUnvisibleDelay: 1,
189+
})
190+
onRenderFcts.push(function (delta) {
191+
smoothedControls.update(markerRoot)
192+
})
193+
194+
// smoothedControls.addEventListener('becameVisible', function(){
195+
// console.log('becameVisible event notified')
196+
// })
197+
// smoothedControls.addEventListener('becameUnVisible', function(){
198+
// console.log('becameUnVisible event notified')
199+
// })
200+
201+
//////////////////////////////////////////////////////////////////////////////////
202+
// add an object in the scene
203+
//////////////////////////////////////////////////////////////////////////////////
204+
205+
// var arWorldRoot = markerRoot
206+
var arWorldRoot = smoothedRoot
207+
208+
var mesh = new THREE.AxesHelper()
209+
// markerRoot.add(mesh)
210+
arWorldRoot.add(mesh)
211+
212+
// add a torus knot
213+
var geometry = new THREE.BoxGeometry(1, 1, 1);
214+
var material = new THREE.MeshNormalMaterial({
215+
transparent: true,
216+
opacity: 0.5,
217+
side: THREE.DoubleSide
218+
})
219+
var mesh = new THREE.Mesh(geometry, material);
220+
mesh.position.y = geometry.parameters.height / 2
221+
// markerRoot.add( mesh );
222+
arWorldRoot.add(mesh)
223+
224+
var geometry = new THREE.TorusKnotGeometry(0.3, 0.1, 64, 16);
225+
var material = new THREE.MeshNormalMaterial();
226+
var mesh = new THREE.Mesh(geometry, material);
227+
mesh.position.y = 0.5
228+
// markerRoot.add( mesh );
229+
arWorldRoot.add(mesh);
230+
231+
onRenderFcts.push(function (delta) {
232+
mesh.rotation.x += delta * Math.PI
233+
})
234+
235+
//////////////////////////////////////////////////////////////////////////////////
236+
// render the whole thing on the page
237+
//////////////////////////////////////////////////////////////////////////////////
238+
var stats = new Stats();
239+
document.body.appendChild(stats.dom);
240+
// render the scene
241+
onRenderFcts.push(function () {
242+
renderer.render(scene, camera);
243+
stats.update();
244+
})
245+
246+
// run the rendering loop
247+
var lastTimeMsec = null
248+
requestAnimationFrame(function animate(nowMsec) {
249+
// keep looping
250+
requestAnimationFrame(animate);
251+
// measure time
252+
lastTimeMsec = lastTimeMsec || nowMsec - 1000 / 60
253+
var deltaMsec = Math.min(200, nowMsec - lastTimeMsec)
254+
lastTimeMsec = nowMsec
255+
// call each update function
256+
onRenderFcts.forEach(function (onRenderFct) {
257+
onRenderFct(deltaMsec / 1000, nowMsec / 1000)
258+
})
259+
})
260+
</script>
261+
</body>

‎examples/js/stats.min.js

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/js/three.min.js renamed to ‎examples/js/three.min.js

File renamed without changes.

0 commit comments

Comments
 (0)