├── .gitignore
├── README.md
├── jsconfig.json
├── package-lock.json
├── package.json
├── public
    ├── data
    │   ├── camera_para.dat
    │   └── patt.hiro
    ├── favicon.ico
    └── index.html
└── src
    ├── App.vue
    ├── components
        └── ARScene.vue
    └── main.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # arjs-vue
 2 | 
 3 | Example for using AR.js in a Vue.js App.
 4 | 
 5 | ## Project setup
 6 | ```
 7 | npm install
 8 | ```
 9 | 
10 | ### Compiles and hot-reloads for development
11 | ```
12 | npm run serve
13 | ```
14 | 
15 | ### Compiles and minifies for production
16 | ```
17 | npm run build
18 | ```
19 | 
20 | ### Customize configuration
21 | See [Configuration Reference](https://cli.vuejs.org/config/).
22 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "exclude": ["node_modules"],
3 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "arjs-vue",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve --https",
 7 |     "build": "vue-cli-service build"
 8 |   },
 9 |   "dependencies": {
10 |     "three": "^0.126.1",
11 |     "vue": "^2.6.11",
12 |     "ar-js-org": "https://github.com/AR-js-org/AR.js.git#b7c48e04321df4b57ba8321209d3cb111d055500"
13 |   },
14 |   "devDependencies": {
15 |     "@vue/cli-service": "~4.5.0",
16 |     "vue-template-compiler": "^2.6.11"
17 |   },
18 |   "browserslist": [
19 |     "> 1%",
20 |     "last 2 versions",
21 |     "not dead"
22 |   ]
23 | }
24 | 


--------------------------------------------------------------------------------
/public/data/camera_para.dat:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LucaJunge/arjs-vue/a7a51051df5f28db4dfaf017a1a9e1627fb76863/public/data/camera_para.dat


