端端舝

奶件旦玄奈伙中日內!
云忒幏Web AR/VR嶱逃⻌嬡

赻撩畿賡
庌靡ㄩ憚蚗喟(Takashi Yoshinaga)
垀扽ㄩSteampunk Digital絁宒頗扦
嬝笣珂傷褪悝撮胍旃噶垀(ISIT)
�嬡ㄩ瓟�盓堔AR,綅��䛐,石伕弘仿丞

A-Frame及衙猁
? Web皮仿它扒奻匹VR卅升及3D桶政毛��g卞灍政允月白伊奈丞伐奈弁
? HTML及正弘毛𤩸仁分仃匹3D左皮斥尼弁玄毛饜离匹五月
? Firefox﹜Chrome﹜Edge卅升翋猁卅皮仿它扒互WebVR�𡛟毛桶隴
? Oculus Quest支HTC Vive卅升及HMD﹜旦穴石VR卞手�𡛟
? AR�𡛟仿奶皮仿伉手瞳蚚褫夔 (�𡛟傷藺及心AR乒奈玉手丐曰)

引內反极歠
A-Frame及矢奈斥卞失弁本旦 (https://aframe.io/)

引內反极歠
矢奈斥及酘�卞扔件皿伙互丐曰引允
扔件皿伙

引內反极歠
價掛扔件皿伙 Hello WebVR毛弁伉永弁
Hello WebVR

引內反极歠
價掛扔件皿伙 Hello WebVR毛弁伉永弁
賒醱毛弁伉永弁
?隙�ㄩ穴它旦匹玉仿永弘
?酘衵ㄩ[A][D]平奈
?ゴ摽ㄩ[W][S]平奈
↗ゴ摽酘衵反赻煦互升切日卞�仁井匹蕉尹月

引內反极歠
360～Image毛弁伉永弁仄化�毞ヶ戊件氾件汁毛桶尨
360～Image
RICOH Theta

旦穴奈玄白巧件匹手
A-Frame匹𨈘坰
引凶反
QR戊奈玉

旦穴奈玄白巧件匹手
VR示正件毛正永皿

A-Frame�𡛟AR仿奶皮仿伉
AR.js
?ARToolKit毛矛奈旦卞嶱逃今木凶javascript仿奶皮仿伉
?淏源倛及�午囀�及罷毛瞎心磁歹六凶穴奈市奈毛妏蚚
賒砉及龰腕 ? 媼�趙脹及賒砉�I燴
? 穴奈市及𨈘堤
弇离?訬��呾 CG毛笭�
(竘蚚啋: http://www.youtube.com/watch?v=TqGAqAFlGg0)
(D.Wagner et al. Computer Vision Winter Workshop, 2007)

掛゜及打奈伙
https://arjs-seminar.glitch.me
引凶反
QR戊奈玉

甩件朮左件忒�
Step1: 扔件皿伙毛妏勻化A-Frame及價掛紱釬毛�尹月
Step2: CG�凶醴及捼淕支失瓦丟奈扑亦件及偞隅
卅升毛俴中�眢VR戊件氾件汁毛釬傖
Step3: AR.js毛妏勻化AR戊件氾件汁毛釬傖
Step4: 穴奈市奈庲舑On/Off媆及桶尨ピ曰杸尹

斛猁卅手及
? Web皮仿它扒 ↙ 戊件氾件汁及极歠支雄釬�＇
? 氾平旦玄巨犯奴正 ↙ HTML支javascript及�扴
? Web扔奈田奈 ↙ 戊件氾件汁及鼠嶱
扔奈田奈卞憝仄化踏隙反???
? Glitch毛瞳蚚 https://glitch.com/
? Facebook井GitHub及失市它件玄互丐木壬OK
? 扔奈田奈午巨犯奴正及�I源毛剠蹋匹枑鼎
仇及揃蹋匹反Glitch妏蚚毛ゴ枑卞掊隴仄引允

栳�蚚扔件皿伙
仇切日井日母它件伕奈玉
http://arfukuoka.lolipop.jp/ARjs2021/sa
mple.zip

價掛扔件皿伙及戊奈玉
Hello WebVR及戊奈玉毛龰腕
GET STARTED

價掛扔件皿伙及戊奈玉及恚庨
Hello WebVR卞憝允月�扴 (凶勻凶仇木分仃ㄐ)
Hello WebVR

Glitch交奈扒奈反remix the starter example on Glitch毛弁伉永弁
↗籵都反Hello WebVR及�扴毛戊疋奈仄﹜赻釬及HTML白央奶伙卞矢奈旦玄
Click

Remix your own毛弁伉永弁
Click

價掛扔件皿伙及戊奈玉及復庲
index.html毛弁伉永弁仄﹜戊奈玉互桶尨今木月仇午毛復庲
Click

末奈旦及復庲
<html>
<head>
<title>Hello, WebVR! - A-Frame</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<script src=/slideshow/arframe-x-arjs/244307361/"https:/aframe.io/releases/1.2.0/aframe.min.js">
</script>
</head>
<body>
<a-scene background="color: #ECECEC">
桶尨允月左皮斥尼弁玄支掖劓及偞隅毛仇仇卞�扴
</a-scene>
</body>
</html>
? 目永母奈窒匹A-Frame及辻夔毛枑鼎允月仿奶皮仿伉毛龰曰煋戈
? <a-scene>午</a-scene>及嶲卞鏡賒卞憝允月�扴毛允月

末奈旦及復庲
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9">
</a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E">
</a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5"
color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0"
width="4" height="4" color="#7BC8A4"></a-plane>
</a-scene>
? 價掛�倛反a-xxx正弘匹枑鼎今木化中月
https://aframe.io/docs/1.2.0/primi
tives/a-box.html (瞰ㄩa-box及��)
弇离隙� 伎

失伊件斥仄方丹 (引分支日卅仁化OK)
正弘囀及跪由仿丟奈正毛�摩仄化CG及�凶醴毛捼淕
? position(弇离)ㄩx y z及�卞旦矢奈旦匹Еピ勻化硌隅
(0 1.25 -5)
弇离隙� 伎
x y z釱㻢

失伊件斥仄方丹 (引分支日卅仁化OK)
正弘囀及跪由仿丟奈正毛�摩仄化CG及�凶醴毛捼淕
? position(弇离)ㄩx y z及�卞旦矢奈旦匹Еピ勻化硌隅
? rotation(�A五)ㄩ跪嵞毛笢陑午仄凶隙�匹桶政
? color(伎)ㄩ市仿奈戊奈玉脹匹硌隅
? 坻卞手�倛卞方勻化跪意偞隅�醴互丐月
X
Z
Y
(0 1.25 -5) ▽偞隅�醴及瞰▼
radius(圉噤)
width(盟)
height(詢今)
depth(兜俴)
src (賒砉卅升)
埻萸

午曰丐尹內�丹方曰騻木欠
午中丹仇午匹赻蚕卞中元勻化心引仄斤丹

[�摩瞰]
<a-scene background="color: #0000FF">
</a-box>
</a-sphere>
<a-text position="0 1.5 -2" align="center" color="#000000§
value="AR Fukuoka"></a-text>
</a-scene>
HTML�摩卞騻木方丹
褒僅
詢今
伎

政婓及正皮毛寯元月
正皮毛寯元月

VR戊件氾件汁釬曰及𨃨�
Hello WebVR及戊奈玉毛龰腕
GET STARTED

</a-box>
</a-sphere>
</a-scene>
祥猁卅左皮斥尼弁玄及祅壺
? HTML及�扴及笢井日正弘毛祅月分仃
? 仇及摽及栳�及凶戶﹜a-sphere及心毛
紹仄化祅壺仄化心引仄斤丹
</a-box>
</a-sphere>
lesson01

俋�毛淕尹月
�g伎匹凤曰勾少允及匹反卅仁氾弁旦民乓毛左皮斥尼弁玄及桶醱卞桶尨

俋�毛淕尹月
氾弁旦民乓賒砉毛蚚砩仄化﹜左皮斥尼弁玄及桶醱卞惿曰葆仃月
3D左皮斥尼弁玄氾弁旦民乓賒砉

氾弁旦民乓賒砉毛失永皿伕奈玉
Glitch及巨犯奴正矢奈斥卞𥽋曰﹜賒醱酘及[assets]毛弁伉永弁
適中化﹜賒醱奻源及[Upload an Asset]毛弁伉永弁
Ｋassets
Ｌ Upload an Asset

扔件皿伙午仄化蚚砩仄凶氾弁旦民乓賒砉earth.jpg毛嶱仁
sample?earth.jpg

Click

氾弁旦民乓賒砉及URL毛龰腕
Copy毛弁伉永弁

末奈旦及𤩸五𡥼尹
index.html弁伉永弁

末奈旦及𤩸五𡥼尹
<head>
<script src=/slideshow/arframe-x-arjs/244307361/"https:/aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>
<body>
<a-sphere position="0 1.25 -5" radius="1.25" src="戊疋奈仄凶URL"
shadow> </a-sphere>
</a-scene>
</body>
? a-sphere及伎毛color(伎)匹反卅仁src(賒砉尺及伉件弁)卞劐載
? src及衵煘卞ゴ及紱釬匹戊疋奈仄凶※賒砉及URL§毛惿曰葆仃月
color毛src卞劐載
Lesson02

失瓦丟奈扑亦件及袚樓
<a-sphere position="0 1.25 -5" radius="1.25"
src=/slideshow/arframe-x-arjs/244307361/"氾弁旦民乓及URL" shadow
animation = "
property :rotation; ↘失瓦丟奈扑亦件及意�
dur : 10000; ↘失瓦丟奈扑亦件卞井仃月媆嶲(立伉鏃)
from : 0?0?0; ↘嶱宎媆及褒僅(0,0,0)
to: 0?360?0; ↘皺賸媆及褒僅(0,360,0)
loop : 0; ↘靜曰殿仄隙杅
"
>
</a-sphere>
animation毛蚚中化失瓦丟奈扑亦件卞憝允月偞隅毛俴丹
Z
X
Y
"毛咭木內卞ㄐ

失瓦丟奈扑亦件毛靜曰殿允
<a-sphere position="0 1.25 -5" radius="1.25"
src=/slideshow/arframe-x-arjs/244307361/"氾弁旦民乓及URL" shadow
animation = "
property :rotation; ↘失瓦丟奈扑亦件及意�
from : 0?0?0; ↘嶱宎媆及褒僅(0,0,0)
to: 0?360?0; ↘皺賸媆及褒僅(0,360,0)
loop : -1; ↘靜曰殿仄隙杅
"
>
</a-sphere>
repeat毛"-1"卞允月午中勾引匹手靜曰殿仄適仃月

肮元厒僅匹隙�今六月
animation = "
property : rotation; ↘失瓦丟奈扑亦件及意�
from : 0?0?0; ↘嶱宎媆及褒僅(0,0,0)
to : 0?360?0; ↘皺賸媆及褒僅(0,360,0)
loop : -1; ↘靜曰殿仄隙杅
easing : linear; ↘厒僅及劐趙
"
easing毛袚樓仄﹜"linear"卞允月午肮元厒僅匹�仁方丹卞卅月﹝
幻井卞反郔場互斗勻仁曰卅ease-in支摽圉互斗勻仁曰卅ease-out手﹝
↙ https://easings.net
lesson03

Ｋ賒醱酘及[assets]毛弁伉永弁
Ｌ [Upload an Asset]毛弁伉永弁
Ｋassets Ｌ Upload an Asset

扔件皿伙午仄化蚚砩仄凶掖劓蚚賒砉space.jpg毛嶱仁
sample?space.jpg

氾弁旦民乓賒砉及URL毛龰腕
弁伉永弁

正弘及袚樓
<head>
</head>
<body>
<a-scene background="color: #FAFAFA">
<a-sphere position="0 1.25 -5" radius="1.25" src=/slideshow/arframe-x-arjs/244307361/"URL" shadow
animation = "墿中及匹賃霛"
>
</a-sphere>
<a-sky src="今勻五戊疋奈仄凶賒砉及URL"></a-sky>
</a-scene>
</body>
a-sky正弘毛瞳蚚仄﹜掖劓ロ�午仄化賒砉及URL毛硌隅允木壬OK
a-sky毛袚樓 lesson04

靡ゴ毛葆仃化悵湔
恅趼蹈毛弁伉永弁
仇仇毛𤩸五𡥼尹月

URL及復庲
Change URL
仇木

幻井﹜A-Frame匹瞳蚚匹五月犯奈正及瞰
? 恅趼蹈 <a-text>
? 秞 <a-sound>
? 申犯左 <a-video>
? 3D白央奶伙
obj <a-obj-model>
glTF <a-gltf-model>
? VR戊件玄伕奈仿卞方月⻌薯
HTC Vive
<a-entity vive-controls="hand: left">
OculusQuest 卅升
<a-entity laser-controls="hand: left">

�摩笢及戊奈玉毛恚庨
賒醱衵奻及皿伕斥尼弁玄靡互桶尨今木化中月預垀井日Remix This
Ｋ皿伕斥尼弁玄靡
ＬRemix Project

𨃨�
皿伊申亙奈毛嶱五勻天卅仄分午﹜仇及丐午市丟仿及妏蚚偝褫復庲互訄藹卞卅月
寯元月

𨃨�
測歹曰卞�e及正皮匹灍俴賒醱毛嶱中化云仁
ＫShow
Ｌ寯元月

AR.js毛奶件禾奈玄 & 市丟仿賒砉及桶尨
<head>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/
build/aframe-ar.js"></script>
</head>
<body>
<a-scene background="color: #FAFAFA">
animation = "笢謹"
>
</a-sphere>
<a-sky src="賒砉URL"></a-sky>
</a-scene>
</body>
AR.js及掂心煋心毛仄凶丐午﹜a-scene正弘卞embedded毛袚樓
袚樓
<a-scene embedded>
掖劓伎毛祅壺仄化embeded
a-sky祅壺 lesson05

穴奈市奈毛庲舑仄化公及奻卞CG毛桶尨
<body>
<a-scene embedded arjs>
<a-marker preset="hiro">
>
</a-sphere>
</a-marker>
</a-scene>
</body>
? AR桶尨毛允月卞反穴奈市奈午CG午及憝窣葆仃互斛猁
? A-Frame及�磁<a-marker></a-marker>匹CG毛衩戈
? preset匹穴奈市奈靡毛硌隅 (葆扽穴奈市奈及Hiro妏蚚)
? 淏源倛囀及穴奈市奈毛黃赻卞釬月仇午手褫夔 (統蕉)
穴奈市奈及奻卞仇木毛桶尨仄凶中
袚樓
lesson06

雄釬�＇
桶尨今木凶仃升弇离互朮伊化月

燴蚕午賤𢜪源楊(1)
<a-marker> </a-marker>匹衩引木凶CG及埻萸反穴奈市奈及笢陑午卅月
<a-sphere position="0 1.25 -5" radius="1.25" src=/slideshow/arframe-x-arjs/244307361/"URL" shadow>
0 0 0
x
y
z
-5
1.25
0 1.25 0

雄釬�＇
引分切斤勻午朮伊化月
狟�及方丹卞劐載仄化婬僅灍俴
<a-sphere position="0 1.25 0" radius="1.25" src=/slideshow/arframe-x-arjs/244307361/"URL" shadow>

燴蚕午賤𢜪源楊(2)
? 戊件疋亙奈正匹3D桶政毛允月蕣卞﹜掛懂反�萸及弇离毛硌隅允月斛猁互丐月
? A-Frame匹反☆中中覜元★卞桶尨今木月�萸及弇离毛犯白巧伙玄匹偞隅仄化仁木月
? 穴奈市奈及弇离及�呾反市丟仿互埻萸卞丐月仇午毛ゴ枑午仄化中月凶戶猁党淏
<body>
<a-sphere position="0 1.25 0" radius="1.25" src=/slideshow/arframe-x-arjs/244307361/"URL" shadow
> </a-sphere>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body> 市丟仿毛隴尨腔卞袚樓允月(弇离反埻萸)
X
Z
Y
lesson07

政袨及�觳萸午賤𢜪習
<body>
>
</a-sphere>
</a-marker>
</a-scene>
</body>
�觳萸
? 桶尨允月CG互a-marker及赽猁匼卅及匹穴奈市奈互秏尹月午CG手秏尹月
賤𢜪習
? a-marker及赽猁匼午仄化匹反卅仁赻ゴ及javascript匹CG及弇离?訬�毛秶郘

CG奪燴蚚及左皮斥尼弁玄釬傖
<body>
>
</a-sphere>
</a-marker>
<a-entity id="ar-objects">
</a-entity>
</a-scene>
</body>
仇仇匹桶尨允月CG卞憝允月�扴
a-entity午中丹諾左皮斥尼弁玄毛釬傖﹝javascript匹瞳蚚允月凶戶id手勾仃化云仁
id靡反￤砩匹OK

<body>
>
</a-sphere>
</a-marker>
</a-entity>
</a-scene>
</body>
仇仇匹桶尨允月CG卞憝允月�扴
a-sphere毛<a-entity id="ar-objects">午</a-entity>及嶲卞痄�
CG奪燴蚚左皮斥尼弁玄卞痄�

<body>
</a-marker>
>
</a-sphere>
</a-entity>
</a-scene>
</body>
笒左皮斥尼弁玄(id:ar-objects)毛釬月仇午匹恚杅CG及AR桶尨手褫夔
仇勻切反諾勻弔匹OK
lesson08

復庲
CG互袚𣶹仄卅仁卅月

復庲
Ctrl + Alt (option) + i

復庲
奶件旦矢弁正奈匹�月午切扎氏午丐月
Camera及弇离反戊戊

穴奈市奈𨈘堤/伕旦玄及正奶立件弘毛龰腕
<head>
<meta charset="utf-8">
<title>Hello, WebVR! ? A-Frame</title>
<meta name="description" content="Hello, WebVR! ? A-Frame">
<script src="https://raw.githack.com/AR-js-
org/AR.js/master/aframe/build/aframe-ar.js"></script>
<script>
</script>
</head>
<body>
旦矢奈旦及飲磁奻笢謹
</a-scene>
</body>
仇仇卞旦弁伉皿玄毛�扴(棒及矢奈斥)

init: function () {
//穴奈市奈𨈘堤/伕旦玄及袨颷毛奪燴允月劐杅毛隅膽仄false匹場ヽ趙
this.isTracking=false;
//markerFound反穴奈市奈𨈘堤媆卞網壬木月
this.el.sceneEl.addEventListener('markerFound', () => {
this.isTracking=true;
console.log("tracking:"+ this. isTracking);
});
//markerLost反穴奈市奈伕旦玄媆卞網壬木月
this.el.sceneEl.addEventListener('markerLost', () => {
});
} lesson11

赻釬辻夔(戊件禾奈生件玄)毛瞳蚚允月
<head>
<script>
</script>
</head>
<body>
<a-marker preset="hiro"> </a-marker>
</a-scene>
</body>
珂幻升�扴仄凶戊件禾奈生件玄(markerhandler)
仇仇毛�摩﹝(棒及矢奈斥)

赻釬辻夔(戊件禾奈生件玄)毛瞳蚚允月
<head>
<script>
</script>
</head>
<body>
<a-marker markerhandler preset="hiro"> </a-marker>
</a-scene>
</body>
赻釬戊件禾奈生件玄(markerhandler)
lesson12

復庲
衵弁伉永弁仄化猁匼毛桶尨

復庲
戊件末奈伙
𨈘堤旦氾奈正旦互桶尨今木月

CG毛穴奈市奈卞袚𣶹今六月
<script>
schema: {
},
init: function () {
//穴奈市奈𨈘堤奶矛件玄及偞隅(旦矢奈旦及飲磁卞方曰吽謹)
},
}
});
</script>
珨隅笚ヽ匹穴奈市奈及弇离?訬�毛龰腕仄﹜CG及弇离?訬�卞毀茬
CG毛穴奈市奈卞袚𣶹今六月(棒及矢奈斥)

