Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
cqiang1993
AR.js
提交
57b35c5c
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,发现更多精彩内容 >>
提交
57b35c5c
编写于
6月 30, 2017
作者:
J
Jerome Etienne
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
more owkr
上级
1a681527
变更
9
隐藏空白更改
内联
并排
Showing
9 changed file
with
257 addition
and
25 deletion
+257
-25
three.js/examples/augmented-website/app/index.html
three.js/examples/augmented-website/app/index.html
+1
-0
three.js/examples/augmented-website/landing-page/js/arAppURL.js
...js/examples/augmented-website/landing-page/js/arAppURL.js
+1
-1
three.js/examples/screenAsPortal/images/box.png
three.js/examples/screenAsPortal/images/box.png
+0
-0
three.js/examples/screenAsPortal/images/target.png
three.js/examples/screenAsPortal/images/target.png
+0
-0
three.js/examples/screenAsPortal/index.html
three.js/examples/screenAsPortal/index.html
+22
-22
three.js/examples/screenAsPortal/js/threex-screenasportal.js
three.js/examples/screenAsPortal/js/threex-screenasportal.js
+0
-0
three.js/examples/show-gravity-raw.html
three.js/examples/show-gravity-raw.html
+0
-2
three.js/examples/show-gravity-webgl.html
three.js/examples/show-gravity-webgl.html
+141
-0
three.js/examples/threejs-boilerplate.html
three.js/examples/threejs-boilerplate.html
+92
-0
未找到文件。
three.js/examples/augmented-website/app/index.html
浏览文件 @
57b35c5c
<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=
'js/threex-augmentedwebpages.js'
></script>
...
...
three.js/examples/augmented-website/landing-page/js/arAppURL.js
浏览文件 @
57b35c5c
...
...
@@ -74,7 +74,7 @@ function updateArAppURL(){
// build url
// FIXME pass from relative to absolute url in a better way
// urlOptions.arAppURL = location.protocol + '//' + location.host + location.pathname.replace(/[^\/]*$/, '') + '../vendor/ar.js/three.js/examples/augmented-website/examples/screenAsPortal/index.html'
urlOptions
.
arAppURL
=
location
.
protocol
+
'
//
'
+
location
.
host
+
location
.
pathname
.
replace
(
/
[^\/]
*$/
,
''
)
+
'
examples
/screenAsPortal/index.html
'
urlOptions
.
arAppURL
=
location
.
protocol
+
'
//
'
+
location
.
host
+
location
.
pathname
.
replace
(
/
[^\/]
*$/
,
''
)
+
'
..
/screenAsPortal/index.html
'
}
//////////////////////////////////////////////////////////////////////////////
...
...
three.js/examples/
augmented-website/examples/
screenAsPortal/images/box.png
→
three.js/examples/screenAsPortal/images/box.png
浏览文件 @
57b35c5c
文件已移动
three.js/examples/
augmented-website/examples/
screenAsPortal/images/target.png
→
three.js/examples/screenAsPortal/images/target.png
浏览文件 @
57b35c5c
文件已移动
three.js/examples/
augmented-website/examples/
screenAsPortal/index.html
→
three.js/examples/screenAsPortal/index.html
浏览文件 @
57b35c5c
<!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>
<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>
<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=
'../../
../../
threex/threex-aruco/threex-arucocontext.js'
></script>
<script
src=
'../../
../../
threex/threex-aruco/threex-arucodebug.js'
></script>
<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=
'../../threex/threex-aruco/threex-arucocontext.js'
></script>
<script
src=
'../../threex/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=
'../
../../
multi-markers/threex-armultimarkercontrols.js'
></script>
<script
src=
'../
../../
multi-markers/threex-armultimarkerlearning.js'
></script>
<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=
'../multi-markers/threex-armultimarkercontrols.js'
></script>
<script
src=
'../multi-markers/threex-armultimarkerlearning.js'
></script>
<script
src=
'js/threex-screenasportal.js'
></script>
...
...
@@ -45,7 +45,7 @@
<a
href=
'javascript:void(0)'
onclick=
'toggleMarkerHelper()'
>
marker helper :
<span
id=
'markerHelpersStatus'
></span></a>
</div>
<div
style=
'position: fixed; bottom: 16px; right: 16px; z-index:1'
;
>
<img
id=
'recordButton'
src=
"../
../../
multi-markers/examples/images/record-start.png"
width=
'64px'
height=
'64px'
>
<img
id=
'recordButton'
src=
"../multi-markers/examples/images/record-start.png"
width=
'64px'
height=
'64px'
>
</div>
<script>
...
...
three.js/examples/
augmented-website/examples/
screenAsPortal/js/threex-screenasportal.js
→
three.js/examples/screenAsPortal/js/threex-screenasportal.js
浏览文件 @
57b35c5c
文件已移动
three.js/examples/show-gravity.html
→
three.js/examples/show-gravity
-raw
.html
浏览文件 @
57b35c5c
...
...
@@ -58,8 +58,6 @@ function onDeviceMotion(event) {
gravity
.
y
=
event
.
accelerationIncludingGravity
.
y
-
event
.
acceleration
.
y
gravity
.
z
=
event
.
accelerationIncludingGravity
.
z
-
event
.
acceleration
.
z
document
.
querySelector
(
'
#gravityLength
'
).
innerHTML
=
gravity
.
length
().
toFixed
(
2
)
}
window
.
addEventListener
(
"
devicemotion
"
,
onDeviceMotion
,
true
);
...
...
three.js/examples/show-gravity-webgl.html
0 → 100644
浏览文件 @
57b35c5c
<!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.min.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>
- three.js camera transform
<br/>
Contact me any time at
<a
href=
'https://twitter.com/jerome_etienne'
target=
'_blank'
>
@jerome_etienne
</a>
</div><script>
//////////////////////////////////////////////////////////////////////////////////
// Init
//////////////////////////////////////////////////////////////////////////////////
// init renderer
var
renderer
=
new
THREE
.
WebGLRenderer
({
antialias
:
true
,
alpha
:
true
});
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
();
//////////////////////////////////////////////////////////////////////////////////
// Initialize a basic camera
//////////////////////////////////////////////////////////////////////////////////
// Create a camera
var
camera
=
new
THREE
.
PerspectiveCamera
(
23
*
2
,
window
.
innerWidth
/
window
.
innerHeight
,
0.01
,
100
);
camera
.
position
.
z
=
4
;
window
.
addEventListener
(
'
resize
'
,
function
()
{
camera
.
aspect
=
window
.
innerWidth
/
window
.
innerHeight
;
camera
.
updateProjectionMatrix
();
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
},
false
);
//////////////////////////////////////////////////////////////////////////////////
// add an object in the scene
//////////////////////////////////////////////////////////////////////////////////
// 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
meshCube
=
new
THREE
.
Mesh
(
geometry
,
material
);
scene
.
add
(
meshCube
);
meshCube
.
add
(
new
THREE
.
AxisHelper
()
)
var
geometry
=
new
THREE
.
TorusKnotGeometry
(
0.3
,
0.1
,
64
,
16
);
var
material
=
new
THREE
.
MeshNormalMaterial
();
var
mesh
=
new
THREE
.
Mesh
(
geometry
,
material
);
meshCube
.
add
(
mesh
);
onRenderFcts
.
push
(
function
(
delta
){
mesh
.
rotation
.
x
+=
Math
.
PI
*
delta
})
window
.
addEventListener
(
"
deviceorientation
"
,
function
onDeviceOrientation
(
event
)
{
var
deviceEuler
=
new
THREE
.
Euler
()
deviceEuler
.
x
=
event
.
beta
/
180
*
Math
.
PI
deviceEuler
.
y
=
event
.
gamma
/
180
*
Math
.
PI
deviceEuler
.
z
=
event
.
alpha
/
180
*
Math
.
PI
deviceEuler
.
order
=
"
XZY
"
var
controllerQuaternion
=
new
THREE
.
Quaternion
().
setFromEuler
(
deviceEuler
).
inverse
()
meshCube
.
quaternion
.
copy
(
controllerQuaternion
)
});
// window.addEventListener("deviceorientation", function onDeviceOrientation(event) {
// var deviceEuler = new THREE.Euler()
// deviceEuler.x = event.beta / 180 * Math.PI
// deviceEuler.y = event.gamma / 180 * Math.PI
// deviceEuler.z = event.alpha / 180 * Math.PI
// deviceEuler.order = "XZY"
//
// var controllerQuaternion = new THREE.Quaternion().setFromEuler(deviceEuler).inverse()
// meshCube.quaternion.copy(controllerQuaternion)
// });
//
// window.addEventListener("devicemotion", function onDeviceMotion(event) {
// // document.querySelector('#accelerationIncludingGravityX').innerHTML = event.accelerationIncludingGravity.x.toFixed(2)
// // document.querySelector('#accelerationIncludingGravityY').innerHTML = event.accelerationIncludingGravity.y.toFixed(2)
// // document.querySelector('#accelerationIncludingGravityZ').innerHTML = event.accelerationIncludingGravity.z.toFixed(2)
// //
// // document.querySelector('#accelerationX').innerHTML = event.acceleration.x.toFixed(2)
// // document.querySelector('#accelerationY').innerHTML = event.acceleration.y.toFixed(2)
// // document.querySelector('#accelerationZ').innerHTML = event.acceleration.z.toFixed(2)
// //
// // document.querySelector('#gravityX').innerHTML = (event.accelerationIncludingGravity.x - event.acceleration.x).toFixed(2)
// // document.querySelector('#gravityY').innerHTML = (event.accelerationIncludingGravity.y - event.acceleration.y).toFixed(2)
// // document.querySelector('#gravityZ').innerHTML = (event.accelerationIncludingGravity.z - event.acceleration.z).toFixed(2)
// //
// var gravity = new THREE.Vector3()
// gravity.x = event.accelerationIncludingGravity.x - event.acceleration.x
// gravity.y = event.accelerationIncludingGravity.y - event.acceleration.y
// gravity.z = event.accelerationIncludingGravity.z - event.acceleration.z
//
// meshCube.lookAt(gravity)
// });
//////////////////////////////////////////////////////////////////////////////////
// render the whole thing on the page
//////////////////////////////////////////////////////////////////////////////////
// render the scene
onRenderFcts
.
push
(
function
(){
renderer
.
render
(
scene
,
camera
);
})
// 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/threejs-boilerplate.html
0 → 100644
浏览文件 @
57b35c5c
<!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.min.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>
- three.js camera transform
<br/>
Contact me any time at
<a
href=
'https://twitter.com/jerome_etienne'
target=
'_blank'
>
@jerome_etienne
</a>
</div><script>
//////////////////////////////////////////////////////////////////////////////////
// Init
//////////////////////////////////////////////////////////////////////////////////
// init renderer
var
renderer
=
new
THREE
.
WebGLRenderer
({
antialias
:
true
,
alpha
:
true
});
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
();
//////////////////////////////////////////////////////////////////////////////////
// Initialize a basic camera
//////////////////////////////////////////////////////////////////////////////////
// Create a camera
var
camera
=
new
THREE
.
PerspectiveCamera
(
60
,
window
.
innerWidth
/
window
.
innerHeight
,
0.01
,
100
);
camera
.
position
.
z
=
3
;
window
.
addEventListener
(
'
resize
'
,
function
()
{
camera
.
aspect
=
window
.
innerWidth
/
window
.
innerHeight
;
camera
.
updateProjectionMatrix
();
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
},
false
);
//////////////////////////////////////////////////////////////////////////////////
// add an object in the scene
//////////////////////////////////////////////////////////////////////////////////
// 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
);
scene
.
add
(
mesh
);
var
geometry
=
new
THREE
.
TorusKnotGeometry
(
0.3
,
0.1
,
64
,
16
);
var
material
=
new
THREE
.
MeshNormalMaterial
();
var
mesh
=
new
THREE
.
Mesh
(
geometry
,
material
);
scene
.
add
(
mesh
);
onRenderFcts
.
push
(
function
(
delta
){
mesh
.
rotation
.
x
+=
Math
.
PI
*
delta
})
//////////////////////////////////////////////////////////////////////////////////
// render the whole thing on the page
//////////////////////////////////////////////////////////////////////////////////
// render the scene
onRenderFcts
.
push
(
function
(){
renderer
.
render
(
scene
,
camera
);
})
// 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>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录