--------------------------------------------------------------------------------
/public/data/patt.hiro:
--------------------------------------------------------------------------------
  1 |  234 235 240 233 240 234 240 235 240 237 240 238 240 240 240 232
  2 |  229 240 240 240 240 240 240 240 240 240 240 240 240 240 240 228
  3 |  227 240 240 240 240 240 240 240 240 240 240 240 240 240 240 239
  4 |  240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
  5 |  236 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
  6 |  234 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
  7 |  236 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
  8 |  231 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
  9 |  229 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
 10 |  225 149 240 240 186 216 225 174 240 240 240 237 238 240 240 240
 11 |  150 107 238 231  75 208 115 147 238 228 223 226 237 180 226 240
 12 |  150  62 181 213  62 187 113 169 197  72  29 237 120  50  53 207
 13 |  149  63  47  78  53 184 113 101 142   5 150 150  45 217 186  83
 14 |  121  84 220 222  58 180 121  92 128 109 237 124 155 232 161  64
 15 |  149  71 240 240  76 210  98 109 122 108 240 129  51 119 161 155
 16 |  149 186 240 240  98 219 135 152 207 191 236 227 152  77 175 209
 17 |  235 235 240 233 240 234 240 235 240 236 240 238 240 240 240 240
 18 |  229 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
 19 |  227 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
 20 |  240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
 21 |  236 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
 22 |  234 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
 23 |  236 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
 24 |  232 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
 25 |  229 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
 26 |  225 156 240 240 186 216 225 186 240 240 240 240 240 240 240 240
 27 |  150 117 240 231  72 206 115 162 240 232 223 237 240 180 226 240
 28 |  150  74 187 213  51 184 103 168 197  78  29 237 120  50  53 216
 29 |  144  77  51  74  61 184 106 101 142   5 150 152  52 217 186  85
 30 |  117  89 219 219  65 184 121  92 128 100 236 125 156 240 170  73
 31 |  148  71 240 240  76 210 109 109 121  99 240 137  51 120 166 164
 32 |  140 186 240 240  98 220 150 156 207 192 236 230 152  77 176 212
 33 |  234 235 240 233 240 234 240 235 240 236 240 238 240 240 240 233
 34 |  229 240 240 240 240 240 240 240 240 240 240 240 240 240 240 239
 35 |  227 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
 36 |  240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
 37 |  234 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
 38 |  232 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
 39 |  235 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
 40 |  232 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
 41 |  228 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
 42 |  225 156 240 240 182 212 225 180 240 240 240 240 240 240 240 240
 43 |  150 116 238 228  66 205 115 151 238 236 225 240 240 180 226 240
 44 |  156  84 186 211  47 184 109 170 200  92  30 240 120  50  53 216
 45 |  147  83  51  73  50 184 106 110 148  17 151 150  45 217 186  85
 46 |  127  98 219 219  58 179 109 101 128 107 237 125 155 240 163  72
 47 |  155  86 240 240  76 201  85 108 121  95 232 137  51 118 153 155
 48 |  149 189 240 240  98 220 141 154 206 178 235 230 152  77 175 209
 49 | 
 50 |  232 228 239 240 240 240 240 240 240 240 240 207  83  64 155 209
 51 |  240 240 240 240 240 240 240 240 240 240 226  53 186 161 161 175
 52 |  240 240 240 240 240 240 240 240 240 240 180  50 217 232 119  77
 53 |  240 240 240 240 240 240 240 240 240 238 237 120  45 155  51 152
 54 |  238 240 240 240 240 240 240 240 240 237 226 237 150 124 129 227
 55 |  240 240 240 240 240 240 240 240 240 240 223  29 150 237 240 236
 56 |  237 240 240 240 240 240 240 240 240 240 228  72   5 109 108 191
 57 |  240 240 240 240 240 240 240 240 240 240 238 197 142 128 122 207
 58 |  235 240 240 240 240 240 240 240 240 174 147 169 101  92 109 152
 59 |  240 240 240 240 240 240 240 240 240 225 115 113 113 121  98 135
 60 |  234 240 240 240 240 240 240 240 240 216 208 187 184 180 210 219
 61 |  240 240 240 240 240 240 240 240 240 186  75  62  53  58  76  98
 62 |  233 240 240 240 240 240 240 240 240 240 231 213  78 222 240 240
 63 |  240 240 240 240 240 240 240 240 240 240 238 181  47 220 240 240
 64 |  235 240 240 240 240 240 240 240 240 149 107  62  63  84  71 186
 65 |  234 229 227 240 236 234 236 231 229 225 150 150 149 121 149 149
 66 |  240 240 240 240 240 240 240 240 240 240 240 216  85  73 164 212
 67 |  240 240 240 240 240 240 240 240 240 240 226  53 186 170 166 176
 68 |  240 240 240 240 240 240 240 240 240 240 180  50 217 240 120  77
 69 |  240 240 240 240 240 240 240 240 240 240 240 120  52 156  51 152
 70 |  238 240 240 240 240 240 240 240 240 240 237 237 152 125 137 230
 71 |  240 240 240 240 240 240 240 240 240 240 223  29 150 236 240 236
 72 |  236 240 240 240 240 240 240 240 240 240 232  78   5 100  99 192
 73 |  240 240 240 240 240 240 240 240 240 240 240 197 142 128 121 207
 74 |  235 240 240 240 240 240 240 240 240 186 162 168 101  92 109 156
 75 |  240 240 240 240 240 240 240 240 240 225 115 103 106 121 109 150
 76 |  234 240 240 240 240 240 240 240 240 216 206 184 184 184 210 220
 77 |  240 240 240 240 240 240 240 240 240 186  72  51  61  65  76  98
 78 |  233 240 240 240 240 240 240 240 240 240 231 213  74 219 240 240
 79 |  240 240 240 240 240 240 240 240 240 240 240 187  51 219 240 240
 80 |  235 240 240 240 240 240 240 240 240 156 117  74  77  89  71 186
 81 |  235 229 227 240 236 234 236 232 229 225 150 150 144 117 148 140
 82 |  233 239 240 240 240 240 240 240 240 240 240 216  85  72 155 209
 83 |  240 240 240 240 240 240 240 240 240 240 226  53 186 163 153 175
 84 |  240 240 240 240 240 240 240 240 240 240 180  50 217 240 118  77
 85 |  240 240 240 240 240 240 240 240 240 240 240 120  45 155  51 152
 86 |  238 240 240 240 240 240 240 240 240 240 240 240 150 125 137 230
 87 |  240 240 240 240 240 240 240 240 240 240 225  30 151 237 232 235
 88 |  236 240 240 240 240 240 240 240 240 240 236  92  17 107  95 178
 89 |  240 240 240 240 240 240 240 240 240 240 238 200 148 128 121 206
 90 |  235 240 240 240 240 240 240 240 240 180 151 170 110 101 108 154
 91 |  240 240 240 240 240 240 240 240 240 225 115 109 106 109  85 141
 92 |  234 240 240 240 240 240 240 240 240 212 205 184 184 179 201 220
 93 |  240 240 240 240 240 240 240 240 240 182  66  47  50  58  76  98
 94 |  233 240 240 240 240 240 240 240 240 240 228 211  73 219 240 240
 95 |  240 240 240 240 240 240 240 240 240 240 238 186  51 219 240 240
 96 |  235 240 240 240 240 240 240 240 240 156 116  84  83  98  86 189
 97 |  234 229 227 240 234 232 235 232 228 225 150 156 147 127 155 149
 98 | 
 99 |  209 175  77 152 227 236 191 207 152 135 219  98 240 240 186 149