//手仄穴奈市奈袚聑笢卅日壬
if(this.isTracking){
//仇及旦弁伉皿玄互羥蚚今木化中月左皮斥尼弁玄(=穴奈市奈)毛龰腕
var marker=this.el.object3D;
//穴奈市奈及弇离毛龰腕
var p = new THREE.Vector3();
marker.getWorldPosition(p);
//穴奈市奈及訬�(砃五)毛龰腕
var q = new THREE.Quaternion();
marker.getWorldQuaternion(q);
//AR桶尨卞蚚中月左皮斥尼弁玄及弇离?訬�卞毀茬
var obj =this.data.arobject.object3D;
obj.position.set(p.x, p.y, p.z);
obj.quaternion.set ( q.x, q.y, q.z, q.w);
}
}
lesson13

<head>
<script>

</script>
</head>
<body>
旦矢奈旦及飲磁卞方曰吽謹
</a-scene>
</body>
仇仇毛�摩(棒及矢奈斥)

<body>
<a-marker markerhandler ="arobject:#ar-objects" preset="hiro">
</a-marker>
<a-sphere position="0 1.25 0" radius="1.25" src=/slideshow/arframe-x-arjs/244307361/"賒砉及URL" shadow
animation="
property:rotation;
dur:10000;
from:0 0 0;
to:0 360 0;
loop:-1;
easing:linear;
">
</a-sphere>
</a-entity>
</a-scene>
</body> lesson14

