arcs / arcs.js

Go to a project
Toggle navigation Toggle navigation pinning
Jean-Yves Didier
b0151d21 1 parent 7739d80d

Three.js components now using javascript modules

Expand all
Inline Side-by-side
Showing 20 changed files with 588 additions and 545 deletions
1 module.exports = function (grunt) { 1 module.exports = function (grunt) {
2 "use strict"; 2 "use strict";
3 +
4 + let shim = function(obj) { return `\nexport default ${obj};\n`; };
3 5
4 // Project configuration. 6 // Project configuration.
5 grunt.initConfig({ 7 grunt.initConfig({
...@@ -80,6 +82,37 @@ module.exports = function (grunt) { ...@@ -80,6 +82,37 @@ module.exports = function (grunt) {
80 } 82 }
81 83
82 }, 84 },
85 + file_append: {
86 + default_options: {
87 + files: [
88 + {
89 + append: shim('AR'),
90 + prepend: `import CV from '../cv/index.js';\n`,
91 + input: './deps/aruco/index.js'
92 + },
93 + {
94 + append: shim('CV'),
95 + input: './deps/cv/index.js'
96 + }
97 + ]
98 + }
99 + },
100 + 'string-replace': {
101 + dist: {
102 + files: {
103 + 'deps/objloader/objloader.js': 'deps/objloader/index.js',
104 + 'deps/mtlloader/mtlloader.js': 'deps/mtlloader/index.js',
105 + 'deps/ddsloader/ddsloader.js': 'deps/ddsloader/index.js'
106 + },
107 + options: {
108 + replacements:[{
109 + pattern: '../../../build/three.module.js',
110 + replacement: '../three.js/index.js'
111 + }]
112 + }
113 +
114 + }
115 + },
83 concat: { 116 concat: {
84 dist: { 117 dist: {
85 src: [ 118 src: [
...@@ -122,9 +155,13 @@ module.exports = function (grunt) { ...@@ -122,9 +155,13 @@ module.exports = function (grunt) {
122 grunt.loadNpmTasks('grunt-jslint'); 155 grunt.loadNpmTasks('grunt-jslint');
123 grunt.loadNpmTasks('grunt-terser'); 156 grunt.loadNpmTasks('grunt-terser');
124 grunt.loadNpmTasks('grunt-bower-task'); 157 grunt.loadNpmTasks('grunt-bower-task');
158 + grunt.loadNpmTasks('grunt-file-append');
159 + grunt.loadNpmTasks('grunt-string-replace');
125 160
126 // Default task(s). 161 // Default task(s).
127 grunt.registerTask('default', ['concat','copy','terser']); 162 grunt.registerTask('default', ['concat','copy','terser']);
128 grunt.registerTask('lint', ['jslint']); 163 grunt.registerTask('lint', ['jslint']);
129 grunt.registerTask('doc', ['jsdoc']); 164 grunt.registerTask('doc', ['jsdoc']);
165 + grunt.registerTask('install-deps', ['bower', 'file_append', 'string-replace']);
166 +
130 }; 167 };
......
1 { 1 {
2 "name": "ARCS", 2 "name": "ARCS",
3 - "version": "0.1.0", 3 + "version": "0.2.0",
4 "description": "Augmented Reality Component System in web browser and node environment", 4 "description": "Augmented Reality Component System in web browser and node environment",
5 "main": "build/arcs.js", 5 "main": "build/arcs.js",
6 "keywords": [ 6 "keywords": [
...@@ -11,10 +11,10 @@ ...@@ -11,10 +11,10 @@
11 "license": "GPL", 11 "license": "GPL",
12 "dependencies": { 12 "dependencies": {
13 "tracking.js": "*", 13 "tracking.js": "*",
14 - "three.js": "https://raw.githubusercontent.com/mrdoob/three.js/r68/build/three.min.js", 14 + "three.js": "https://raw.githubusercontent.com/mrdoob/three.js/r116/build/three.module.js",
15 - "objloader" : "https://raw.githubusercontent.com/mrdoob/three.js/r68/examples/js/loaders/OBJLoader.js", 15 + "objloader" : "https://raw.githubusercontent.com/mrdoob/three.js/r116/examples/jsm/loaders/OBJLoader.js",
16 - "mtlloader": "https://raw.githubusercontent.com/mrdoob/three.js/r68/examples/js/loaders/MTLLoader.js", 16 + "mtlloader" : "https://raw.githubusercontent.com/mrdoob/three.js/r116/examples/jsm/loaders/MTLLoader.js",
17 - "objmtlloader": "https://raw.githubusercontent.com/mrdoob/three.js/r68/examples/js/loaders/OBJMTLLoader.js", 17 + "ddsloader" : "https://raw.githubusercontent.com/mrdoob/three.js/r116/examples/jsm/loaders/DDSLoader.js",
18 "aruco": "https://raw.githubusercontent.com/jcmellado/js-aruco/master/src/aruco.js", 18 "aruco": "https://raw.githubusercontent.com/jcmellado/js-aruco/master/src/aruco.js",
19 "cv": "https://raw.githubusercontent.com/jcmellado/js-aruco/master/src/cv.js", 19 "cv": "https://raw.githubusercontent.com/jcmellado/js-aruco/master/src/cv.js",
20 "codemirror" : "*", 20 "codemirror" : "*",
......
This diff is collapsed. Click to expand it.
1 -arcs_module( 1 +
2 - function (ARCS) { 2 +import ARCS from '../build/arcs.js';
3 - var Animator; 3 +
4 +var Animator;
4 5
5 - /** 6 +/**
6 - * @class Animator 7 + * @class Animator
7 - * @classdesc A component that request new frames for animation. 8 + * @classdesc A component that request new frames for animation.
8 - * This component is useful when you want to create animations in the 9 + * This component is useful when you want to create animations in the
9 - * context of a web browser. 10 + * context of a web browser.
10 - */ 11 + */
11 - Animator = ARCS.Component.create( 12 +Animator = ARCS.Component.create(
12 - function() { 13 + function() {
13 - var paused = false; 14 + var paused = false;
14 - var self=this; 15 + var self=this;
15 - 16 +
16 - var tick = function () { 17 + var tick = function () {
17 - if (paused === false) { 18 + if (paused === false) {
18 - requestAnimationFrame(tick); 19 + requestAnimationFrame(tick);
19 - self.emit("onAnimationFrame"); 20 + self.emit("onAnimationFrame");
20 - } 21 + }
21 - } 22 + }
22 - 23 +
23 - /** 24 + /**
24 - * Starts requesting frames for animation. As soon as it is started, 25 + * Starts requesting frames for animation. As soon as it is started,
25 - * the signal <b>onAnimationFrame</b> is periodically triggered. 26 + * the signal <b>onAnimationFrame</b> is periodically triggered.
26 - * @slot 27 + * @slot
27 - * @emits onAnimationFrame 28 + * @emits onAnimationFrame
28 - * @function Animator#start 29 + * @function Animator#start
29 - */ 30 + */
30 - this.start = function () { 31 + this.start = function () {
31 - paused = false; 32 + paused = false;
32 - tick(); 33 + tick();
33 - }; 34 + };
34 - 35 +
35 - /** 36 + /**
36 - * Stops requesting frames for animation. 37 + * Stops requesting frames for animation.
37 - * @slot 38 + * @slot
38 - * @function Animator#stop 39 + * @function Animator#stop
39 - */ 40 + */
40 - this.stop = function () { 41 + this.stop = function () {
41 - paused = true; 42 + paused = true;
42 - }; 43 + };
43 - 44 +
44 - /** 45 + /**
45 - * Signals that an animation frame is ready. 46 + * Signals that an animation frame is ready.
46 - * @signal 47 + * @signal
47 - * @function Animator#onAnimationFrame 48 + * @function Animator#onAnimationFrame
48 - */ 49 + */
49 - }, 50 + },
50 - ['start','stop'], 51 + ['start','stop'],
51 - 'onAnimationFrame' 52 + 'onAnimationFrame'
52 - ); 53 +);
53 54
54 - return {Animator: Animator};
55 - }
56 -);
...\ No newline at end of file ...\ No newline at end of file
55 +export default {Animator: Animator};
......
1 -arcs_module( 1 +import ARCS from '../build/arcs.js';
2 - function (ARCS, CV, AR) { 2 +import CV from '../deps/cv/index.js';
3 - var ARUCODetector; 3 +import AR from '../deps/aruco/index.js';
4 +
5 +var ARUCODetector;
4 6
5 - /** 7 +/**
6 - * @class ARUCODetector 8 + * @class ARUCODetector
7 - * @classdesc Component that detects ARUCO markers in images 9 + * @classdesc Component that detects ARUCO markers in images
8 - * This component encapsulate the {@link https://github.com/jcmellado/js-aruco|js-aruco} library. 10 + * This component encapsulate the {@link https://github.com/jcmellado/js-aruco|js-aruco} library.
9 - */ 11 + */
10 - ARUCODetector = ARCS.Component.create( 12 +ARUCODetector = ARCS.Component.create(
11 - function() { 13 + function() {
12 - var detector ; 14 + var detector ;
13 15
14 - /*1 Instanciate here the detector */ 16 + /*1 Instanciate here the detector */
15 - detector = new AR.Detector(); 17 + detector = new AR.Detector();
16 18
17 - /** 19 + /**
18 - * Detects ARUCO markers in the given image. 20 + * Detects ARUCO markers in the given image.
19 - * If markers are detected, this slot triggers the signal <b>onMarkers</b>. 21 + * If markers are detected, this slot triggers the signal <b>onMarkers</b>.
20 - * @param image {obj} the image in which markers should be detected 22 + * @param image {obj} the image in which markers should be detected
21 - * @emits onMarkers 23 + * @emits onMarkers
22 - * @function ARUCODetector#detect 24 + * @function ARUCODetector#detect
23 - * @slot 25 + * @slot
24 - */ 26 + */
25 - this.detect = function (image) { 27 + this.detect = function (image) {
26 - /*1 recover markers from image 28 + /*1 recover markers from image
27 - * then send they will be sent through onMarkers event 29 + * then send they will be sent through onMarkers event
28 - */ 30 + */
29 - var markers = detector.detect(image); 31 + var markers = detector.detect(image);
30 - this.emit("onMarkers",markers); 32 + this.emit("onMarkers",markers);
31 - }; 33 + };
32 - 34 +
33 - /** 35 + /**
34 - * Signal that is emitted when markers are detected in an image. 36 + * Signal that is emitted when markers are detected in an image.
35 - * @function ARUCODetector#onMarkers 37 + * @function ARUCODetector#onMarkers
36 - * @param markers {Marker[]} Array of detected markers. 38 + * @param markers {Marker[]} Array of detected markers.
37 - * @signal 39 + * @signal
38 - */ 40 + */
39 - 41 +
40 - /** 42 + /**
41 - * @typedef {Object} Marker 43 + * @typedef {Object} Marker
42 - * @property {number} id - marker id 44 + * @property {number} id - marker id
43 - * @property {Object} pose - computed pose for the marker 45 + * @property {Object} pose - computed pose for the marker
44 - * @property {number[]} pose.rotation - rotation matrix (3x3) 46 + * @property {number[]} pose.rotation - rotation matrix (3x3)
45 - * @property {number[]} pose.position - translation (3 components) 47 + * @property {number[]} pose.position - translation (3 components)
46 - */ 48 + */
47 -
48 - },
49 - 'detect',
50 - ['onMarkers']
51 - );
52 49
53 - return {ARUCODetector: ARUCODetector};
54 }, 50 },
55 - [
56 - {name:"deps/cv/index", exports:"CV"},
57 - {name:"deps/aruco/index",exports:"AR"}
58 - ]
59 -);
...\ No newline at end of file ...\ No newline at end of file
51 + 'detect',
52 + ['onMarkers']
53 +);
54 +
55 +export default {ARUCODetector: ARUCODetector};
......
This diff is collapsed. Click to expand it.
1 +import ARCS from '../build/arcs.js';
2 +import POS from '../deps/pose/square_pose.js';
1 3
4 +var MarkerLocator;
2 5
3 -arcs_module( 6 +
4 - function (ARCS, POS) { 7 +MarkerLocator = ARCS.Component.create(
5 - var MarkerLocator; 8 + function () {
9 + var square_pose = new POS.SquareFiducial();
10 +
11 + this.setFocalLength = function (focalLength) {
12 + square_pose.setFocalLength(focalLength);
13 + };
14 +
15 + this.setModelSize = function (modelSize) {
16 + square_pose.setModelSize(modelSize);
17 + };
18 +
19 + this.setIntrinsics = function (intrinsics) {
20 + square_pose.setMatrix(intrinsics);
21 + };
6 22
23 + this.setImageSource = function (id) {
24 + var imageSource = document.getElementById(id);
25 + if (id === undefined) {
26 + return;
27 + }
28 +
29 + var imageSourceStyle = window.getComputedStyle(imageSource);
30 + square_pose.setImageSize(parseInt(imageSourceStyle.width),parseInt( imageSourceStyle.height));
31 +
32 + };
7 33
8 - MarkerLocator = ARCS.Component.create( 34 + this.locateMarkers = function (markers) {
9 - function () { 35 + var k, pose;
10 - var square_pose = new POS.SquareFiducial(); 36 + for (k=0; k < markers.length; k++) {
11 - 37 + corners = markers[k].corners;
12 - this.setFocalLength = function (focalLength) { 38 + markers[k].pose = square_pose.pose(corners);
13 - square_pose.setFocalLength(focalLength); 39 + }
14 - }; 40 +
15 - 41 + this.emit("onLocatedMarkers",markers);
16 - this.setModelSize = function (modelSize) { 42 + };
17 - square_pose.setModelSize(modelSize); 43 + },
18 - }; 44 + ['locateMarkers','setFocalLength','setModelSize','setImageSource'],
19 - 45 + ['onLocatedMarkers']
20 - this.setIntrinsics = function (intrinsics) { 46 +);
21 - square_pose.setMatrix(intrinsics);
22 - };
23 -
24 - this.setImageSource = function (id) {
25 - var imageSource = document.getElementById(id);
26 - if (id === undefined) {
27 - return;
28 - }
29 -
30 - var imageSourceStyle = window.getComputedStyle(imageSource);
31 - square_pose.setImageSize(parseInt(imageSourceStyle.width),parseInt( imageSourceStyle.height));
32 -
33 - };
34 -
35 - this.locateMarkers = function (markers) {
36 - var k, pose;
37 - for (k=0; k < markers.length; k++) {
38 - corners = markers[k].corners;
39 - markers[k].pose = square_pose.pose(corners);
40 - }
41 -
42 - this.emit("onLocatedMarkers",markers);
43 - };
44 - },
45 - ['locateMarkers','setFocalLength','setModelSize','setImageSource'],
46 - ['onLocatedMarkers']
47 - );
48 47
49 48
50 - return { MarkerLocator: MarkerLocator };
51 - },
52 - [ {name: "deps/pose/square_pose", exports: "POS"} ]
53 -);
...\ No newline at end of file ...\ No newline at end of file
49 +export default { MarkerLocator: MarkerLocator };
......
1 -arcs_module( 1 +import ARCS from '../build/arcs.js';
2 - function(ARCS,_three) { 2 +import * as THREE from '../deps/three.js/index.js';
3 - var ObjectTransform ;
4 3
5 - /** 4 +var ObjectTransform ;
6 - * @class ObjectTransform
7 - * @classdesc Apply transformations to objects
8 - */
9 - ObjectTransform = ARCS.Component.create(
10 - function() {
11 - var objRoot;
12 - var refMat;
13 - var id = -1;
14 5
15 - /** 6 +/**
16 - * Sets the object of interest on which we would like to apply transforms. 7 + * @class ObjectTransform
17 - * @param obj {object} a Three.js Object3D 8 + * @classdesc Apply transformations to objects
18 - * @function ObjectTransform#setObject 9 + */
19 - */ 10 +ObjectTransform = ARCS.Component.create(
20 - this.setObject = function (obj) { 11 + function() {
21 - objRoot = new THREE.Object3D(); 12 + var objRoot;
22 - obj.parent.add(objRoot); 13 + var refMat;
23 - obj.parent.remove(obj); 14 + var id = -1;
24 - objRoot.add(obj);
25 -
26 - var box = new THREE.Box3;
27 - box.setFromObject(obj);
28 - var s = box.size();
29 - var scale = MAX3(s.x, s.y, s.z);
30 - console.log(scale);
31 - obj.add(new THREE.AxisHelper(scale / 2));
32 - };
33 -
34 - var MAX3 = function (a,b,c) {
35 - if ( a >= b ) {
36 - if ( a >= c) {
37 - return a;
38 - } else {
39 - return c;
40 - }
41 - } else {
42 - if (b >= c) {
43 - return b;
44 - } else {
45 - return c;
46 - }
47 - }
48 - };
49 15
50 - 16 + /**
51 - 17 + * Sets the object of interest on which we would like to apply transforms.
52 - // right now, we make something compatible with aruco markers 18 + * @param obj {object} a Three.js Object3D
53 - // it may evolve in the future 19 + * @function ObjectTransform#setObject
54 - 20 + */
55 - /** 21 + this.setObject = function (obj) {
56 - * Takes an array of markers and then applies transformations 22 + objRoot = new THREE.Object3D();
57 - * to the referenced object. 23 + obj.parent.add(objRoot);
58 - * @function ObjectTransform#setTransform 24 + obj.parent.remove(obj);
59 - * @param arr {Marker[]} an array of detected markers. 25 + objRoot.add(obj);
60 - */ 26 +
61 - this.setTransform = function ( arr ) { 27 + var box = new THREE.Box3;
62 - /*2 set here the transformation we should apply on objRoot 28 + box.setFromObject(obj);
63 - * Each marker has 3 major properties : 29 + var s = box.size();
64 - * - id is the marker id; 30 + var scale = MAX3(s.x, s.y, s.z);
65 - * - pose.rotation gives its orientation using a rotation matrix 31 + console.log(scale);
66 - * and is a 3x3 array 32 + obj.add(new THREE.AxisHelper(scale / 2));
67 - * - pose.position gives its position with respect to the camera 33 + };
68 - * and is a vector with 3 components.
69 - */
70 - if (objRoot === undefined) { return ; }
71 - var i ;
72 - for ( i = 0; i < arr.length; i++) {
73 - if ( arr[i].id === id ) {
74 - // insert your code here.
75 -
76 - //<--
77 - var rotation = arr[i].pose.rotation;
78 - var translation = arr[i].pose.position;
79 - /*var matrix = new THREE.Matrix4(
80 - rotation[0][0], rotation[0][1], rotation[0][2], translation[0],
81 - rotation[1][0], rotation[1][1], rotation[1][2], translation[1],
82 - rotation[2][0], rotation[2][1], rotation[2][2], translation[2],
83 - 0 , 0, 0, 1);
84 34
85 - var r = new THREE.Euler(); 35 + var MAX3 = function (a,b,c) {
86 - r.setFromRotationMatrix(matrix); 36 + if ( a >= b ) {
87 - objRoot.rotation.x = r.x; 37 + if ( a >= c) {
88 - objRoot.rotation.y = r.y; 38 + return a;
89 - objRoot.rotation.z = r.z; 39 + } else {
90 - 40 + return c;
91 - objRoot.position.x = translation[0]; 41 + }
92 - objRoot.position.y = translation[1]; 42 + } else {
93 - objRoot.position.z = translation[2]; 43 + if (b >= c) {
94 - 44 + return b;
95 - objRoot.scale.x = 1; 45 + } else {
96 - objRoot.scale.y = 1; 46 + return c;
97 - objRoot.scale.z = 1;*/
98 -
99 - objRoot.rotation.x = -Math.asin(-rotation[1][2]);
100 - objRoot.rotation.y = -Math.atan2(rotation[0][2], rotation[2][2]);
101 - objRoot.rotation.z = Math.atan2(rotation[1][0], rotation[1][1]);
102 -
103 - objRoot.position.x = translation[0];
104 - objRoot.position.y = translation[1];
105 - objRoot.position.z = -translation[2];
106 - //-->
107 -
108 - }
109 } 47 }
110 - }; 48 + }
111 - 49 + };
112 - this.setId = function (i) {
113 - id = i;
114 - };
115 - },
116 - ['setObject', 'setTransform', 'setId'],
117 - []
118 - );
119 50
51 +
52 +
53 + // right now, we make something compatible with aruco markers
54 + // it may evolve in the future
55 +
56 + /**
57 + * Takes an array of markers and then applies transformations
58 + * to the referenced object.
59 + * @function ObjectTransform#setTransform
60 + * @param arr {Marker[]} an array of detected markers.
61 + */
62 + this.setTransform = function ( arr ) {
63 + /*2 set here the transformation we should apply on objRoot
64 + * Each marker has 3 major properties :
65 + * - id is the marker id;
66 + * - pose.rotation gives its orientation using a rotation matrix
67 + * and is a 3x3 array
68 + * - pose.position gives its position with respect to the camera
69 + * and is a vector with 3 components.
70 + */
71 + if (objRoot === undefined) { return ; }
72 + var i ;
73 + for ( i = 0; i < arr.length; i++) {
74 + if ( arr[i].id === id ) {
75 + // insert your code here.
76 +
77 + //<--
78 + var rotation = arr[i].pose.rotation;
79 + var translation = arr[i].pose.position;
80 + /*var matrix = new THREE.Matrix4(
81 + rotation[0][0], rotation[0][1], rotation[0][2], translation[0],
82 + rotation[1][0], rotation[1][1], rotation[1][2], translation[1],
83 + rotation[2][0], rotation[2][1], rotation[2][2], translation[2],
84 + 0 , 0, 0, 1);
120 85
86 + var r = new THREE.Euler();
87 + r.setFromRotationMatrix(matrix);
88 + objRoot.rotation.x = r.x;
89 + objRoot.rotation.y = r.y;
90 + objRoot.rotation.z = r.z;
91 +
92 + objRoot.position.x = translation[0];
93 + objRoot.position.y = translation[1];
94 + objRoot.position.z = translation[2];
95 +
96 + objRoot.scale.x = 1;
97 + objRoot.scale.y = 1;
98 + objRoot.scale.z = 1;*/
99 +
100 + objRoot.rotation.x = -Math.asin(-rotation[1][2]);
101 + objRoot.rotation.y = -Math.atan2(rotation[0][2], rotation[2][2]);
102 + objRoot.rotation.z = Math.atan2(rotation[1][0], rotation[1][1]);
121 103
122 - return { ObjectTransform : ObjectTransform }; 104 + objRoot.position.x = translation[0];
105 + objRoot.position.y = translation[1];
106 + objRoot.position.z = -translation[2];
107 + //-->
108 +
109 + }
110 + }
111 + };
112 +
113 + this.setId = function (i) {
114 + id = i;
115 + };
123 }, 116 },
124 - [ "deps/three.js/index" ]
125 -);
...\ No newline at end of file ...\ No newline at end of file
117 + ['setObject', 'setTransform', 'setId'],
118 + []
119 +);
120 +
121 +export default { ObjectTransform : ObjectTransform };
......
1 -arcs_module( 1 +import ARCS from '../build/arcs.js';
2 - function(ARCS, three, _objloader, _mtlloader, _objmtlloader) { 2 +import * as THREE from '../deps/three.js/index.js';
3 - var OBJLoader; 3 +import { OBJLoader } from '../deps/objloader/objloader.js';
4 +import { MTLLoader } from '../deps/mtlloader/mtlloader.js';
5 +//import { DDSLoader } from '../deps/ddsloader/ddsloader.js';
4 6
7 +
8 +var internalOBJLoader;
9 +
10 +
11 +internalOBJLoader = ARCS.Component.create(
12 + function() {
13 + var self = this;
14 + var innerObject;
5 15
6 - OBJLoader = ARCS.Component.create( 16 + var onLoadWrapper = function(obj) {
7 - function() { 17 + innerObject = obj;
8 - var self = this; 18 + console.log("[OBJLoader] object has %d components", obj.children.length);
9 - var innerObject; 19 + //console.log(obj);
10 - 20 + self.emit("onLoad", obj);
11 - var onLoadWrapper = function(obj) { 21 + };
12 - innerObject = obj;
13 - console.log("[OBJLoader] object has %d components", obj.children.length);
14 - //console.log(obj);
15 - self.emit("onLoad", obj);
16 - };
17 22
18 - var onLoadJSON = function(geom, mat) { 23 + var onLoadJSON = function(geom, mat) {
19 - innerObject = new THREE.Mesh(geom, new THREE.MeshFaceMaterial(mat)); 24 + innerObject = new THREE.Mesh(geom, new THREE.MeshFaceMaterial(mat));
20 - 25 +
21 - self.emit("onLoad", innerObject); 26 + self.emit("onLoad", innerObject);
22 - }; 27 + };
23 - 28 +
24 - var progress = function ( xhr ) { 29 + var progress = function ( xhr ) {
25 - console.log( (xhr.loaded / xhr.total * 100) + '% loaded' ); 30 + console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
26 - }; 31 + };
27 - 32 +
28 - var error = function ( xhr ) { 33 + var error = function ( xhr ) {
29 - console.log( 'An error happened' ); 34 + console.log( 'An error happened' );
30 - }; 35 + };
31 - 36 +
32 - this.load = function(objURL, mtlURL) { 37 + this.load = function(objURL, mtlURL) {
33 - var loader; 38 + var loader;
34 - // we may use a string tokenizer to determine file types 39 + // we may use a string tokenizer to determine file types
35 - // then all would be in the same loading slot. 40 + // then all would be in the same loading slot.
36 - 41 +
37 - 42 + //console.log("loading objects", objURL, mtlURL);
38 - console.log("loading objects", objURL, mtlURL); 43 + var manager = new THREE.LoadingManager();
39 - if (mtlURL === undefined) { 44 + //manager.addHandler( /\.dds$/i, new DDSLoader() );
40 - //console.log("using loader"); 45 +
41 - loader = new THREE.OBJLoader(); 46 + if (mtlURL === undefined) {
42 - loader.load(objURL, onLoadWrapper, progress, error); 47 + //console.log("using loader");
48 + loader = new OBJLoader(manager);
49 + loader.load(objURL, onLoadWrapper, progress, error);
50 + } else {
51 + //console.log("using mtl loader");
52 + loader = new MTLLoader(manager);
53 + loader.load(mtlURL, function(materials) {
54 + materials.preload();
55 + console.log(materials);
56 + new OBJLoader(manager)
57 + .setMaterials(materials)
58 + .load(objURL, onLoadWrapper, progress, error);
59 + }, progress, error);
60 + }
61 + };
62 +
63 + this.loadJSON = function(jsonURL) {
64 + var loader;
65 + //console.log("loading objects", jsonURL);
66 + loader = new THREE.ObjectLoader();
67 + loader.load(jsonURL, onLoadJSON); //, progress, error);
68 +
69 +
70 + };
71 +
72 + var MAX3 = function (a,b,c) {
73 + if ( a >= b ) {
74 + if ( a >= c) {
75 + return a;
43 } else { 76 } else {
44 - //console.log("using mtl loader"); 77 + return c;
45 - loader = new THREE.OBJMTLLoader();
46 - loader.load(objURL, mtlURL, onLoadWrapper, progress, error);
47 } 78 }
48 - }; 79 + } else {
49 - 80 + if (b >= c) {
50 - this.loadJSON = function(jsonURL) { 81 + return b;
51 - var loader;
52 - //console.log("loading objects", jsonURL);
53 - loader = new THREE.JSONLoader();
54 - loader.load(jsonURL, onLoadJSON); //, progress, error);
55 -
56 -
57 - };
58 -
59 - var MAX3 = function (a,b,c) {
60 - if ( a >= b ) {
61 - if ( a >= c) {
62 - return a;
63 - } else {
64 - return c;
65 - }
66 } else { 82 } else {
67 - if (b >= c) { 83 + return c;
68 - return b;
69 - } else {
70 - return c;
71 - }
72 } 84 }
73 - }; 85 + }
74 - 86 + };
75 - this.unitize = function() { 87 +
76 - if (innerObject === undefined) { return ; } 88 + this.unitize = function() {
77 - var box = new THREE.Box3(); 89 + if (innerObject === undefined) { return ; }
78 - box.setFromObject(innerObject); 90 + var box = new THREE.Box3();
79 - var s = box.size(); 91 + box.setFromObject(innerObject);
80 - var c = box.center(); 92 + var s = box.size();
81 - var scale = 1 / MAX3(s.x, s.y, s.z); 93 + var c = box.center();
82 - innerObject.scale.x = innerObject.scale.y = innerObject.scale.z = scale; 94 + var scale = 1 / MAX3(s.x, s.y, s.z);
83 - }; 95 + innerObject.scale.x = innerObject.scale.y = innerObject.scale.z = scale;
84 - 96 + };
85 - this.resize = function(s) { 97 +
86 - this.unitize(); 98 + this.resize = function(s) {
87 - if (innerObject === undefined) { return ; } 99 + this.unitize();
88 - innerObject.scale.x *= s; 100 + if (innerObject === undefined) { return ; }
89 - innerObject.scale.y *= s; 101 + innerObject.scale.x *= s;
90 - innerObject.scale.z *= s; 102 + innerObject.scale.y *= s;
91 - }; 103 + innerObject.scale.z *= s;
92 - 104 + };
93 - },
94 - ["load","unitize", "resize"],
95 - ["onLoad"]
96 - );
97 105
98 - return { OBJLoader: OBJLoader};
99 }, 106 },
100 - [ 'deps/three.js/index', 'deps/objloader/index', 'deps/mtlloader/index','deps/objmtlloader/index' ]
101 -);
...\ No newline at end of file ...\ No newline at end of file
107 + ["load","unitize", "resize"],
108 + ["onLoad"]
109 +);
110 +
111 +export default { OBJLoader: internalOBJLoader};
......
1 -arcs_module(function(ARCS) { 1 +import ARCS from '../build/arcs.js';
2 - var TokenSender;
3 2
4 - TokenSender = ARCS.Component.create( 3 +var TokenSender;
5 - function( arr ) {
6 - var i;
7 - var self = this;
8 - for (i=0; i< arr.length; i++) {
9 - if (typeof arr[i] === "string") {
10 - this.slots.push(arr[i]);
11 - //TokenSender.prototype.slots.push(arr[i]);
12 - this[arr[i]] = function( s ) {
13 - return function() {
14 - console.log("[TokenSender] emitting %s", s);
15 - this.emit("sendToken",s);
16 - };
17 - } (arr[i]);
18 - }
19 - }
20 - },
21 - [],
22 - ['sendToken']
23 - );
24 4
25 - return { TokenSender : TokenSender };
26 -});
...\ No newline at end of file ...\ No newline at end of file
5 +TokenSender = ARCS.Component.create(
6 + function( arr ) {
7 + var i;
8 + var self = this;
9 + for (i=0; i< arr.length; i++) {
10 + if (typeof arr[i] === "string") {
11 + this.slots.push(arr[i]);
12 + //TokenSender.prototype.slots.push(arr[i]);
13 + this[arr[i]] = function( s ) {
14 + return function() {
15 + console.log("[TokenSender] emitting %s", s);
16 + this.emit("sendToken",s);
17 + };
18 + } (arr[i]);
19 + }
20 + }
21 + },
22 + [],
23 + ['sendToken']
24 +);
25 +
26 +export default { TokenSender : TokenSender };
......
1 -arcs_module(function(ARCS) { 1 +import ARCS from '../build/arcs.js';
2 - var LiveSource, VideoSource; 2 +
3 - LiveSource = ARCS.Component.create( 3 +var LiveSource, VideoSource;
4 - function () { 4 +LiveSource = ARCS.Component.create(
5 - var context, canvas, video, imageData; 5 + function () {
6 - var defaultWidth = 320; 6 + var context, canvas, video, imageData;
7 - var defaultHeight = 240; 7 + var defaultWidth = 320;
8 - var self = this; 8 + var defaultHeight = 240;
9 - 9 + var self = this;
10 - var handleMediaStream = function(stream) { 10 +
11 - if (window.webkitURL) { 11 + var handleMediaStream = function(stream) {
12 - video.src = window.webkitURL.createObjectURL(stream); 12 + console.log(video,stream);
13 - } else if (video.mozSrcObject !== undefined) { 13 + if (window.webkitURL) {
14 - video.mozSrcObject = stream; 14 + video.src = window.webkitURL.createObjectURL(stream);
15 - } else { 15 + } else if (video.mozSrcObject !== undefined) {
16 - video.src = stream; 16 + video.mozSrcObject = stream;
17 - } 17 + } else if (video.srcObject !== undefined) {
18 - video.videoWidth=defaultWidth; 18 + video.srcObject = stream;
19 - video.videoHeight=defaultHeight; 19 + } else {
20 - self.emit("onReady"); 20 + video.src = stream;
21 - }; 21 + }
22 - 22 + /*video.videoWidth=defaultWidth;
23 - var errorMediaStream = function(error) { 23 + video.videoHeight=defaultHeight;*/
24 - console.error("Cannot initialize video component:", error.code); 24 + self.emit("onReady");
25 - }; 25 + };
26 - 26 +
27 - var setUserMedia = function() { 27 + var errorMediaStream = function(error) {
28 - console.log("video test"); 28 + console.error("Cannot initialize video component:", error.code);
29 - if (navigator.mediaDevices !== undefined) { 29 + };
30 - navigator.mediaDevices.getUserMedia({video:true}) 30 +
31 - .then(handleMediaStream) 31 + var setUserMedia = function() {
32 - .catch(errorMediaStream); 32 + if (navigator.mediaDevices !== undefined) {
33 - } else { 33 + navigator.mediaDevices.getUserMedia({video: {facingMode: "environment", width: defaultWidth, height: defaultHeight}})
34 - var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; 34 + .then(handleMediaStream)
35 - if (getUserMedia !== undefined) { 35 + .catch(errorMediaStream);
36 - getUserMedia({video:true}, handleMediaStream, 36 + } else {
37 - errorMediaStream 37 + var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
38 - ); 38 + if (getUserMedia !== undefined) {
39 - } 39 + getUserMedia({video:true}).then(handleMediaStream);
40 - }
41 - };
42 -
43 - this.grabFrame = function () {
44 - if ( context === undefined || canvas === undefined || video === undefined)
45 - return;
46 - if (video.readyState === video.HAVE_ENOUGH_DATA) {
47 - context.drawImage(video, 0, 0, canvas.width, canvas.height);
48 - imageData = context.getImageData(0, 0, canvas.width, canvas.height);
49 - this.emit("onImage",imageData);
50 } 40 }
51 - }; 41 + }
42 + };
43 +
44 + this.grabFrame = function () {
45 + if ( context === undefined || canvas === undefined || video === undefined)
46 + return;
47 + if (video.readyState === video.HAVE_ENOUGH_DATA) {
48 + context.drawImage(video, 0, 0, canvas.width, canvas.height);
49 + imageData = context.getImageData(0, 0, canvas.width, canvas.height);
50 + this.emit("onImage",imageData);
51 + }
52 + };
53 +
54 + this.setSize = function(x,y) {
52 55
53 - this.setSize = function(x,y) { 56 + };
54 - 57 +
55 - }; 58 + this.setWidgets = function (videoId, canvasId) {
59 + video = document.getElementById(videoId);
60 + canvas = document.getElementById(canvasId);
56 61
57 - this.setWidgets = function (videoId, canvasId) { 62 + if (video === undefined || canvas === undefined) {
58 - video = document.getElementById(videoId); 63 + console.log("video elements not defined");
59 - canvas = document.getElementById(canvasId); 64 + return;
60 - 65 + }
61 - if (video === undefined || canvas === undefined) { 66 + context = canvas.getContext("2d");
62 - console.log("video elements not defined"); 67 + var canvasStyle= window.getComputedStyle(canvas);
63 - return; 68 + canvas.width=parseInt(canvasStyle.width);
64 - } 69 + canvas.height=parseInt(canvasStyle.height);
65 - context = canvas.getContext("2d"); 70 + setUserMedia();
66 - var canvasStyle= window.getComputedStyle(canvas); 71 + };
67 - canvas.width=parseInt(canvasStyle.width); 72 + },
68 - canvas.height=parseInt(canvasStyle.height); 73 + ['grabFrame','setWidgets'],
69 - setUserMedia(); 74 + ['onReady','onImage']
70 - }; 75 +);
71 - }, 76 +
72 - ['grabFrame','setWidgets'], 77 +
73 - ['onReady','onImage'] 78 +VideoSource = ARCS.Component.create(
74 - ); 79 + function() {
75 - 80 + var context, canvas, video, imageData;
76 - 81 + var defaultWidth=320;
77 - VideoSource = ARCS.Component.create( 82 + var defaultHeight=240;
78 - function() { 83 + var self=this;
79 - var context, canvas, video, imageData; 84 +
80 - var defaultWidth=320; 85 + this.setWidgets = function (videoId, canvasId) {
81 - var defaultHeight=240; 86 + video = document.getElementById(videoId);
82 - var self=this; 87 + canvas = document.getElementById(canvasId);
83 88
84 - this.setWidgets = function (videoId, canvasId) { 89 + if (video === undefined || canvas === undefined) {
85 - video = document.getElementById(videoId); 90 + return;
86 - canvas = document.getElementById(canvasId); 91 + }
87 - 92 + context = canvas.getContext("2d");
88 - if (video === undefined || canvas === undefined) { 93 + var canvasStyle= window.getComputedStyle(canvas);
89 - return; 94 + canvas.width=parseInt(canvasStyle.width);
90 - } 95 + canvas.height=parseInt(canvasStyle.height);
91 - context = canvas.getContext("2d");
92 - var canvasStyle= window.getComputedStyle(canvas);
93 - canvas.width=parseInt(canvasStyle.width);
94 - canvas.height=parseInt(canvasStyle.height);
95 96
96 - if (video.paused || video.ended) { 97 + if (video.paused || video.ended) {
97 - video.addEventListener('play', function() { 98 + video.addEventListener('play', function() {
98 - self.emit("onReady");
99 - });
100 - } else {
101 self.emit("onReady"); 99 self.emit("onReady");
102 - } 100 + });
103 - 101 + } else {
104 - 102 + self.emit("onReady");
105 - }; 103 + }
106 104
107 - this.grabFrame = function () {
108 - if ( context === undefined || canvas === undefined || video === undefined)
109 - return;
110 - if (video.paused || video.ended) {
111 - return;
112 - }
113 -
114 - context.drawImage(video, 0, 0, canvas.width, canvas.height);
115 - imageData = context.getImageData(0, 0, canvas.width, canvas.height);
116 - this.emit("onImage",imageData);
117 - };
118 105
106 + };
107 +
108 + this.grabFrame = function () {
109 + if ( context === undefined || canvas === undefined || video === undefined)
110 + return;
111 + if (video.paused || video.ended) {
112 + return;
113 + }
114 +
115 + context.drawImage(video, 0, 0, canvas.width, canvas.height);
116 + imageData = context.getImageData(0, 0, canvas.width, canvas.height);
117 + this.emit("onImage",imageData);
118 + };
119 119
120 - },
121 - ['grabFrame', 'setWidgets'],
122 - ['onReady', 'onImage']
123 - );
124 120
121 + },
122 + ['grabFrame', 'setWidgets'],
123 + ['onReady', 'onImage']
124 +);
125 125
126 - return {LiveSource: LiveSource, VideoSource: VideoSource};
127 -});
...\ No newline at end of file ...\ No newline at end of file
126 +
127 +
128 +export default {LiveSource: LiveSource, VideoSource: VideoSource};
......
1 -arcs_module( 1 +import ARCS from '../build/arcs.js';
2 - function (ARCS) {
3 - var WindowEvent;
4 2
5 - WindowEvent = ARCS.Component.create( 3 +let WindowEvent;
6 - function () { 4 +
7 - var self= this; 5 +WindowEvent = ARCS.Component.create(
8 - 6 + function () {
9 - window.onresize = function() { 7 + let self= this;
10 - self.emit("onResize",window.innerWidth, window.innerHeight); 8 +
11 - }; 9 + window.onresize = function() {
12 - }, 10 + self.emit("onResize",window.innerWidth, window.innerHeight);
13 - [], 11 + };
14 - ["onResize"] 12 + },
15 - ); 13 + [],
14 + ["onResize"]
15 +);
16 16
17 - return { WindowEvent: WindowEvent};
18 - }
19 -);
...\ No newline at end of file ...\ No newline at end of file
17 +
18 +export default { WindowEvent: WindowEvent};
......
...@@ -493,3 +493,5 @@ Mat3.prototype.row = function(index){ ...@@ -493,3 +493,5 @@ Mat3.prototype.row = function(index){
493 493
494 return new Vec3( m[index][0], m[index][1], m[index][2] ); 494 return new Vec3( m[index][0], m[index][1], m[index][2] );
495 }; 495 };
496 +
497 +export default POS;
......
...@@ -529,3 +529,5 @@ POS.Pose = function(error1, rotation1, translation1, error2, rotation2, translat ...@@ -529,3 +529,5 @@ POS.Pose = function(error1, rotation1, translation1, error2, rotation2, translat
529 this.alternativeRotation = rotation2; 529 this.alternativeRotation = rotation2;
530 this.alternativeTranslation = translation2; 530 this.alternativeTranslation = translation2;
531 }; 531 };
532 +
533 +export default POS;
......
...@@ -129,4 +129,6 @@ POS.SquareFiducial.prototype.crossProduct = function(a,b) { ...@@ -129,4 +129,6 @@ POS.SquareFiducial.prototype.crossProduct = function(a,b) {
129 POS.SimplePose = function(pos, rot) { 129 POS.SimplePose = function(pos, rot) {
130 this.position = pos; 130 this.position = pos;
131 this.rotation = rot; 131 this.rotation = rot;
132 -};
...\ No newline at end of file ...\ No newline at end of file
132 +};
133 +
134 +export default POS;
......
...@@ -281,3 +281,5 @@ SVD.pythag = function(a, b){ ...@@ -281,3 +281,5 @@ SVD.pythag = function(a, b){
281 SVD.sign = function(a, b){ 281 SVD.sign = function(a, b){
282 return b >= 0.0? Math.abs(a): -Math.abs(a); 282 return b >= 0.0? Math.abs(a): -Math.abs(a);
283 }; 283 };
284 +
285 +export default SVD;
......
1 -arcs_module(function(ARCS) { 1 +import * as THREE from './index.js';
2 -THREE.FrustumCamera = function ( left, right, bottom, top, near, far ) { 2 +
3 +let FrustumCamera = function ( left, right, bottom, top, near, far ) {
3 4
4 THREE.Camera.call( this ); 5 THREE.Camera.call( this );
5 6
...@@ -17,22 +18,22 @@ THREE.FrustumCamera = function ( left, right, bottom, top, near, far ) { ...@@ -17,22 +18,22 @@ THREE.FrustumCamera = function ( left, right, bottom, top, near, far ) {
17 18
18 }; 19 };
19 20
20 -THREE.FrustumCamera.prototype = Object.create( THREE.Camera.prototype ); 21 +FrustumCamera.prototype = Object.create( THREE.Camera.prototype );
21 -THREE.FrustumCamera.prototype.constructor = THREE.FrustumCamera; 22 +FrustumCamera.prototype.constructor = FrustumCamera;
22 23
23 24
24 25
25 26
26 -THREE.FrustumCamera.prototype.updateProjectionMatrix = function () { 27 +FrustumCamera.prototype.updateProjectionMatrix = function () {
27 28
28 this.projectionMatrix.makeFrustum( 29 this.projectionMatrix.makeFrustum(
29 this.left, this.right, this.bottom, this.top, this.near, this.far 30 this.left, this.right, this.bottom, this.top, this.near, this.far
30 ); 31 );
31 }; 32 };
32 33
33 -THREE.FrustumCamera.prototype.clone = function () { 34 +FrustumCamera.prototype.clone = function () {
34 35
35 - var camera = new THREE.FrustumCamera(); 36 + var camera = new FrustumCamera();
36 37
37 THREE.Camera.prototype.clone.call( this, camera ); 38 THREE.Camera.prototype.clone.call( this, camera );
38 39
...@@ -51,6 +52,4 @@ THREE.FrustumCamera.prototype.clone = function () { ...@@ -51,6 +52,4 @@ THREE.FrustumCamera.prototype.clone = function () {
51 52
52 }; 53 };
53 54
54 -return {}; 55 +export default FrustumCamera;
55 -}, ['deps/three.js/index']
56 -);
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
11 "Reality" 11 "Reality"
12 ], 12 ],
13 "author": "Jean-Yves Didier", 13 "author": "Jean-Yves Didier",
14 - "license": "GPL", 14 + "license": "GPL-3.0-or-later",
15 "devDependencies": { 15 "devDependencies": {
16 "bower": ">=1.3.9", 16 "bower": ">=1.3.9",
17 "grunt": ">=0.4.5", 17 "grunt": ">=0.4.5",
...@@ -20,6 +20,8 @@ ...@@ -20,6 +20,8 @@
20 "grunt-jsdoc": ">=0.5.6", 20 "grunt-jsdoc": ">=0.5.6",
21 "grunt-bower-task": ">=0.4.0", 21 "grunt-bower-task": ">=0.4.0",
22 "grunt-contrib-concat": ">=0.5.0", 22 "grunt-contrib-concat": ">=0.5.0",
23 - "grunt-contrib-copy": ">=1.0.0" 23 + "grunt-contrib-copy": ">=1.0.0",
24 + "grunt-file-append": ">=0.0.7",
25 + "grunt-string-replace": ">=1.3.1"
24 } 26 }
25 } 27 }
......
1 { 1 {
2 "context": { 2 "context": {
3 "libraries": [ 3 "libraries": [
4 - "components/arviewer","components/animator", 4 + "../components/arviewer.js","../components/animator.js",
5 - "components/objloader","components/video", 5 + "../components/objloader.js","../components/video.js",
6 - "components/arucodetector", "components/markerlocator", 6 + "../components/arucodetector.js", "../components/markerlocator.js",
7 - "components/windowevent", "components/tokensender", "components/objecttransform" 7 + "../components/windowevent.js", "../components/tokensender.js", "../components/objecttransform.js"
8 ], 8 ],
9 "components": { 9 "components": {
10 "viewer": { "type": "ARViewer"}, 10 "viewer": { "type": "ARViewer"},
......
...@@ -2,15 +2,15 @@ ...@@ -2,15 +2,15 @@
2 <head> 2 <head>
3 <title>ARCS: marker experiment</title> 3 <title>ARCS: marker experiment</title>
4 <link type="text/css" rel="stylesheet" href="arcs.css"> 4 <link type="text/css" rel="stylesheet" href="arcs.css">
5 - <script data-main="../../build/arcs_browser" 5 + <script src="../../build/arcs_browser.js"
6 data-base-url="../.." 6 data-base-url="../.."
7 data-arcsapp="arcsapp.json" 7 data-arcsapp="arcsapp.json"
8 - src="../../deps/requirejs/require.js"> 8 + type="module">
9 </script> 9 </script>
10 <meta charset="UTF-8"> 10 <meta charset="UTF-8">
11 </head> 11 </head>
12 <body> 12 <body>
13 - <video id="video" width=320 height=240 autoplay="true" style="display: none;"></video> 13 + <video id="video" width=640 height=480 autoplay="true" style="display: none;"></video>
14 <canvas id="canvas"></canvas> 14 <canvas id="canvas"></canvas>
15 <div id="container" ></div> 15 <div id="container" ></div>
16 <div id="contents"> 16 <div id="contents">
......