100 |  155 161 119  51 129 240 108 122 109  98 210  76 240 240  71 149
101 |   64 161 232 155 124 237 109 128  92 121 180  58 222 220  84 121
102 |   83 186 217  45 150 150   5 142 101 113 184  53  78  47  63 149
103 |  207  53  50 120 237  29  72 197 169 113 187  62 213 181  62 150
104 |  240 226 180 237 226 223 228 238 147 115 208  75 231 238 107 150
105 |  240 240 240 238 237 240 240 240 174 225 216 186 240 240 149 225
106 |  240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 229
107 |  240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 231
108 |  240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 236
109 |  240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 234
110 |  240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 236
111 |  240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
112 |  239 240 240 240 240 240 240 240 240 240 240 240 240 240 240 227
113 |  228 240 240 240 240 240 240 240 240 240 240 240 240 240 240 229
114 |  232 240 240 240 238 240 237 240 235 240 234 240 233 240 235 234
115 |  212 176  77 152 230 236 192 207 156 150 220  98 240 240 186 140
116 |  164 166 120  51 137 240  99 121 109 109 210  76 240 240  71 148
117 |   73 170 240 156 125 236 100 128  92 121 184  65 219 219  89 117
118 |   85 186 217  52 152 150   5 142 101 106 184  61  74  51  77 144
119 |  216  53  50 120 237  29  78 197 168 103 184  51 213 187  74 150
120 |  240 226 180 240 237 223 232 240 162 115 206  72 231 240 117 150
121 |  240 240 240 240 240 240 240 240 186 225 216 186 240 240 156 225
122 |  240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 229
123 |  240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 232
124 |  240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 236
125 |  240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 234
126 |  240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 236
127 |  240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
128 |  240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 227
129 |  240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 229
130 |  240 240 240 240 238 240 236 240 235 240 234 240 233 240 235 235
131 |  209 175  77 152 230 235 178 206 154 141 220  98 240 240 189 149
132 |  155 153 118  51 137 232  95 121 108  85 201  76 240 240  86 155
133 |   72 163 240 155 125 237 107 128 101 109 179  58 219 219  98 127
134 |   85 186 217  45 150 151  17 148 110 106 184  50  73  51  83 147
135 |  216  53  50 120 240  30  92 200 170 109 184  47 211 186  84 156
136 |  240 226 180 240 240 225 236 238 151 115 205  66 228 238 116 150
137 |  240 240 240 240 240 240 240 240 180 225 212 182 240 240 156 225
138 |  240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 228
139 |  240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 232
140 |  240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 235
141 |  240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 232
142 |  240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 234
143 |  240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 240
144 |  240 240 240 240 240 240 240 240 240 240 240 240 240 240 240 227
145 |  239 240 240 240 240 240 240 240 240 240 240 240 240 240 240 229
146 |  233 240 240 240 238 240 236 240 235 240 234 240 233 240 235 234
147 | 
148 |  149 149 121 149 150 150 225 229 231 236 234 236 240 227 229 234
149 |  186  71  84  63  62 107 149 240 240 240 240 240 240 240 240 235
150 |  240 240 220  47 181 238 240 240 240 240 240 240 240 240 240 240
151 |  240 240 222  78 213 231 240 240 240 240 240 240 240 240 240 233
152 |   98  76  58  53  62  75 186 240 240 240 240 240 240 240 240 240
153 |  219 210 180 184 187 208 216 240 240 240 240 240 240 240 240 234
154 |  135  98 121 113 113 115 225 240 240 240 240 240 240 240 240 240
155 |  152 109  92 101 169 147 174 240 240 240 240 240 240 240 240 235
156 |  207 122 128 142 197 238 240 240 240 240 240 240 240 240 240 240
157 |  191 108 109   5  72 228 240 240 240 240 240 240 240 240 240 237
158 |  236 240 237 150  29 223 240 240 240 240 240 240 240 240 240 240
159 |  227 129 124 150 237 226 237 240 240 240 240 240 240 240 240 238
160 |  152  51 155  45 120 237 238 240 240 240 240 240 240 240 240 240
161 |   77 119 232 217  50 180 240 240 240 240 240 240 240 240 240 240
162 |  175 161 161 186  53 226 240 240 240 240 240 240 240 240 240 240
163 |  209 155  64  83 207 240 240 240 240 240 240 240 240 239 228 232
164 |  140 148 117 144 150 150 225 229 232 236 234 236 240 227 229 235
165 |  186  71  89  77  74 117 156 240 240 240 240 240 240 240 240 235
166 |  240 240 219  51 187 240 240 240 240 240 240 240 240 240 240 240
167 |  240 240 219  74 213 231 240 240 240 240 240 240 240 240 240 233
168 |   98  76  65  61  51  72 186 240 240 240 240 240 240 240 240 240
169 |  220 210 184 184 184 206 216 240 240 240 240 240 240 240 240 234
170 |  150 109 121 106 103 115 225 240 240 240 240 240 240 240 240 240
171 |  156 109  92 101 168 162 186 240 240 240 240 240 240 240 240 235
172 |  207 121 128 142 197 240 240 240 240 240 240 240 240 240 240 240
173 |  192  99 100   5  78 232 240 240 240 240 240 240 240 240 240 236
174 |  236 240 236 150  29 223 240 240 240 240 240 240 240 240 240 240
175 |  230 137 125 152 237 237 240 240 240 240 240 240 240 240 240 238
176 |  152  51 156  52 120 240 240 240 240 240 240 240 240 240 240 240
177 |   77 120 240 217  50 180 240 240 240 240 240 240 240 240 240 240
178 |  176 166 170 186  53 226 240 240 240 240 240 240 240 240 240 240
179 |  212 164  73  85 216 240 240 240 240 240 240 240 240 240 240 240
180 |  149 155 127 147 156 150 225 228 232 235 232 234 240 227 229 234
181 |  189  86  98  83  84 116 156 240 240 240 240 240 240 240 240 235
182 |  240 240 219  51 186 238 240 240 240 240 240 240 240 240 240 240
183 |  240 240 219  73 211 228 240 240 240 240 240 240 240 240 240 233
184 |   98  76  58  50  47  66 182 240 240 240 240 240 240 240 240 240
185 |  220 201 179 184 184 205 212 240 240 240 240 240 240 240 240 234
186 |  141  85 109 106 109 115 225 240 240 240 240 240 240 240 240 240
187 |  154 108 101 110 170 151 180 240 240 240 240 240 240 240 240 235
188 |  206 121 128 148 200 238 240 240 240 240 240 240 240 240 240 240
189 |  178  95 107  17  92 236 240 240 240 240 240 240 240 240 240 236
190 |  235 232 237 151  30 225 240 240 240 240 240 240 240 240 240 240
191 |  230 137 125 150 240 240 240 240 240 240 240 240 240 240 240 238
192 |  152  51 155  45 120 240 240 240 240 240 240 240 240 240 240 240
193 |   77 118 240 217  50 180 240 240 240 240 240 240 240 240 240 240
194 |  175 153 163 186  53 226 240 240 240 240 240 240 240 240 240 240
195 |  209 155  72  85 216 240 240 240 240 240 240 240 240 240 239 233
196 | 
197 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LucaJunge/arjs-vue/a7a51051df5f28db4dfaf017a1a9e1627fb76863/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <ARScene/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import ARScene from "./components/ARScene";
 9 | 
