Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
cqiang1993
AR.js
提交
2f702fc3
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,发现更多精彩内容 >>
提交
2f702fc3
编写于
4月 29, 2017
作者:
J
Jerome Etienne
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
more work
上级
b7fafa68
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
26 addition
and
359 deletion
+26
-359
three.js/examples/multimarker-custom/examples/learner.html
three.js/examples/multimarker-custom/examples/learner.html
+16
-16
three.js/examples/multimarker-custom/examples/manual.html
three.js/examples/multimarker-custom/examples/manual.html
+0
-333
three.js/examples/multimarker-custom/examples/player.html
three.js/examples/multimarker-custom/examples/player.html
+10
-10
未找到文件。
three.js/examples/multimarker-custom/examples/learner.html
浏览文件 @
2f702fc3
...
...
@@ -140,30 +140,30 @@
//////////////////////////////////////////////////////////////////////////////
// var markersControlsParameters = [
// {
// type : 'pattern',
// patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro',
// },
// {
// type : 'pattern',
// patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.kanji',
// },
// ]
var
markersControlsParameters
=
[
{
type
:
'
pattern
'
,
patternUrl
:
THREEx
.
ArToolkitContext
.
baseURL
+
'
../data/
multimarkers/multi-abcdef/patt.a
'
,
patternUrl
:
THREEx
.
ArToolkitContext
.
baseURL
+
'
../data/
data/patt.hiro
'
,
},
{
type
:
'
pattern
'
,
patternUrl
:
THREEx
.
ArToolkitContext
.
baseURL
+
'
../data/
multimarkers/multi-abcdef/patt.b
'
,
patternUrl
:
THREEx
.
ArToolkitContext
.
baseURL
+
'
../data/
data/patt.kanji
'
,
},
// {
// type : 'pattern',
// patternUrl : THREEx.ArToolkitContext.baseURL + '../data/multimarkers/multi-abcdef/patt.c',
// },
]
// var markersControlsParameters = [
// {
// type : 'pattern',
// patternUrl : THREEx.ArToolkitContext.baseURL + '../data/multimarkers/multi-abcdef/patt.a',
// },
// {
// type : 'pattern',
// patternUrl : THREEx.ArToolkitContext.baseURL + '../data/multimarkers/multi-abcdef/patt.b',
// },
// {
// type : 'pattern',
// patternUrl : THREEx.ArToolkitContext.baseURL + '../data/multimarkers/multi-abcdef/patt.c',
// },
// ]
// prepare the parameters
...
...
three.js/examples/multimarker-custom/examples/manual.html
已删除
100644 → 0
浏览文件 @
b7fafa68
<!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>
<!-- include threex.artoolkit -->
<script
src=
'../../../threex-artoolkitsource.js'
></script>
<script
src=
'../../../threex-artoolkitcontext.js'
></script>
<script
src=
'../../../threex-artoolkitprofile.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=
'threex.tweencontrols/threex.tweencontrols.js'
></script>
<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>
<br/>
appMode :
<a
href=
'#areaLearning'
onclick=
'location.reload()'
>
Area Learning
</a>
/
<a
href=
'#areaUsing'
onclick=
'location.reload()'
>
Area Using
</a>
/
<a
href=
'#areaHardcoded'
onclick=
'location.reload()'
>
Area Hardcoded
</a>
</div><script>
;(
function
(){
//////////////////////////////////////////////////////////////////////////////////
// Init
//////////////////////////////////////////////////////////////////////////////////
// init renderer
var
renderer
=
new
THREE
.
WebGLRenderer
({
antialias
:
true
,
alpha
:
true
});
renderer
.
setClearColor
(
new
THREE
.
Color
(
'
lightgrey
'
),
0
)
// renderer.setPixelRatio( 2 );
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
);
//////////////////////////////////////////////////////////////////////////////////
// Initialize a basic camera
//////////////////////////////////////////////////////////////////////////////////
// Create a camera
var
camera
=
new
THREE
.
Camera
();
scene
.
add
(
camera
);
////////////////////////////////////////////////////////////////////////////////
// handle arToolkitSource
////////////////////////////////////////////////////////////////////////////////
var
arToolkitSource
=
new
THREEx
.
ArToolkitSource
({
// to read from the webcam
sourceType
:
'
webcam
'
,
// // to read from an image
// sourceType : 'image',
// sourceUrl : '../../../../data/images/multimarker.jpg'
// to read from a video
// sourceType : 'video',
// sourceUrl : '../../../../data/videos/headtracking.mp4',
})
arToolkitSource
.
init
(
function
onReady
(){
// handle resize of renderer
arToolkitSource
.
onResize
([
renderer
.
domElement
,
arToolkitContext
.
arController
.
canvas
])
})
// handle resize
window
.
addEventListener
(
'
resize
'
,
function
(){
// handle arToolkitSource resize
arToolkitSource
.
onResize
([
renderer
.
domElement
,
arToolkitContext
.
arController
.
canvas
])
})
////////////////////////////////////////////////////////////////////////////////
// initialize arToolkitContext
////////////////////////////////////////////////////////////////////////////////
// create atToolkitContext
var
arToolkitContext
=
new
THREEx
.
ArToolkitContext
({
cameraParametersUrl
:
'
../../../../data/data/camera_para.dat
'
,
detectionMode
:
'
mono
'
,
maxDetectionRate
:
30
,
// debug: true,
})
// initialize it
arToolkitContext
.
init
(
function
onCompleted
(){
// copy projection matrix to camera
camera
.
projectionMatrix
.
copy
(
arToolkitContext
.
getProjectionMatrix
()
);
})
// update artoolkit on every frame
onRenderFcts
.
push
(
function
(){
if
(
arToolkitSource
.
ready
===
false
)
return
arToolkitContext
.
update
(
arToolkitSource
.
domElement
)
})
//////////////////////////////////////////////////////////////////////////////
// Code Separator
//////////////////////////////////////////////////////////////////////////////
var
interMarkerWidth
=
2.61
var
multiMarkerFile
=
{
subMarkersControls
:
[
{
parameters
:
{
type
:
'
pattern
'
,
patternUrl
:
'
../../../../data/multimarkers/multi-abcdef/patt.a
'
,
},
poseMatrix
:
new
THREE
.
Matrix4
().
makeTranslation
(
0
,
0
,
0
).
toArray
()
},
{
parameters
:
{
type
:
'
pattern
'
,
patternUrl
:
'
../../../../data/multimarkers/multi-abcdef/patt.b
'
,
},
poseMatrix
:
new
THREE
.
Matrix4
().
makeTranslation
(
interMarkerWidth
,
0
,
0
).
toArray
()
},
{
parameters
:
{
type
:
'
pattern
'
,
patternUrl
:
'
../../../../data/multimarkers/multi-abcdef/patt.c
'
,
},
poseMatrix
:
new
THREE
.
Matrix4
().
makeTranslation
(
interMarkerWidth
*
2
,
0
,
0
).
toArray
()
},
// {
// parameters: {
// type : 'pattern',
// patternUrl : '../../../../data/multimarkers/multi-abcdef/patt.d',
// },
// poseMatrix: new THREE.Matrix4().makeTranslation(0,0,-interMarkerWidth).toArray()
// },
// {
// parameters: {
// type : 'pattern',
// patternUrl : '../../../../data/multimarkers/multi-abcdef/patt.g',
// },
// poseMatrix: new THREE.Matrix4().makeTranslation(-interMarkerWidth,0,-interMarkerWidth).toArray()
// },
// {
// parameters: {
// type : 'pattern',
// patternUrl : '../../../../data/multimarkers/multi-abcdef/patt.f',
// },
// poseMatrix: new THREE.Matrix4().makeTranslation(-interMarkerWidth*2, 0,-interMarkerWidth).toArray()
// },
]
}
////////////////////////////////////////////////////////////////////////////////
// Create a ArMarkerControls
////////////////////////////////////////////////////////////////////////////////
var
appMode
=
location
.
hash
.
substring
(
1
)
||
'
areaHardcoded
'
if
(
appMode
===
'
areaLearning
'
){
multiMarkerLearn
()
}
else
if
(
appMode
===
'
areaUsing
'
){
console
.
assert
(
localStorage
.
getItem
(
'
sampleMultiMarkerFile
'
)
!==
null
)
multiMarkerPlay
(
localStorage
.
getItem
(
'
sampleMultiMarkerFile
'
))
}
else
if
(
appMode
===
'
areaHardcoded
'
){
multiMarkerPlay
(
JSON
.
stringify
(
multiMarkerFile
))
}
else
{
console
.
assert
(
'
unknown appMode
'
,
appMode
)
}
//////////////////////////////////////////////////////////////////////////////
// learn
//////////////////////////////////////////////////////////////////////////////
function
multiMarkerLearn
(){
var
subMarkersControls
=
[]
var
markersControlsParameters
=
multiMarkerFile
.
subMarkersControls
.
map
(
function
(
item
){
return
item
.
parameters
})
// var markersControlsParameters = [
// {
// type : 'pattern',
// patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro',
// },
// {
// type : 'pattern',
// patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.kanji',
// },
// ]
// prepare the parameters
markersControlsParameters
.
forEach
(
function
(
markerControlsParameters
){
// create a markerRoot
var
object3d
=
new
THREE
.
Object3D
()
scene
.
add
(
object3d
)
// create markerControls for our object3d
var
markerControls
=
new
THREEx
.
ArMarkerControls
(
arToolkitContext
,
object3d
,
markerControlsParameters
)
if
(
true
){
// add an helper to visuable each sub-marker
var
markerHelper
=
new
THREEx
.
ArMarkerHelper
(
markerControls
)
markerControls
.
object3d
.
add
(
markerHelper
.
object3d
)
}
// store it in the parameters
subMarkersControls
.
push
(
markerControls
)
})
var
multiMarkerLearning
=
new
THREEx
.
ArMultiMakersLearning
(
subMarkersControls
)
window
.
multiMarkerLearning
=
multiMarkerLearning
window
.
addEventListener
(
'
keydown
'
,
function
(
event
){
if
(
event
.
key
!==
'
s
'
)
return
saveMultiMarkerFile
(
multiMarkerLearning
)
})
function
saveMultiMarkerFile
(
multiMarkerLearning
){
var
jsonString
=
multiMarkerLearning
.
toJSON
()
console
.
log
(
'
Writing multiMarkerFile
'
,
jsonString
)
localStorage
.
setItem
(
'
sampleMultiMarkerFile
'
,
jsonString
);
}
}
//////////////////////////////////////////////////////////////////////////////
// Code Separator
//////////////////////////////////////////////////////////////////////////////
function
multiMarkerPlay
(
multiMarkerFile
){
// build a markerRoot
var
markerRoot
=
new
THREE
.
Group
()
scene
.
add
(
markerRoot
)
// build a multiMarkerControls
var
multiMarkerControls
=
THREEx
.
ArMultiMarkerControls
.
fromJSON
(
arToolkitContext
,
scene
,
markerRoot
,
multiMarkerFile
)
// build a smoothedControls
var
smoothedRoot
=
new
THREE
.
Group
()
scene
.
add
(
smoothedRoot
)
var
smoothedControls
=
new
THREEx
.
ArSmoothedControls
(
smoothedRoot
)
onRenderFcts
.
push
(
function
(
delta
){
smoothedControls
.
update
(
markerRoot
)
})
var
markerScene
=
new
THREE
.
Scene
markerScene
.
position
.
x
=
interMarkerWidth
markerScene
.
position
.
z
=
interMarkerWidth
/
2
markerScene
.
scale
.
set
(
1
,
1
,
1
).
multiplyScalar
(
2
)
// markerRoot.add(markerScene)
smoothedRoot
.
add
(
markerScene
)
//////////////////////////////////////////////////////////////////////////////////
// add an object in the scene
//////////////////////////////////////////////////////////////////////////////////
var
mesh
=
new
THREE
.
AxisHelper
()
markerScene
.
add
(
mesh
)
// add a torus knot
var
geometry
=
new
THREE
.
CubeGeometry
(
1
,
1
,
1
);
var
material
=
new
THREE
.
MeshNormalMaterial
({
transparent
:
true
,
opacity
:
0.5
,
side
:
THREE
.
DoubleSide
});
var
mesh
=
new
THREE
.
Mesh
(
geometry
,
material
);
mesh
.
position
.
y
=
geometry
.
parameters
.
height
/
2
markerScene
.
add
(
mesh
);
var
geometry
=
new
THREE
.
TorusKnotGeometry
(
0.3
,
0.1
,
32
,
32
);
var
material
=
new
THREE
.
MeshNormalMaterial
();
var
mesh
=
new
THREE
.
Mesh
(
geometry
,
material
);
mesh
.
position
.
y
=
0.5
markerScene
.
add
(
mesh
);
onRenderFcts
.
push
(
function
(
delta
){
mesh
.
rotation
.
x
+=
delta
*
Math
.
PI
})
}
//////////////////////////////////////////////////////////////////////////////////
// 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/multimarker-custom/examples/player.html
浏览文件 @
2f702fc3
...
...
@@ -23,7 +23,7 @@
<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>
<br/>
<a
href=
'learner.html?url=player.html'
>
Learn
new area
</a>
<a
href=
'learner.html?url=player.html'
>
Record
new area
</a>
<br/>
appMode :
<a
href=
'#areaUsing'
onclick=
'location.reload()'
>
stored
</a>
...
...
@@ -79,11 +79,11 @@
// // to read from an image
// sourceType : 'image',
// sourceUrl :
'../../../
../data/images/multimarker.jpg'
// sourceUrl :
THREEx.ArToolkitContext.baseURL + '
../data/images/multimarker.jpg'
// to read from a video
// sourceType : 'video',
// sourceUrl :
'../../../
../data/videos/headtracking.mp4',
// sourceUrl :
THREEx.ArToolkitContext.baseURL + '
../data/videos/headtracking.mp4',
})
...
...
@@ -104,7 +104,7 @@
// create atToolkitContext
var
arToolkitContext
=
new
THREEx
.
ArToolkitContext
({
cameraParametersUrl
:
'
../../../
../data/data/camera_para.dat
'
,
cameraParametersUrl
:
THREEx
.
ArToolkitContext
.
baseURL
+
'
../data/data/camera_para.dat
'
,
detectionMode
:
'
mono
'
,
maxDetectionRate
:
30
,
// debug: true,
...
...
@@ -210,42 +210,42 @@
{
parameters
:
{
type
:
'
pattern
'
,
patternUrl
:
'
../../../
../data/multimarkers/multi-abcdef/patt.a
'
,
patternUrl
:
THREEx
.
ArToolkitContext
.
baseURL
+
'
../data/multimarkers/multi-abcdef/patt.a
'
,
},
poseMatrix
:
new
THREE
.
Matrix4
().
makeTranslation
(
0
,
0
,
0
).
toArray
()
},
{
parameters
:
{
type
:
'
pattern
'
,
patternUrl
:
'
../../../
../data/multimarkers/multi-abcdef/patt.b
'
,
patternUrl
:
THREEx
.
ArToolkitContext
.
baseURL
+
'
../data/multimarkers/multi-abcdef/patt.b
'
,
},
poseMatrix
:
new
THREE
.
Matrix4
().
makeTranslation
(
interMarkerWidth
,
0
,
0
).
toArray
()
},
{
parameters
:
{
type
:
'
pattern
'
,
patternUrl
:
'
../../../
../data/multimarkers/multi-abcdef/patt.c
'
,
patternUrl
:
THREEx
.
ArToolkitContext
.
baseURL
+
'
../data/multimarkers/multi-abcdef/patt.c
'
,
},
poseMatrix
:
new
THREE
.
Matrix4
().
makeTranslation
(
interMarkerWidth
*
2
,
0
,
0
).
toArray
()
},
// {
// parameters: {
// type : 'pattern',
// patternUrl :
'../../../
../data/multimarkers/multi-abcdef/patt.d',
// patternUrl :
THREEx.ArToolkitContext.baseURL + '
../data/multimarkers/multi-abcdef/patt.d',
// },
// poseMatrix: new THREE.Matrix4().makeTranslation(0,0,-interMarkerWidth).toArray()
// },
// {
// parameters: {
// type : 'pattern',
// patternUrl :
'../../../
../data/multimarkers/multi-abcdef/patt.g',
// patternUrl :
THREEx.ArToolkitContext.baseURL + '
../data/multimarkers/multi-abcdef/patt.g',
// },
// poseMatrix: new THREE.Matrix4().makeTranslation(-interMarkerWidth,0,-interMarkerWidth).toArray()
// },
// {
// parameters: {
// type : 'pattern',
// patternUrl :
'../../../
../data/multimarkers/multi-abcdef/patt.f',
// patternUrl :
THREEx.ArToolkitContext.baseURL + '
../data/multimarkers/multi-abcdef/patt.f',
// },
// poseMatrix: new THREE.Matrix4().makeTranslation(-interMarkerWidth*2, 0,-interMarkerWidth).toArray()
// },
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录