穴奈市奈毛�囮勻凶日CG毛賒醱笢栝卞离仁
<script>
schema: {
},
init: function () {
},
// CG毛穴奈市奈卞袚𣶹今六月
}
});
</script>
穴奈市奈伕旦玄媆及奶矛件玄及笢匹CG及弇离毛硌隅允月﹝
穴奈市奈𨈘堤奶矛件玄及偞隅(旦矢奈旦及飲磁卞方曰吽謹)
棒反仇仇

init: function () {
//穴奈市奈𨈘堤/伕旦玄及袨颷毛奪燴允月劐杅毛隅膽仄false匹場ヽ趙
//markerFound反穴奈市奈𨈘堤媆卞網壬木月
this.el.sceneEl.addEventListener('markerFound', () => {
this.isTracking=true;
});
//markerLost反穴奈市奈伕旦玄媆卞網壬木月
});
}
仇仇卞戊奈玉毛袚樓 (棒及矢奈斥)

var obj =this.data.arobject.object3D; //AR左皮斥尼弁玄毛龰腕
obj.position.set(0,0,-6); //z=-6 (賒醱离仁源砃卞饜离)
obj.quaternion.set ( 0,0,0,1); //訬�毛場ヽ袨颷卞𥽋允
obj.rotateX ( 3.14/2 ) ; //90僅隙�今六化捼淕
});
伕旦玄
弇离(0,0,-6)
�A中凶引引
場ヽ訬�
場ヽ訬�
90僅隙�
砃五及捼淕
lesson15