10 | export default {
11 |   name: 'App',
12 |   components: {
13 |     ARScene
14 |   }
15 | }
16 | </script>
17 | 
18 | <style>
19 | </style>
20 | 


--------------------------------------------------------------------------------
/src/components/ARScene.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="ARScene"></div>
  3 | </template>
  4 | 
  5 | <script>
  6 | import * as THREE from 'three';
  7 | import { ArToolkitProfile, ArToolkitSource, ArToolkitContext, ArMarkerControls} from 'ar-js-org/three.js/build/ar-threex.js';
  8 | 
  9 | export default {
 10 |   name: "ARScene",
 11 |   mounted() {
 12 |     ArToolkitContext.baseURL = './'
 13 |     console.log("ARScene mounted");
 14 | 
 15 |     // init renderer
 16 |     var renderer	= new THREE.WebGLRenderer({
 17 |       antialias	: true,
 18 |       alpha: true
 19 |     });
 20 | 
 21 |     renderer.setClearColor(new THREE.Color('lightgrey'), 0)
 22 |     // renderer.setPixelRatio( 2 );
 23 |     renderer.setSize( window.innerWidth, window.innerHeight );
 24 |     renderer.domElement.style.position = 'absolute'
 25 |     renderer.domElement.style.top = '0px'
 26 |     renderer.domElement.style.left = '0px'
 27 |     document.body.appendChild( renderer.domElement ); // We should be able to specify an html element to append AR.js related elements to.
 28 | 
 29 |     // array of functions for the rendering loop
 30 |     var onRenderFcts= [];
 31 | 
 32 |     // init scene and camera
 33 |     var scene	= new THREE.Scene();
 34 | 
 35 |     //////////////////////////////////////////////////////////////////////////////////
 36 |     //		Initialize a basic camera
 37 |     //////////////////////////////////////////////////////////////////////////////////
 38 | 
 39 |     // Create a camera
 40 |     var camera = new THREE.Camera();
 41 |     scene.add(camera);
 42 |     const artoolkitProfile = new ArToolkitProfile();
 43 |     artoolkitProfile.sourceWebcam(); // Is there good reason for having a function to set the sourceWebcam but not the displayWidth/Height etc?
 44 |     
 45 |     // add existing parameters, this is not well documented
 46 |     let additionalParameters = {
 47 |         // Device id of the camera to use (optional)
 48 |         deviceId: null,
 49 |         // resolution of at which we initialize in the source image
 50 |         sourceWidth: 640,
 51 |         sourceHeight: 480,
 52 |         // resolution displayed for the source
 53 |         displayWidth: 640,
 54 |         displayHeight: 480,
 55 |     }
 56 |     
 57 |     Object.assign(artoolkitProfile.sourceParameters, additionalParameters);
 58 |     console.log(artoolkitProfile.sourceParameters); // now includes the additionalParameters
 59 | 
 60 |     const arToolkitSource = new ArToolkitSource(artoolkitProfile.sourceParameters);
 61 | 
 62 |     arToolkitSource.init(function onReady(){
 63 |       onResize();
 64 |     })
 65 | 
 66 |     // handle resize
 67 |     window.addEventListener('resize', function(){
 68 |       onResize(); 
 69 |     })
 70 | 
 71 |     // resize is not called for the canvas on init. The canvas with the cube seems to be resized correctly at start.
 72 |     // Is that maybe a vue-specific problem?
 73 |     function onResize(){
 74 |       arToolkitSource.onResizeElement()
 75 |       arToolkitSource.copyElementSizeTo(renderer.domElement)
 76 |       if(arToolkitContext.arController !== null){
 77 |         arToolkitSource.copyElementSizeTo(arToolkitContext.arController.canvas)
 78 |       }
 79 |     }
 80 |       
 81 | 
 82 |     ////////////////////////////////////////////////////////////////////////////////
 83 |     //          initialize arToolkitContext
 84 |     ////////////////////////////////////////////////////////////////////////////////
 85 | 
 86 |     // create atToolkitContext
 87 |     var arToolkitContext = new ArToolkitContext({
 88 |       debug: false,
 89 |       cameraParametersUrl: ArToolkitContext.baseURL + 'data/camera_para.dat',
 90 |       detectionMode: 'mono',
 91 |       canvasWidth: 640,
 92 |       canvasHeight: 490,
 93 |       imageSmoothingEnabled : true, // There is still a warning about mozImageSmoothingEnabled when using Firefox
 94 |     })
 95 |     
 96 |     // initialize it
 97 |     arToolkitContext.init(function onCompleted(){
 98 |       // copy projection matrix to camera
 99 |       camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
100 |     })
101 | 
102 |     // update artoolkit on every frame
103 |     onRenderFcts.push(function(){
104 |       if( arToolkitSource.ready === false )	return
105 | 
106 |       arToolkitContext.update( arToolkitSource.domElement )
107 |     })
108 | 
109 |     ////////////////////////////////////////////////////////////////////////////////
110 |     //          Create a ArMarkerControls
111 |     ////////////////////////////////////////////////////////////////////////////////
112 | 
113 |     var markerGroup = new THREE.Group()
114 |     scene.add(markerGroup)
115 | 
116 |     var markerControls = new ArMarkerControls(arToolkitContext, markerGroup, {
117 |       type: 'pattern',
118 |       patternUrl: ArToolkitContext.baseURL + 'data/patt.hiro',
119 |       smooth: true,
120 |       smoothCount: 5,
121 |       smoothTolerance: 0.01,
122 |       smoothThreshold: 2
123 |     })
124 | 
125 |     //////////////////////////////////////////////////////////////////////////////////
126 |     //		add an object in the scene
127 |     //////////////////////////////////////////////////////////////////////////////////
128 | 
129 |     var markerScene = new THREE.Scene()
130 |     markerGroup.add(markerScene)
131 | 
132 |     var mesh = new THREE.AxesHelper()
133 |     markerScene.add(mesh)
134 | 
135 |     // add a torus knot
136 |     var geometry	= new THREE.BoxGeometry(1,1,1);
137 |     var material	= new THREE.MeshNormalMaterial({
138 |       transparent : true,
139 |       opacity: 0.5,
140 |       side: THREE.DoubleSide
141 |     });
142 |     var mesh	= new THREE.Mesh( geometry, material );
143 |     mesh.position.y	= geometry.parameters.height/2
144 |     markerScene.add(mesh)
145 | 
146 |     var geometry	= new THREE.TorusKnotGeometry(0.3,0.1,64,16);
147 |     var material	= new THREE.MeshNormalMaterial();
148 |     var mesh	= new THREE.Mesh( geometry, material );
149 |     mesh.position.y	= 0.5
150 |     markerScene.add( mesh );
151 | 
152 |     onRenderFcts.push(function(delta){
153 |       mesh.rotation.x += delta * Math.PI
154 |     })
155 | 
156 |     //////////////////////////////////////////////////////////////////////////////////
157 |     //		render the whole thing on the page
158 |     //////////////////////////////////////////////////////////////////////////////////
159 |     onRenderFcts.push(function(){
160 |       renderer.render(scene, camera);
161 |     })
162 | 
163 |       // run the rendering loop
164 |     var lastTimeMsec = null;
165 |     requestAnimationFrame(function animate(nowMsec){
166 |       // keep looping
167 |       requestAnimationFrame(animate);
168 |       // measure time
169 |       lastTimeMsec	= lastTimeMsec || nowMsec-1000/60
170 |       var deltaMsec	= Math.min(200, nowMsec - lastTimeMsec)
171 |       lastTimeMsec	= nowMsec
172 |       // call each update function
173 |       onRenderFcts.forEach(function(onRenderFct){
174 |         onRenderFct(deltaMsec/1000, nowMsec/1000)
175 |       })
176 |     })
177 |     }
178 | }
179 | </script>
180 | 
181 | <style>
182 | 
183 | </style>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: function (h) { return h(App) },
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------