Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
cqiang1993
AR.js
提交
5880314c
A
AR.js
项目概览
cqiang1993
/
AR.js
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
A
AR.js
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
5880314c
编写于
6月 18, 2017
作者:
J
Jerome Etienne
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
bring augmenting-webpages
上级
f239c2c2
变更
13
显示空白变更内容
内联
并排
Showing
13 changed file
with
761 addition
and
21 deletion
+761
-21
TODO.md
TODO.md
+2
-0
three.js/examples/arbackend-switch.html
three.js/examples/arbackend-switch.html
+1
-1
three.js/examples/multi-markers/augmenting-webpages/README.md
...e.js/examples/multi-markers/augmenting-webpages/README.md
+2
-0
three.js/examples/multi-markers/augmenting-webpages/TODO.md
three.js/examples/multi-markers/augmenting-webpages/TODO.md
+58
-0
three.js/examples/multi-markers/augmenting-webpages/landingPage/index.html
.../multi-markers/augmenting-webpages/landingPage/index.html
+66
-0
three.js/examples/multi-markers/augmenting-webpages/markerPage/index.html
...s/multi-markers/augmenting-webpages/markerPage/index.html
+46
-0
three.js/examples/multi-markers/augmenting-webpages/markerPage/manual.html
.../multi-markers/augmenting-webpages/markerPage/manual.html
+41
-0
three.js/examples/multi-markers/augmenting-webpages/screenAsPortal/images/box.png
...markers/augmenting-webpages/screenAsPortal/images/box.png
+0
-0
three.js/examples/multi-markers/augmenting-webpages/screenAsPortal/images/target.png
...kers/augmenting-webpages/screenAsPortal/images/target.png
+0
-0
three.js/examples/multi-markers/augmenting-webpages/screenAsPortal/js/threex-screenasportal.js
...nting-webpages/screenAsPortal/js/threex-screenasportal.js
+139
-0
three.js/examples/multi-markers/augmenting-webpages/screenAsPortal/screenAsPortal.html
...rs/augmenting-webpages/screenAsPortal/screenAsPortal.html
+374
-0
three.js/examples/multi-markers/threex-armultimarkercontrols.js
...js/examples/multi-markers/threex-armultimarkercontrols.js
+22
-4
three.js/threex-artoolkitcontext.js
three.js/threex-artoolkitcontext.js
+10
-16
未找到文件。
TODO.md
浏览文件 @
5880314c
-
port webvr-arbackend
-
port webvr-arbackend
-
rename THREEx.ArToolkitContext.getProjectionMatrix into .getArtoolkitProjectMatrix
-
rename THREEx.ArToolkitContext.getProjectionMatrix into .getArtoolkitProjectMatrix
-
three.js/vendor/threex-aruco => three.js/threex/threex-aruco
-
three.js/vendor/threex-aruco => three.js/threex/threex-aruco
---
---
-
DONE make multi-markers to support aruco too
-
DONE make multi-markers to support aruco too
...
...
three.js/examples/arbackend-switch.html
浏览文件 @
5880314c
...
@@ -92,7 +92,7 @@
...
@@ -92,7 +92,7 @@
// to read from the webcam
// to read from the webcam
// sourceType : 'webcam',
// sourceType : 'webcam',
//
//
to read from an image
// to read from an image
sourceType
:
'
image
'
,
sourceType
:
'
image
'
,
sourceUrl
:
THREEx
.
ArToolkitContext
.
baseURL
+
'
../data/images/img.jpg
'
,
sourceUrl
:
THREEx
.
ArToolkitContext
.
baseURL
+
'
../data/images/img.jpg
'
,
...
...
three.js/examples/multi-markers/augmenting-webpages/README.md
0 → 100644
浏览文件 @
5880314c
-
use mate screen
-
read this post about
[
Augmenting the webpage
](
https://medium.com/arjs/augmenting-the-web-page-e893f2d199b8
)
three.js/examples/multi-markers/augmenting-webpages/TODO.md
0 → 100644
浏览文件 @
5880314c
-
screenAsPortal - put a border like with hublo 360
-
add description in landing pages
-
if isMobile, 'please open this url on desktop, then click here' - goto arApp
-
if isMobile === false, 'please open this url on phone, (or scan qrcode), and click here' - goto markerPage
-
add qrCode in landingPage
-
landingPage got a arPageUrl (for qrCode)
-
handle webar-playground parameters in the qrCode
-
add description in marker pages
-
move it all to ar.js three.js/examples/multi-markers/augmenting-webpages
-
make an example in multi marker
-
examples/screenAsPortal.html
-
with usual lee demo
---
-
THREEx.ArMultiMarkerControls.computeBoundingBox(jsonData)
-
similar to THREEx.ArMultiMarkerControls.computeCenter
-
from this function, you get -0.5 - 0.1 (white margin) on x,z
-
and you get the dimension of the screen
-
display a plane on top of the screen as you see it
-
gather back a hole in a wall
- with usual lee demo
---------------------------------------------------
# in marker pages
-
marker page is mainly running on desktop
-
what is a good marker pages ?
-
i got the dimension of the screen deducable from the markers position/size
-
it can be read on desktop, tablet, phone
-
the AR is centered in the middle of the screen
-
toggle to go fullscreen
---------------------------------------------------
-
DONE put all that in its own folder
-
markers-on-screen
-
put multi marker on screen
-
with a qrcode for the phone - it is there only at the begining
-
you arrive, there is a url+qrcode for the phone in a popup
-
then you scan the qrcode, and close the popup
-
there is big markers on the screens (usable from far)
-
you edit on this scene
-
with webar-editor, you learn this area and edit on it
-
later you build the url of the application based on the dimension of the screen
-
thus you dont need to learn it
-
link it from the home page!
-
get the marker definition in the url of the app.html
-
thus when you arrive on the homepage with a saved scene, i add the marker definition to the url
-
so any url will get a good marker definition no matter the screen size
---
-
detection seems bad super bad... how come ? because it is on screen ?
-
if so, i can change the color of the screen and use this
-
i can do thresholding
-
augmenting the screen is a big case
-
display debug and see
three.js/examples/multi-markers/augmenting-webpages/landingPage/index.html
0 → 100644
浏览文件 @
5880314c
<link
rel=
"stylesheet"
href=
"https://fonts.googleapis.com/icon?family=Material+Icons"
>
<link
rel=
"stylesheet"
href=
"https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"
>
<script
defer
src=
"https://code.getmdl.io/1.3.0/material.min.js"
></script>
<!-- https://davidshimjs.github.io/qrcodejs/ -->
<script
src=
'https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js'
></script>
<body>
<div
id=
'descriptionForDesktop'
>
<h2>
You are on Desktop
</h2>
<div
id=
"qrCodeContainer"
>
</div>
</div>
<div
id=
'descriptionForPhone'
>
<h2>
You are on Phone
</h2>
</div>
<div
id=
"arAppURLView"
>
</div>
<a
id=
"arAppURLLink"
href=
'javascript:void(0)'
>
<button
class=
"mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"
>
WebAR App
</button>
</a>
<a
href=
'../markerPage/index.html'
>
<button
class=
"mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"
>
Marker Page
</button>
</a>
<script>
// goto the proper landing page depending on where you run
var
isMobile
=
'
ontouchstart
'
in
window
===
true
?
true
:
false
// document.querySelector('#currentPlatform').innerHTML = isMobile ? 'mobile' : 'desktop'
</script>
<script
type=
"text/javascript"
>
var
arAppURL
=
'
https://jeromeetienne.github.io/webar-playground/
'
var
arAppURL
=
'
../screenAsPortal/screenAsPortal.html
'
// TODO take url from hash is available
document
.
body
.
querySelector
(
'
#arAppURLView
'
).
innerHTML
=
arAppURL
document
.
body
.
querySelector
(
'
#arAppURLLink
'
).
href
=
arAppURL
if
(
isMobile
===
false
){
var
container
=
document
.
createElement
(
'
div
'
)
var
qrcode
=
new
QRCode
(
container
,
{
text
:
arAppURL
,
width
:
256
,
height
:
256
,
colorDark
:
'
#000000
'
,
colorLight
:
'
#ffffff
'
,
});
var
qrCodeImage
=
container
.
querySelector
(
'
img
'
)
qrCodeImage
.
style
.
margin
=
'
3em
'
document
.
body
.
querySelector
(
'
#qrCodeContainer
'
).
appendChild
(
qrCodeImage
)
}
document
.
body
.
querySelector
(
'
#descriptionForDesktop
'
).
style
.
display
=
isMobile
===
false
?
'
inherit
'
:
'
none
'
document
.
body
.
querySelector
(
'
#descriptionForPhone
'
).
style
.
display
=
isMobile
===
true
?
'
inherit
'
:
'
none
'
</script>
</body>
three.js/examples/multi-markers/augmenting-webpages/markerPage/index.html
0 → 100644
浏览文件 @
5880314c
<!DOCTYPE html>
<link
rel=
"stylesheet"
href=
"https://fonts.googleapis.com/icon?family=Material+Icons"
>
<link
rel=
"stylesheet"
href=
"https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"
>
<script
defer
src=
"https://code.getmdl.io/1.3.0/material.min.js"
></script>
<style
media=
'screen'
>
body
{
background-color
:
#444
;
}
.marker-image
{
max-height
:
40%
;
}
.marker-hiro
{
position
:
fixed
;
top
:
50%
;
left
:
50%
;
/* bring your own prefixes */
transform
:
translate
(
-50%
,
-50%
);
}
.marker-letterA
{
position
:
fixed
;
top
:
0
;
left
:
0
;
}
.marker-letterB
{
position
:
fixed
;
top
:
0
;
right
:
0
;
}
.marker-letterC
{
position
:
fixed
;
bottom
:
0
;
left
:
0
;
}
.marker-letterF
{
position
:
fixed
;
bottom
:
0
;
right
:
0
;
}
</style>
<body>
<img
class=
'marker-hiro marker-image'
src=
'../../../marker-training/examples/pattern-images/pattern-hiro.png'
>
<img
class=
'marker-letterA marker-image'
src=
'../../../marker-training/examples/pattern-images/pattern-letterA.png'
>
<img
class=
'marker-letterB marker-image'
src=
'../../../marker-training/examples/pattern-images/pattern-letterB.png'
>
<img
class=
'marker-letterC marker-image'
src=
'../../../marker-training/examples/pattern-images/pattern-letterC.png'
>
<img
class=
'marker-letterF marker-image'
src=
'../../../marker-training/examples/pattern-images/pattern-letterF.png'
>
</body>
three.js/examples/multi-markers/augmenting-webpages/markerPage/manual.html
0 → 100644
浏览文件 @
5880314c
<!DOCTYPE html>
<style
media=
'screen'
>
body
{
background-color
:
#444
;
}
.marker-image
{
max-height
:
40%
;
}
.marker-hiro
{
position
:
fixed
;
top
:
30%
;
left
:
35%
;
}
.marker-letterA
{
position
:
fixed
;
top
:
2em
;
left
:
2em
;
}
.marker-letterB
{
position
:
fixed
;
top
:
2em
;
right
:
2em
;
}
.marker-letterC
{
position
:
fixed
;
bottom
:
2em
;
left
:
2em
;
}
.marker-letterF
{
position
:
fixed
;
bottom
:
2em
;
right
:
2em
;
}
</style>
<body>
<img
class=
'marker-hiro marker-image'
src=
'../../../marker-training/examples/pattern-images/pattern-hiro.png'
>
<img
class=
'marker-letterA marker-image'
src=
'../../../marker-training/examples/pattern-images/pattern-letterA.png'
>
<img
class=
'marker-letterB marker-image'
src=
'../../../marker-training/examples/pattern-images/pattern-letterB.png'
>
<img
class=
'marker-letterC marker-image'
src=
'../../../marker-training/examples/pattern-images/pattern-letterC.png'
>
<img
class=
'marker-letterF marker-image'
src=
'../../../marker-training/examples/pattern-images/pattern-letterF.png'
>
</body>
three.js/examples/multi-markers/augmenting-webpages/screenAsPortal/images/box.png
0 → 100644
浏览文件 @
5880314c
6.6 KB
three.js/examples/multi-markers/augmenting-webpages/screenAsPortal/images/target.png
0 → 100644
浏览文件 @
5880314c
6.2 KB
three.js/examples/multi-markers/augmenting-webpages/screenAsPortal/js/threex-screenasportal.js
0 → 100644
浏览文件 @
5880314c
var
THREEx
=
THREEx
||
{}
THREEx
.
ScreenAsPortal
=
function
(
multiMarkerFile
,
screenDepth
){
var
_this
=
this
this
.
object3d
=
new
THREE
.
Group
// init render loop
this
.
_onRenderFcts
=
[]
this
.
update
=
function
(){
_this
.
_onRenderFcts
.
forEach
(
function
(
onRenderFct
){
onRenderFct
()
})
}
// compute screenSize
var
markerSize
=
1
var
whiteMargin
=
0.125
*
2
var
boundingBox
=
THREEx
.
ArMultiMarkerControls
.
computeBoundingBox
(
multiMarkerFile
)
boundingBox
.
min
.
x
-=
markerSize
/
2
+
whiteMargin
boundingBox
.
min
.
z
-=
markerSize
/
2
+
whiteMargin
boundingBox
.
max
.
x
+=
markerSize
/
2
+
whiteMargin
boundingBox
.
max
.
z
+=
markerSize
/
2
+
whiteMargin
var
screenSize
=
boundingBox
.
getSize
()
initCube
()
addTargets
()
addBorders
()
return
function
initCube
(){
// add outter cube - invisibility cloak
var
geometry
=
new
THREE
.
BoxGeometry
(
screenSize
.
x
,
screenDepth
,
screenSize
.
z
)
geometry
.
faces
.
splice
(
4
,
2
);
// make hole by removing top two triangles (is this assumption stable?)
var
material
=
new
THREE
.
MeshBasicMaterial
({
colorWrite
:
false
// only write to z-buf
})
var
outterCubeMesh
=
new
THREE
.
Mesh
(
geometry
,
material
);
outterCubeMesh
.
scale
.
set
(
1.04
,
1
,
1.04
)
outterCubeMesh
.
position
.
y
=
-
geometry
.
parameters
.
height
/
2
_this
.
object3d
.
add
(
outterCubeMesh
)
// add the inner box
var
textureBox
=
new
THREE
.
TextureLoader
().
load
(
'
images/box.png
'
)
textureBox
.
wrapS
=
THREE
.
RepeatWrapping
;
textureBox
.
wrapT
=
THREE
.
RepeatWrapping
;
textureBox
.
repeat
.
set
(
15
,
20
);
// textureBox.anisotropy = renderer.getMaxAnisotropy();
textureBox
.
anisotropy
=
16
;
var
geometry
=
new
THREE
.
BoxGeometry
(
screenSize
.
x
,
screenDepth
,
screenSize
.
z
);
var
material
=
new
THREE
.
MeshBasicMaterial
({
side
:
THREE
.
BackSide
,
map
:
textureBox
,
color
:
'
cyan
'
,
});
var
innerBoxMesh
=
new
THREE
.
Mesh
(
geometry
,
material
);
innerBoxMesh
.
position
.
y
=
-
geometry
.
parameters
.
height
/
2
_this
.
object3d
.
add
(
innerBoxMesh
);
}
function
addTargets
(){
// add the inner box
var
geometry
=
new
THREE
.
PlaneGeometry
(
0.8
,
0.8
).
rotateX
(
-
Math
.
PI
/
2
);
var
material
=
new
THREE
.
MeshBasicMaterial
({
side
:
THREE
.
DoubleSide
,
map
:
new
THREE
.
TextureLoader
().
load
(
'
images/target.png
'
),
alphaTest
:
0.9
,
});
var
targetModel
=
new
THREE
.
Mesh
(
geometry
,
material
);
// create a blue LineBasicMaterial
var
lineMaterial
=
new
THREE
.
LineBasicMaterial
({
color
:
0x0000ff
});
var
nTargets
=
8
;
for
(
var
i
=
0
;
i
<
nTargets
;
i
++
){
var
positionX
=
(
Math
.
random
()
-
0.5
)
*
(
screenSize
.
x
-
targetModel
.
geometry
.
parameters
.
width
)
var
positionZ
=
(
Math
.
random
()
-
0.5
)
*
(
screenSize
.
z
-
targetModel
.
geometry
.
parameters
.
height
)
var
height
=
screenDepth
*
0.25
+
Math
.
random
()
*
(
screenDepth
*
1.5
)
addTarget
(
positionX
,
positionZ
,
height
)
}
return
function
addTarget
(
positionX
,
positionZ
,
height
){
var
geometry
=
new
THREE
.
Geometry
();
geometry
.
vertices
.
push
(
new
THREE
.
Vector3
(
0
,
0
,
0
));
geometry
.
vertices
.
push
(
new
THREE
.
Vector3
(
0
,
height
-
0.1
,
0
));
var
line
=
new
THREE
.
Line
(
geometry
,
lineMaterial
);
line
.
position
.
x
=
positionX
line
.
position
.
y
=
-
screenDepth
line
.
position
.
z
=
positionZ
_this
.
object3d
.
add
(
line
)
var
target
=
targetModel
.
clone
()
target
.
position
.
copy
(
line
.
position
)
target
.
position
.
y
+=
height
_this
.
object3d
.
add
(
target
)
}
}
//////////////////////////////////////////////////////////////////////////////
// addBorders
//////////////////////////////////////////////////////////////////////////////
function
addBorders
(){
var
thickNess
=
0.1
var
material
=
new
THREE
.
MeshNormalMaterial
()
var
material
=
new
THREE
.
MeshBasicMaterial
({
color
:
'
black
'
})
// top border
var
geometry
=
new
THREE
.
BoxGeometry
(
screenSize
.
x
,
thickNess
,
thickNess
).
rotateX
(
Math
.
PI
/
4
);
var
mesh
=
new
THREE
.
Mesh
(
geometry
,
material
)
mesh
.
position
.
y
=
+
thickNess
/
2
mesh
.
position
.
z
=
-
screenSize
.
z
/
2
_this
.
object3d
.
add
(
mesh
)
// bottom border
var
mesh
=
new
THREE
.
Mesh
(
geometry
,
material
)
mesh
.
position
.
y
=
+
thickNess
/
2
mesh
.
position
.
z
=
+
screenSize
.
z
/
2
_this
.
object3d
.
add
(
mesh
)
// left border
var
geometry
=
new
THREE
.
BoxGeometry
(
thickNess
,
thickNess
,
screenSize
.
z
).
rotateZ
(
Math
.
PI
/
4
);
var
mesh
=
new
THREE
.
Mesh
(
geometry
,
material
)
mesh
.
position
.
y
=
+
thickNess
/
2
mesh
.
position
.
x
=
-
screenSize
.
x
/
2
_this
.
object3d
.
add
(
mesh
)
// right border
var
mesh
=
new
THREE
.
Mesh
(
geometry
,
material
)
mesh
.
position
.
y
=
+
thickNess
/
2
mesh
.
position
.
x
=
+
screenSize
.
x
/
2
_this
.
object3d
.
add
(
mesh
)
}
}
three.js/examples/multi-markers/augmenting-webpages/screenAsPortal/screenAsPortal.html
0 → 100644
浏览文件 @
5880314c
<!DOCTYPE html>
<meta
name=
'viewport'
content=
'width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'
>
<!-- three.js library -->
<script
src=
'../../../vendor/three.js/build/three.js'
></script>
<script
src=
'../../../vendor/three.js/examples/js/libs/stats.min.js'
></script>
<!-- jsartookit -->
<script
src=
'../../../../vendor/jsartoolkit5/build/artoolkit.min.js'
></script>
<script
src=
'../../../../vendor/jsartoolkit5/js/artoolkit.api.js'
></script>
<!-- aruco -->
<script
src=
'../../../../vendor/js-aruco/src/svd.js'
></script>
<script
src=
'../../../../vendor/js-aruco/src/posit1.js'
></script>
<script
src=
'../../../../vendor/js-aruco/src/cv.js'
></script>
<script
src=
'../../../../vendor/js-aruco/src/aruco.js'
></script>
<script
src=
'../../../../vendor/threex-aruco/threex-arucocontext.js'
></script>
<script
src=
'../../../../vendor/threex-aruco/threex-arucodebug.js'
></script>
<!-- include threex.artoolkit -->
<script
src=
'../../../../threex-artoolkitsource.js'
></script>
<script
src=
'../../../../threex-artoolkitcontext.js'
></script>
<script
src=
'../../../../threex-artoolkitprofile.js'
></script>
<script
src=
'../../../../threex-arbasecontrols.js'
></script>
<script
src=
'../../../../threex-armarkercontrols.js'
></script>
<script
src=
'../../../../threex-armarkerhelper.js'
></script>
<script
src=
'../../../../threex-arsmoothedcontrols.js'
></script>
<script>
THREEx
.
ArToolkitContext
.
baseURL
=
'
../../../../
'
</script>
<script
src=
'../../threex-armultimarkercontrols.js'
></script>
<script
src=
'../../threex-armultimarkerlearning.js'
></script>
<script
src=
'js/threex-screenasportal.js'
></script>
<style>
#recordButton
:hover
{
cursor
:
pointer
;
}
</style>
<body
style=
'margin : 0px; overflow: hidden; font-family: Monospace;'
><div
style=
'position: absolute; top: 10px; width:100%; text-align: center;z-index:1'
;
>
<a
href=
'https://github.com/jeromeetienne/AR.js/'
target=
'_blank'
>
AR.js
</a>
- Multi marker
by
<a
href=
'https://twitter.com/jerome_etienne'
target=
'_blank'
>
@jerome_etienne
</a>
</div>
<div
style=
'position: fixed; bottom: 10px; width:100%; text-align: center;z-index:1'
;
>
Area source:
<a
href=
'javascript:void(0)'
onclick=
'urlOptions.areaSource = "localStorage"; reload()'
>
localStorage
</a>
/
<a
href=
'javascript:void(0)'
onclick=
'urlOptions.areaSource = "hardcodedSingle"; reload()'
>
hardcodedSingle
</a>
<br>
ar backend:
<a
href=
'javascript:void(0)'
onclick=
'urlOptions.arBackend = "artoolkit"; reload()'
>
artoolkit
</a>
/
<a
href=
'javascript:void(0)'
onclick=
'urlOptions.arBackend = "aruco"; reload()'
>
aruco
</a>
<br>
Marker helpers:
<a
href=
'javascript:void(0)'
onclick=
'urlOptions.markerHelpers = true; reload()'
>
yes
</a>
/
<a
href=
'javascript:void(0)'
onclick=
'urlOptions.markerHelpers = false; reload()'
>
no
</a>
</div>
<div
style=
'position: fixed; bottom: 16px; right: 16px; z-index:1'
;
>
<img
id=
'recordButton'
src=
"../../examples/images/record-start.png"
width=
'64px'
height=
'64px'
>
</div>
<script>
;(
function
(){
//////////////////////////////////////////////////////////////////////////////////
// Init
//////////////////////////////////////////////////////////////////////////////////
// init renderer
var
renderer
=
new
THREE
.
WebGLRenderer
({
alpha
:
true
});
renderer
.
setClearColor
(
new
THREE
.
Color
(
'
lightgrey
'
),
0
)
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
renderer
.
domElement
.
style
.
position
=
'
absolute
'
renderer
.
domElement
.
style
.
top
=
'
0px
'
renderer
.
domElement
.
style
.
left
=
'
0px
'
document
.
body
.
appendChild
(
renderer
.
domElement
);
// array of functions for the rendering loop
var
onRenderFcts
=
[];
// init scene and camera
var
scene
=
new
THREE
.
Scene
();
var
ambient
=
new
THREE
.
AmbientLight
(
0x666666
);
scene
.
add
(
ambient
);
var
directionalLight
=
new
THREE
.
DirectionalLight
(
0x887766
);
directionalLight
.
position
.
set
(
-
1
,
1
,
1
).
normalize
();
scene
.
add
(
directionalLight
);
////////////////////////////////////////////////////////////////////////////////
// handle urlOptions
////////////////////////////////////////////////////////////////////////////////
var
hasHash
=
location
.
hash
.
substring
(
1
)
!==
''
?
true
:
false
if
(
hasHash
===
true
){
var
urlOptions
=
JSON
.
parse
(
location
.
hash
.
substring
(
1
))
}
else
{
var
urlOptions
=
{
areaSource
:
'
localStorage
'
,
arBackend
:
'
artoolkit
'
,
markerHelpers
:
false
,
}
}
window
.
urlOptions
=
urlOptions
urlOptionsUpdate
()
window
.
reload
=
function
(){
urlOptionsUpdate
()
location
.
reload
()
}
function
urlOptionsUpdate
(){
location
.
hash
=
'
#
'
+
JSON
.
stringify
(
urlOptions
)
}
if
(
urlOptions
.
areaSource
===
'
localStorage
'
&&
localStorage
.
getItem
(
'
ARjsMultiMarkerFile
'
)
===
null
){
alert
(
'
No area has been learned on this device!
\n
Using only hardcoded single marker hiro/1001.
'
)
urlOptions
.
areaSource
===
'
hardcodedSingle
'
urlOptionsUpdate
()
}
//////////////////////////////////////////////////////////////////////////////////
// Initialize a basic camera
//////////////////////////////////////////////////////////////////////////////////
// Create a camera
if
(
urlOptions
.
arBackend
===
'
aruco
'
){
var
camera
=
new
THREE
.
PerspectiveCamera
(
42
,
renderer
.
domElement
.
width
/
renderer
.
domElement
.
height
,
0.01
,
100
);
}
else
if
(
urlOptions
.
arBackend
===
'
artoolkit
'
){
var
camera
=
new
THREE
.
Camera
();
}
else
console
.
assert
(
false
)
scene
.
add
(
camera
);
////////////////////////////////////////////////////////////////////////////////
// handle arToolkitSource
////////////////////////////////////////////////////////////////////////////////
var
artoolkitProfile
=
new
THREEx
.
ArToolkitProfile
()
artoolkitProfile
.
sourceWebcam
()
.
performance
(
'
desktop
'
)
var
arToolkitSource
=
new
THREEx
.
ArToolkitSource
(
artoolkitProfile
.
sourceParameters
)
arToolkitSource
.
init
(
function
onReady
(){
onResize
()
})
// handle resize
window
.
addEventListener
(
'
resize
'
,
function
(){
onResize
()
})
function
onResize
(){
arToolkitSource
.
onResize
()
arToolkitSource
.
copySizeTo
(
renderer
.
domElement
)
if
(
urlOptions
.
arBackend
===
'
aruco
'
){
arToolkitSource
.
copySizeTo
(
arToolkitContext
.
arucoContext
.
canvas
)
camera
.
aspect
=
renderer
.
domElement
.
width
/
renderer
.
domElement
.
height
;
camera
.
updateProjectionMatrix
();
}
else
if
(
urlOptions
.
arBackend
===
'
artoolkit
'
){
if
(
arToolkitContext
.
arController
!==
null
){
arToolkitSource
.
copySizeTo
(
arToolkitContext
.
arController
.
canvas
)
}
}
else
console
.
assert
(
false
)
}
////////////////////////////////////////////////////////////////////////////////
// initialize arToolkitContext
////////////////////////////////////////////////////////////////////////////////
// honor urlOptions.arBackend
artoolkitProfile
.
contextParameters
.
arBackend
=
urlOptions
.
arBackend
// create atToolkitContext
var
arToolkitContext
=
new
THREEx
.
ArToolkitContext
(
artoolkitProfile
.
contextParameters
)
// initialize it
arToolkitContext
.
init
(
function
onCompleted
(){
// if artoolkit, copy projection matrix to camera
if
(
arToolkitContext
.
parameters
.
arBackend
===
'
artoolkit
'
){
camera
.
projectionMatrix
.
copy
(
arToolkitContext
.
getProjectionMatrix
()
);
}
})
// update artoolkit on every frame
onRenderFcts
.
push
(
function
(){
if
(
arToolkitSource
.
ready
===
false
)
return
arToolkitContext
.
update
(
arToolkitSource
.
domElement
)
})
//////////////////////////////////////////////////////////////////////////////
// init learnerParameters and markersControlsParameters
//////////////////////////////////////////////////////////////////////////////
if
(
urlOptions
.
arBackend
===
'
artoolkit
'
){
// pattern hiro/kanji/a/b/c/f
var
patternBaseUrl
=
location
.
protocol
+
'
//
'
+
location
.
host
+
'
/three.js/
'
var
markersControlsParameters
=
[
{
type
:
'
pattern
'
,
patternUrl
:
patternBaseUrl
+
'
examples/marker-training/examples/pattern-files/pattern-hiro.patt
'
,
},
{
type
:
'
pattern
'
,
patternUrl
:
patternBaseUrl
+
'
examples/marker-training/examples/pattern-files/pattern-kanji.patt
'
,
},
{
type
:
'
pattern
'
,
patternUrl
:
patternBaseUrl
+
'
examples/marker-training/examples/pattern-files/pattern-letterA.patt
'
,
},
{
type
:
'
pattern
'
,
patternUrl
:
patternBaseUrl
+
'
examples/marker-training/examples/pattern-files/pattern-letterB.patt
'
,
},
{
type
:
'
pattern
'
,
patternUrl
:
patternBaseUrl
+
'
examples/marker-training/examples/pattern-files/pattern-letterC.patt
'
,
},
{
type
:
'
pattern
'
,
patternUrl
:
patternBaseUrl
+
'
examples/marker-training/examples/pattern-files/pattern-letterF.patt
'
,
},
]
}
else
if
(
urlOptions
.
arBackend
===
'
aruco
'
){
var
markersControlsParameters
=
[
{
type
:
'
barcode
'
,
barcodeValue
:
1001
,
},
{
type
:
'
barcode
'
,
barcodeValue
:
1002
,
},
{
type
:
'
barcode
'
,
barcodeValue
:
1003
,
},
{
type
:
'
barcode
'
,
barcodeValue
:
1004
,
},
{
type
:
'
barcode
'
,
barcodeValue
:
1005
,
},
{
type
:
'
barcode
'
,
barcodeValue
:
1006
,
},
]
}
else
console
.
assert
(
false
)
document
.
querySelector
(
'
#recordButton
'
).
addEventListener
(
'
click
'
,
function
(){
urlOptions
.
areaSource
=
'
localStorage
'
urlOptionsUpdate
()
var
learnerParameters
=
{
backURL
:
location
.
href
,
arBackend
:
urlOptions
.
arBackend
,
markersControlsParameters
:
markersControlsParameters
,
}
location
.
href
=
THREEx
.
ArToolkitContext
.
baseURL
+
'
examples/multi-markers/examples/learner.html#
'
+
JSON
.
stringify
(
learnerParameters
)
})
//////////////////////////////////////////////////////////////////////////////
// get multiMarkerFile
//////////////////////////////////////////////////////////////////////////////
if
(
urlOptions
.
areaSource
===
'
localStorage
'
){
console
.
assert
(
localStorage
.
getItem
(
'
ARjsMultiMarkerFile
'
)
!==
null
)
var
multiMarkerFile
=
localStorage
.
getItem
(
'
ARjsMultiMarkerFile
'
)
}
else
if
(
urlOptions
.
areaSource
===
'
hardcodedSingle
'
){
if
(
urlOptions
.
arBackend
===
'
artoolkit
'
){
var
multiMarkerFile
=
JSON
.
stringify
({
subMarkersControls
:
[
{
parameters
:
{
type
:
'
pattern
'
,
patternUrl
:
THREEx
.
ArToolkitContext
.
baseURL
+
'
examples/marker-training/examples/pattern-files/pattern-hiro.patt
'
,
},
poseMatrix
:
new
THREE
.
Matrix4
().
makeTranslation
(
0
,
0
,
0
).
toArray
()
},
]
})
}
else
if
(
urlOptions
.
arBackend
===
'
aruco
'
){
var
multiMarkerFile
=
JSON
.
stringify
({
subMarkersControls
:
[
{
parameters
:
{
type
:
'
barcode
'
,
barcodeValue
:
1001
,
},
poseMatrix
:
new
THREE
.
Matrix4
().
makeTranslation
(
0
,
0
,
0
).
toArray
()
},
]
})
}
else
console
.
assert
(
false
)
}
else
{
console
.
assert
(
'
unknown areaSource
'
,
areaSource
)
}
//////////////////////////////////////////////////////////////////////////////
// Create ArMultiMarkerControls
//////////////////////////////////////////////////////////////////////////////
// build a markerRoot
var
markerRoot
=
new
THREE
.
Group
()
scene
.
add
(
markerRoot
)
// build a multiMarkerControls
var
multiMarkerControls
=
THREEx
.
ArMultiMarkerControls
.
fromJSON
(
arToolkitContext
,
scene
,
markerRoot
,
multiMarkerFile
)
// display THREEx.ArMarkerHelper if needed - useful to debug
if
(
urlOptions
.
markerHelpers
===
true
){
multiMarkerControls
.
subMarkersControls
.
forEach
(
function
(
subMarkerControls
){
// add an helper to visuable each sub-marker
var
markerHelper
=
new
THREEx
.
ArMarkerHelper
(
subMarkerControls
)
subMarkerControls
.
object3d
.
add
(
markerHelper
.
object3d
)
})
}
// build a smoothedControls
var
smoothedRoot
=
new
THREE
.
Group
()
scene
.
add
(
smoothedRoot
)
var
smoothedControls
=
new
THREEx
.
ArSmoothedControls
(
smoothedRoot
)
onRenderFcts
.
push
(
function
(
delta
){
// update smoothedControls parameters depending on how many markers are visible in multiMarkerControls
multiMarkerControls
.
updateSmoothedControls
(
smoothedControls
)
// update multiMarkerRoot position
smoothedControls
.
update
(
markerRoot
)
})
var
arWorldRoot
=
new
THREE
.
Group
()
var
averageMatrix
=
THREEx
.
ArMultiMarkerControls
.
computeCenter
(
multiMarkerFile
)
averageMatrix
.
decompose
(
arWorldRoot
.
position
,
arWorldRoot
.
quaternion
,
arWorldRoot
.
scale
)
smoothedRoot
.
add
(
arWorldRoot
)
//////////////////////////////////////////////////////////////////////////////////
// Add simple object on smoothedRoot
//////////////////////////////////////////////////////////////////////////////////
;(
function
(){
var
screenDepth
=
5
var
screenAsPortal
=
new
THREEx
.
ScreenAsPortal
(
multiMarkerFile
,
screenDepth
)
arWorldRoot
.
add
(
screenAsPortal
.
object3d
)
})()
//////////////////////////////////////////////////////////////////////////////////
// render the whole thing on the page
//////////////////////////////////////////////////////////////////////////////////
var
stats
=
new
Stats
();
// document.body.appendChild( stats.dom );
// render the scene
onRenderFcts
.
push
(
function
(){
renderer
.
render
(
scene
,
camera
);
stats
.
update
();
})
// run the rendering loop
var
lastTimeMsec
=
null
requestAnimationFrame
(
function
animate
(
nowMsec
){
// keep looping
requestAnimationFrame
(
animate
);
// measure time
lastTimeMsec
=
lastTimeMsec
||
nowMsec
-
1000
/
60
var
deltaMsec
=
Math
.
min
(
200
,
nowMsec
-
lastTimeMsec
)
lastTimeMsec
=
nowMsec
// call each update function
onRenderFcts
.
forEach
(
function
(
onRenderFct
){
onRenderFct
(
deltaMsec
/
1000
,
nowMsec
/
1000
)
})
})
})()
</script></body>
three.js/examples/multi-markers/threex-armultimarkercontrols.js
浏览文件 @
5880314c
...
@@ -181,6 +181,23 @@ THREEx.ArMultiMarkerControls.computeCenter = function(jsonData){
...
@@ -181,6 +181,23 @@ THREEx.ArMultiMarkerControls.computeCenter = function(jsonData){
return
averageMatrix
return
averageMatrix
}
}
THREEx
.
ArMultiMarkerControls
.
computeBoundingBox
=
function
(
jsonData
){
var
multiMarkerFile
=
JSON
.
parse
(
jsonData
)
var
boundingBox
=
new
THREE
.
Box3
()
multiMarkerFile
.
subMarkersControls
.
forEach
(
function
(
item
){
var
poseMatrix
=
new
THREE
.
Matrix4
().
fromArray
(
item
.
poseMatrix
)
var
position
=
new
THREE
.
Vector3
var
quaternion
=
new
THREE
.
Quaternion
var
scale
=
new
THREE
.
Vector3
poseMatrix
.
decompose
(
position
,
quaternion
,
scale
)
boundingBox
.
expandByPoint
(
position
)
})
return
boundingBox
}
//////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////
// updateSmoothedControls
// updateSmoothedControls
//////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////
...
@@ -189,10 +206,11 @@ THREEx.ArMultiMarkerControls.prototype.updateSmoothedControls = function(smoothe
...
@@ -189,10 +206,11 @@ THREEx.ArMultiMarkerControls.prototype.updateSmoothedControls = function(smoothe
// handle default values
// handle default values
if
(
lerpsValues
===
undefined
){
if
(
lerpsValues
===
undefined
){
lerpsValues
=
[
lerpsValues
=
[
[
0.7
,
0.1
,
0.3
],
[
0.4
,
0.1
,
0.3
],
[
0.7
,
0.1
,
0.4
],
[
0.4
,
0.1
,
0.4
],
[
0.8
,
0.2
,
0.5
],
[
0.4
,
0.2
,
0.5
],
[
0.8
,
0.2
,
0.7
],
[
0.4
,
0.2
,
0.7
],
[
0.4
,
0.2
,
0.7
],
]
]
}
}
// count how many subMarkersControls are visible
// count how many subMarkersControls are visible
...
...
three.js/threex-artoolkitcontext.js
浏览文件 @
5880314c
...
@@ -299,10 +299,10 @@ THREEx.ArToolkitContext.prototype._initTango = function(onCompleted){
...
@@ -299,10 +299,10 @@ THREEx.ArToolkitContext.prototype._initTango = function(onCompleted){
var
canvasElement
=
document
.
createElement
(
'
canvas
'
)
var
canvasElement
=
document
.
createElement
(
'
canvas
'
)
document
.
body
.
appendChild
(
canvasElement
)
document
.
body
.
appendChild
(
canvasElement
)
var
layers
=
[{
source
:
canvasElement
}]
var
layers
=
[{
source
:
canvasElement
}]
vrDisplay
.
requestPresent
(
layers
).
then
(
function
()
{
//
vrDisplay.requestPresent(layers).then(function() {
console
.
log
(
'
vrdisplay request accepted
'
)
//
console.log('vrdisplay request accepted')
});
//
});
// window.vrDisplay = vrDisplay
onCompleted
&&
onCompleted
()
onCompleted
&&
onCompleted
()
});
});
...
@@ -315,13 +315,12 @@ THREEx.ArToolkitContext.prototype._updateTango = function(srcElement){
...
@@ -315,13 +315,12 @@ THREEx.ArToolkitContext.prototype._updateTango = function(srcElement){
var
arMarkersControls
=
this
.
_arMarkersControls
var
arMarkersControls
=
this
.
_arMarkersControls
var
tangoContext
=
this
.
_tangoContext
var
tangoContext
=
this
.
_tangoContext
// console.log('update tango')
// check vrDisplay is already initialized
// check vrDisplay is already initialized
if
(
tangoContext
.
vrDisplay
===
null
)
return
if
(
tangoContext
.
vrDisplay
===
null
)
return
// console.log('update tango')
if
(
this
.
_arMarkersControls
.
length
===
0
)
return
if
(
this
.
_arMarkersControls
.
length
===
0
)
return
// console.log('update tango')
// TODO here do a fake search on barcode/1001 ?
var
foundControls
=
this
.
_arMarkersControls
[
0
]
var
foundControls
=
this
.
_arMarkersControls
[
0
]
...
@@ -330,21 +329,16 @@ THREEx.ArToolkitContext.prototype._updateTango = function(srcElement){
...
@@ -330,21 +329,16 @@ THREEx.ArToolkitContext.prototype._updateTango = function(srcElement){
// read frameData
// read frameData
tangoContext
.
vrDisplay
.
getFrameData
(
frameData
);
tangoContext
.
vrDisplay
.
getFrameData
(
frameData
);
var
cameraTransformMatrix
=
new
THREE
.
Matrix4
()
// create cameraTransformMatrix
var
position
=
new
THREE
.
Vector3
().
fromArray
(
frameData
.
pose
.
position
)
var
position
=
new
THREE
.
Vector3
().
fromArray
(
frameData
.
pose
.
position
)
var
quaternion
=
new
THREE
.
Quaternion
().
fromArray
(
frameData
.
pose
.
orientation
)
var
quaternion
=
new
THREE
.
Quaternion
().
fromArray
(
frameData
.
pose
.
orientation
)
var
scale
=
new
THREE
.
Vector3
(
1
,
1
,
1
)
var
scale
=
new
THREE
.
Vector3
(
1
,
1
,
1
)
cameraTransformMatrix
.
compose
(
position
,
quaternion
,
scale
)
var
cameraTransformMatrix
=
new
THREE
.
Matrix4
()
.
compose
(
position
,
quaternion
,
scale
)
// compute modelViewMatrix from cameraTransformMatrix
var
modelViewMatrix
=
new
THREE
.
Matrix4
()
var
modelViewMatrix
=
new
THREE
.
Matrix4
()
modelViewMatrix
.
getInverse
(
cameraTransformMatrix
)
modelViewMatrix
.
getInverse
(
cameraTransformMatrix
)
// console.log('position', position)
console
.
log
(
'
position
'
,
position
)
console
.
log
(
'
update tango quaternion
'
,
quaternion
)
// debugger;
foundControls
.
updateWithModelViewMatrix
(
modelViewMatrix
)
foundControls
.
updateWithModelViewMatrix
(
modelViewMatrix
)
}
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录