賒醱毛卅冗勻化唬勞毛隙�

華ヶ及CG毛javascript匹秶郘允月𨃨�
<body>
<a-marker markerhandler="arobject:#ar-objects" preset="hiro">
</a-marker>
<a-sphere position="0 1.25 0" radius="1.25" src=/slideshow/arframe-x-arjs/244307361/§URL" shadow
animation="吽謹"
>
</a-sphere>
</a-entity>
</a-scene>
</body>
賒醱紱釬眕俋及猁秪匹�互劐歹月窒煦反仇木眕奻﹜紱釬仄卅中源互煦井曰眢中
失瓦丟奈扑亦件匹�忒卞�互劐歹月
穴奈市奈伕旦玄媆及弇离?訬�毛峚捼淕今木化月

華ヶ及CG毛javascript匹秶郘允月𨃨�
<body>
<a-marker markerhandler="arobject:#ar-objects" preset="hiro">
</a-marker>
<a-entity id="earth">
<a-sphere position="0 1.25 0" radius="1.25" src=/slideshow/arframe-x-arjs/244307361/§URL" shadow
animation="吽謹"
>
</a-sphere>
</a-entity>
</a-entity>
</a-scene>
</body>
賤𢜪偶ㄩ賒醱紱釬蚚及猁匼毛珨勾釬曰a-sphere及笒卞允月
皺賸毛咭木內卞
Earth午中丹靡ゴ及諾左皮斥尼弁玄
lesson16

賒醱紱釬蚚旦弁伉皿玄及袚樓
<head>
<script>
</script>
</head>
<body>
</a-scene>
</body>
赻釬戊件禾奈生件玄(markerhandler)
賒醱紱釬蚚旦弁伉皿玄毛袚樓(棒及矢奈斥)

var startX; //賒醱正永民or弁伉永弁嶱宎弇离
var pressed=false; //政婓賒醱毛揖勻化中月井瘁井
var touchDownHandler= function(e) {
pressed=true; //賒醱紱釬嶱宎
if (e.touches && e.touches[0]) {//旦穴石賒醱毛正永民仄凶卅日
startX = e.touches[0].clientX;
}
else if (e.clientX) {//PC賒醱毛弁伉永弁仄凶卅日
startX = e.clientX;
}
};
var touchEndHandler= function(e) {
pressed=false; //賒醱紱釬皺賸
};
//硌痄�媆卞隙�今六月(棒及矢奈斥匹賤掊)
};
lesson19

var startX; //賒醱正永民or弁伉永弁嶱宎弇离
var pressed=false; //政婓賒醱毛揖勻化中月井瘁井
var touchDownHandler= function(e) { /*笢謹*/ };
var touchEndHandler= function(e) { /*笢謹*/ };
if(pressed){ //賒醱紱釬笢卅日
var x = 0;
if (e.touches && e.touches[0]) {
x = e.touches[0].clientX;
}
else if (e.clientX) {
x = e.clientX;
}
var obj =document.getElementById("earth").object3D;
obj.rotateZ((x-startX)*0.001); //Z嵞隙�
}
};
lesson20

統蕉
? AR.js
[衙猁]
https://ar-js-org.github.io/AR.js-Docs/
[奶矛件玄龰腕]
https://ar-js-org.github.io/AR.js-Docs/ui-events/
[穴奈市奈釬傖]
https://jeromeetienne.github.io/AR.js/three.js/example
s/marker-training/examples/generator.html
? A-Frame
[javascript匹秶郘]
https://aframe.io/docs/1.2.0/introduction/javascript-
events-dom-apis.html
[戊件禾奈生件玄釬傖]
https://aframe.io/docs/1.2.0/introduction/writing-a-
component.html

端端舝

AR-Frame x AR.js⻌嬡

More Related Content

AR-Frame x AR.js⻌嬡