Skip to content

A
AR.js

cqiang1993 / AR.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
A
AR.js

体验新版 GitCode，发现更多精彩内容 >>

提交 883bb59d 编写于 作者: J Jerome Etienne
浏览文件
操作

moved augmented-website to webxr.io

上级 b1167725
展开全部 隐藏空白更改
内联 并排
Showing with 0 addition and 1873 deletion
three.js/examples/augmented-website/Makefile 已删除 100644 → 0
浏览文件 @ b1167725
build:
cp ../marker-training/examples/pattern-images/pattern-*.png landing-page/images/markers-artoolkit
cp ../../threex/threex-aruco/examples/images/100*.png landing-page/images/markers-aruco
three.js/examples/augmented-website/README.md 已删除 100644 → 0
浏览文件 @ b1167725
# Augmented-website by AR.js
## Bringing AR in any webpage.
I had a dream where it will be easy to add augmented reality in any website.
So the website could make its own AR content available directly to its visitors!
Read this post about [Augmenting the webpage](https://medium.com/arjs/augmenting-the-web-page-e893f2d199b8)
Augmented website is about chasing this dream.
Augmented website aims to provide an easy way to include AR in any webpage.
# API
- root url is http://webxr.io/augmented-webpage/
- ?url=http://example.com/app-arjs/
- ?trackingBackend=tango - ```['tango', 'artoolkit', 'aruco']```
# Possible improvements
- have the brightness of the screen automatically setup to fit the environment
- the phone find the marker, and send message to the webpage to reduce the brightness
three.js/examples/augmented-website/TODO.md 已删除 100644 → 0
浏览文件 @ b1167725
- rename arAppURL as appURL
# Nice Url for augemented-webpages
- then support on external site - try to get nice url
- include that in webxr.io - little AR logo in bottom right - try clean url
- keep on their URL
- if click then go webxr.io/ar
- can i put that in the github readme.md ?
- here goes in iframe with the augmented-webpages examples
- and url remains simple
- no need to move files
three.js/examples/augmented-website/app/index.html 已删除 100644 → 0
浏览文件 @ b1167725
<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>
<script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.js"></script>
<style type="text/css">
body, html{
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#iframeContainer {
position:absolute;
left: 0;
right: 0;
bottom: 0;
top: 0px;
}
</style>
<body>
<div id="iframeContainer">
<iframe width="100%" height="100%" frameborder="0" src="about:blank"></iframe>
</div>
<script>
;(function(){
////////////////////////////////////////////////////////////////////////////////
// handle urlOptions
////////////////////////////////////////////////////////////////////////////////
// parse urlOptions from location.hash
if( location.hash.substring(1) === '' ){
alert('location.hash MUST Exists')
}
var urlOptions = JSON.parse(decodeURIComponent(location.hash.substring(1)))
// history.pushState("", document.title, location.pathname + location.search);
// sanity check
console.assert( urlOptions.arAppURL !== undefined, 'urlOptions.arAppURL MUST be defined')
console.assert( urlOptions.markerPageResolution !== undefined, 'urlOptions.markerPageResolution MUST be defined')
console.assert( urlOptions.firebasePeerID !== undefined, 'urlOptions.firebasePeerID MUST be defined')
console.log('urlOptions', JSON.stringify(urlOptions, null, '\t'))
//////////////////////////////////////////////////////////////////////////////
// Code Separator
//////////////////////////////////////////////////////////////////////////////
document.querySelector('#iframeContainer iframe').src = urlOptions.arAppURL
//////////////////////////////////////////////////////////////////////////////
// Code Separator
//////////////////////////////////////////////////////////////////////////////
// create ARjsMultiMarkerFile from urlOptions.markerPageResolution
;(function(){
// get resolutionW/resolutionH
var matches = urlOptions.markerPageResolution.match(/(\d+)x(\d+)/)
console.assert(matches.length === 3)
var resolutionW = parseInt(matches[1])
var resolutionH = parseInt(matches[2])
// compute baseURL in absolute
var link = document.createElement("a");
link.href = "../../../";
THREEx.AugmentedWebpages.baseURL = link.protocol+"//"+link.host+link.pathname
// buildAreaFileFromResolution
var file = THREEx.AugmentedWebpages.buildAreaFileFromResolution(urlOptions.trackingBackend, resolutionW, resolutionH)
localStorage.setItem('ARjsMultiMarkerFile', JSON.stringify(file))
})()
//////////////////////////////////////////////////////////////////////////////
// handle firebase
//////////////////////////////////////////////////////////////////////////////
;(function(){
var firebasePeerID = urlOptions.firebasePeerID
// Initialize Firebase
var config = {
apiKey: "AIzaSyAKONfp5EmXuAlFmGGtmJcJiWg_Xyjb5SQ",
// authDomain: "augmented-webpages.firebaseapp.com",
databaseURL: "https://augmented-webpages.firebaseio.com",
// projectId: "augmented-webpages",
// storageBucket: "augmented-webpages.appspot.com",
// messagingSenderId: "128557805583"
};
var firebaseApp = firebase.initializeApp(config);
var rootRef = firebase.database().ref();
// Get a reference to the /users/ada node
var dataRef = firebase.database().ref('marker-page-'+firebasePeerID);
dataRef.update({
qrCodeToScan : false
}).then(function(){
console.log('firebase updated - ')
})
})()
})()
</script>
</body>
three.js/examples/augmented-website/app/js/threex-augmentedwebpages.js 已删除 100644 → 0
浏览文件 @ b1167725
var THREEx = THREEx || {}
THREEx.AugmentedWebpages = {}
THREEx.AugmentedWebpages.baseURL = '../../../'
// TODO find a better name
THREEx.AugmentedWebpages.buildAreaFileFromResolution = function(trackingBackend, resolutionW, resolutionH){
// create the base file
var file = {
meta : {
createdBy : "AR.js - Augmented Webpages",
createdAt : new Date().toJSON(),
},
arBackend : trackingBackend,
subMarkersControls : [
// empty for now...
]
}
var whiteMargin = 0.1
var markerImageSize = 0.4 * resolutionH
var outterMarkerSize = markerImageSize * (1 - 2*whiteMargin)
var deltaX = (resolutionW - markerImageSize)/2 / outterMarkerSize
var deltaZ = (resolutionH - markerImageSize)/2 / outterMarkerSize
var subMarkerControls = buildSubMarkerControls('center', 0, 0)
file.subMarkersControls.push(subMarkerControls)
var subMarkerControls = buildSubMarkerControls('topleft', -deltaX, -deltaZ)
file.subMarkersControls.push(subMarkerControls)
var subMarkerControls = buildSubMarkerControls('topright', +deltaX, -deltaZ)
file.subMarkersControls.push(subMarkerControls)
var subMarkerControls = buildSubMarkerControls('bottomleft', -deltaX, +deltaZ)
file.subMarkersControls.push(subMarkerControls)
var subMarkerControls = buildSubMarkerControls('bottomright', +deltaX, +deltaZ)
file.subMarkersControls.push(subMarkerControls)
return file
//////////////////////////////////////////////////////////////////////////////
// Code Separator
//////////////////////////////////////////////////////////////////////////////
function buildSubMarkerControls(layout, positionX, positionZ){
// create subMarkersControls
var subMarkersControls = {
parameters: {},
poseMatrix: new THREE.Matrix4().makeTranslation(positionX, 0, positionZ).toArray(),
}
// fill the parameters
if( trackingBackend === 'artoolkit' ){
layout2MarkerParametersArtoolkit(subMarkersControls.parameters, layout)
}else if( trackingBackend === 'aruco' ){
layout2MarkerParametersAruco(subMarkersControls.parameters, layout)
}else console.assert(false)
// return subMarkersControls
return subMarkersControls
}
function layout2MarkerParametersArtoolkit(parameters, layout){
var layout2PatternUrl = {
'center' : THREEx.AugmentedWebpages.baseURL + 'examples/marker-training/examples/pattern-files/pattern-hiro.patt',
'topleft' : THREEx.AugmentedWebpages.baseURL + 'examples/marker-training/examples/pattern-files/pattern-letterA.patt',
'topright' : THREEx.AugmentedWebpages.baseURL + 'examples/marker-training/examples/pattern-files/pattern-letterB.patt',
'bottomleft' : THREEx.AugmentedWebpages.baseURL + 'examples/marker-training/examples/pattern-files/pattern-letterC.patt',
'bottomright' : THREEx.AugmentedWebpages.baseURL + 'examples/marker-training/examples/pattern-files/pattern-letterF.patt',
}
console.assert(layout2PatternUrl[layout])
parameters.type = 'pattern'
parameters.patternUrl = layout2PatternUrl[layout]
}
function layout2MarkerParametersAruco(parameters, layout){
var layout2Barcode = {
'center' : 1001,
'topleft' : 1002,
'topright' : 1003,
'bottomleft' : 1004,
'bottomright' : 1005,
}
console.assert(layout2Barcode[layout])
parameters.type = 'barcode'
parameters.barcodeValue = layout2Barcode[layout]
}
}
three.js/examples/augmented-website/index.html 已删除 100644 → 0
浏览文件 @ b1167725
<!DOCTYPE html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='description' content='A front-end template that helps you build fast, modern mobile web apps.'>
<meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0'>
<!-- open graph card - http://ogp.me/ -->
<meta property="og:title" content="Augmented Website" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://jeromeetienne.github.io/AR.js/data/logo/logo-alone-512x512.png" />
<meta property="og:description" content="Bringing AR to any website" />
<meta property="og:url" content="https://jeromeetienne.github.io/AR.js/three.js/examples/augmented-website/" />
<!-- twitter card - https://dev.twitter.com/cards/types -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@jerome_etienne" />
<meta name="twitter:creator" content="@jerome_etienne" />
<meta name="twitter:domain" content="arjs.org" />
<meta name="twitter:title" content="Augmented Website" />
<meta name="twitter:url" content="https://jeromeetienne.github.io/AR.js/three.js/examples/augmented-website/" />
<meta name="twitter:description" content="Bringing AR to any website" />
<meta name="twitter:image:src" content="https://jeromeetienne.github.io/AR.js/data/logo/logo-alone-512x512.png" />
<title>Augmented Website with AR.js - Bringing AR to Any Website</title>
<!-- Add to homescreen for Chrome on Android -->
<meta name='mobile-web-app-capable' content='yes'>
<!-- IOS: Set your app to full screen mode -->
<meta name='apple-mobile-web-app-capable' content='yes'>
<!-- dialog-polyfill -->
<link rel='stylesheet' href='landing-page/vendor/dialog-polyfill/dialog-polyfill.css'>
<script src='landing-page/vendor/dialog-polyfill/dialog-polyfill.js'></script>
<!-- getmdl.io -->
<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'>
<!-- https://davidshimjs.github.io/qrcodejs/ -->
<script defer src='https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js'></script>
<link rel='stylesheet' href='landing-page/css/main.css'>
<link rel='stylesheet' href='landing-page/css/markers-overlay.css'>
<script defer src='https://apis.google.com/js/client.js'></script>
<script defer src='landing-page/js/urlshortener.js'></script>
<script defer src='https://www.gstatic.com/firebasejs/4.1.3/firebase.js'></script>
<script defer src='landing-page/js/firebase.js'></script>
<script defer src='landing-page/js/markers-page.js'></script>
<script defer src='landing-page/js/fullscreen.js'></script>
<script defer src='landing-page/js/arAppURL.js'></script>
<script defer src='landing-page/js/dialog.js'></script>
</head>
<body>
<!-- marker page -->
<div id='markers-page' style='display: none;'>
<div style='position: absolute; top: 10px; width:100%; text-align: center;';>
filter brightness <span class='currentBrightness'></span>
-
filter opacity <span class='currentOpacity'></span>
-
arrow keys to tune
<br/>
<a href='javascript:void(0)' onclick='markersPageLeave()'>Back to qrcode</a>
</div>
<div style='position: absolute; bottom: 10px; width:100%; text-align: center;';>
Tracking backend:
<a href='javascript:void(0)' onclick='markersPageSetTrackingBackend('artoolkit')'>artoolkit</a> /
<a href='javascript:void(0)' onclick='markersPageSetTrackingBackend('aruco')'>aruco</a>
- Current : <span id='currentTracking'></span>
</div>
<div class='markers-aruco'>
<img class='marker-center marker-image' src='landing-page/images/markers-aruco/1001.png'>
<img class='marker-topleft marker-image' src='landing-page/images/markers-aruco/1002.png'>
<img class='marker-topright marker-image' src='landing-page/images/markers-aruco/1003.png'>
<img class='marker-bottomleft marker-image' src='landing-page/images/markers-aruco/1004.png'>
<img class='marker-bottomright marker-image' src='landing-page/images/markers-aruco/1005.png'>
</div>
<div class='markers-artoolkit'>
<img class='marker-center marker-image' src='landing-page/images/markers-artoolkit/pattern-hiro.png'>
<img class='marker-topleft marker-image' src='landing-page/images/markers-artoolkit/pattern-letterA.png'>
<img class='marker-topright marker-image' src='landing-page/images/markers-artoolkit/pattern-letterB.png'>
<img class='marker-bottomleft marker-image' src='landing-page/images/markers-artoolkit/pattern-letterC.png'>
<img class='marker-bottomright marker-image' src='landing-page/images/markers-artoolkit/pattern-letterF.png'>
</div>
<div class='filter'></div>
</div>
<!-- Always shows a header, even in smaller screens. -->
<div class='mdl-layout mdl-js-layout mdl-layout--fixed-header'>
<header class='mdl-layout__header'>
<div class='mdl-layout__header-row' id='infoPageHeader'>
<!-- Title -->
<span id='infoPageTitle' class='mdl-layout-title'>Augmented Website with <a href='https://github.com/jeromeetienne/ar.js' target='_blank'>AR.js</a>
<br/>
<span style='font-size: 80%; color: #ccc;'>Bringing AR to Any Website</span></span>
</div>
</header>
<main class='mdl-layout__content'>
<div class='page-content'>
<!-- Fullscreen Button -->
<button id='fullscreenButton' class='mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect'>
<i class='material-icons'>fullscreen</i>
</button>
<!-- INFO BUTTON and DIALOG -->
<button id='infoButton' class='mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect'>
<i class='material-icons'>info_outline</i>
</button>
<dialog id='infoDialog' class='mdl-dialog'>
<img class='close' src='https://d30y9cdsu7xlg0.cloudfront.net/png/53504-200.png' style='cursor: pointer; float: right; width: 3em'/>
<h4 class='mdl-dialog__title'>Augmented Web Pages</h4>
<div class='mdl-dialog__content'>
<p>
Augmented webpages is a way to bring
augmented reality to any webpages with AR.js.
See more about this in this <a href='https://medium.com/arjs/augmenting-the-web-page-e893f2d199b8' target='_blank'>post</a>.
</p>
<iframe width='560' height='315' src='https://www.youtube.com/embed/sp7Wxk1yVcY' frameborder='0' allowfullscreen></iframe>
</div>
</dialog>
<!-- help BUTTON and DIALOG -->
<button id='helpButton' class='mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect'>
<i class='material-icons'>link</i>
</button>
<dialog id='helpDialog' class='mdl-dialog'>
<img class='close' src='https://d30y9cdsu7xlg0.cloudfront.net/png/53504-200.png' style='cursor: pointer; float: right; width: 3em'/>
<h4 class='mdl-dialog__title'>Sharing links between Web Pages</h4>
<div class='mdl-dialog__content'>
You need to open the AR application on your phone.
The QRCode is likely the easiest way. But here are other ways.
<br/>
<br/>
<strong>AR Application URL :</strong>
<input id='arAppURLView' type='text' style='width: 100%'>
<br/>
<br/>
You can simply copy paste the link. Up to you to send it to your phone.
You can use twitter, facebook or other. You can even
<a id='emailURLtoMeLink' href='#' target='_blank'>email it to yourself</a>.
Or simple type it by hand.
<br/>
<br/>
Currently the resolution is <span id='markerPageResolution'>unknown</a>.
</div>
</dialog>
<!-- MIDDLE QRCODE CARD -->
<div class='mdl-grid' style='justify-content: center'>
<div class='mdl-cell mdl-cell--4-col'>
<div id='scanThisQRCode' class='mdl-card mdl-shadow--2dp' style='justify-content: center'>
<div class='mdl-card__title'>
<h2 class='mdl-card__title-text'>Scan this QR-Code</h2>
</div>
<div class='mdl-card__supporting-text'>
<div id='qrCodeContainer'></div>
</div>
<div class='mdl-card__actions mdl-card--border'>
<a onclick='markersPageEnter()' class='mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect' style='width: 90%'>
Done
</a>
</div>
</div>
</div>
</div>
</div>
<div style='position: absolute; bottom: 10px; width:100%; text-align: center;';>
Made with love by <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>.
Create your own AR on augmented-website with <a id='webARPlaygroundLink' href='?https://jeromeetienne.github.io/webar-playground/'>WebAR Playground</a>.
Direct link to the <a target='_blank' id='arAppURLLink' href='javascript:void(0)'>app</a>
</div>
</main>
</div>
<!-- getmdl.io -->
<script defer src='https://code.getmdl.io/1.3.0/material.min.js'></script>
<!-- from https://davidshimjs.github.io/qrcodejs/ -->
<script defer src='https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js'></script>
<script defer src='landing-page/js/main.js'></script>
</body>
three.js/examples/augmented-website/landing-page/css/main.css 已删除 100644 → 0
浏览文件 @ b1167725
body {
height: 100%
}
.mdl-card {
width: 100%;
}
#fullscreenButton {
position: absolute;
right: 1em;
top: 5em;
}
/* infoButton and infoDialog*/
#infoButton {
position: absolute;
right: 1em;
top: 1em;
}
#infoDialog {
min-width: 30%;
}
/* helpButton and helpDialog*/
#helpButton {
position: absolute;
right: 1em;
bottom: 1em;
}
#helpDialog {
min-width: 30%;
}
/*info page*/
#infoPageTitle {
font-size: 150%;
}
#infoPageHeader {
justify-content: center;
margin: 1.5em;
padding-left: 16px;
}
@media (min-width: 768px) {
#infoPageTitle {
font-size: 300%;
}
}
three.js/examples/augmented-website/landing-page/css/markers-overlay.css 已删除 100644 → 0
浏览文件 @ b1167725
#markers-page {
background-color: black;
color: lightgray;
height: 100%;
position: relative;
top: 0%;
left: 0%;
}
#markers-page .filter {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(127,127,127,0.5);
/*z-index: 3;*/
pointer-events: none;
}
/*============================================================================*/
/*============================================================================*/
/*============================================================================*/
/*============================================================================*/
.marker-image {
height:40%;
}
.marker-center {
position: absolute;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
.marker-topleft {
position: absolute;
top: 0;
left: 0;
}
.marker-topright {
position: absolute;
top: 0;
right: 0;
}
.marker-bottomleft {
position: absolute;
bottom: 0;
left: 0;
}
.marker-bottomright{
position: absolute;
bottom: 0;
right: 0;
}
.trackingBackend-aruco .markers-artoolkit {
display : none;
}
.trackingBackend-aruco .markers-aruco {
display : block;
}
.trackingBackend-artoolkit .markers-artoolkit {
background-color: #444;
display : block;
}
.trackingBackend-artoolkit .markers-aruco {
display : none;
}
three.js/examples/augmented-website/landing-page/js/arAppURL.js 已删除 100644 → 0
浏览文件 @ b1167725
//////////////////////////////////////////////////////////////////////////////
// arAppURL
//////////////////////////////////////////////////////////////////////////////
function arAppURLInit(){
updateArAppURL()
window.addEventListener('resize', function(){
updateArAppURL()
})
// select input on click - easier user experience
document.querySelector("#arAppURLView").addEventListener('click', function() {
this.select();
document.execCommand('copy');
})
}
function arAppURLUpdatePage(url){
// Update url in the webpage
document.body.querySelector('#arAppURLView').value = url
document.body.querySelector('#arAppURLLink').href = url
// prepare emailURLtoMeLink
var mailBody = `DO NOT forget the change the recipient email address before sending it :)
The AR.js App is at ${url}
`
var mailtoUrl = 'mailto:your-goes-here-name@example.com?subject=Augmented%20Webpages%20URL&body='+encodeURIComponent(mailBody)
document.body.querySelector('#emailURLtoMeLink').href = mailtoUrl
// create qrCode
;(function(){
// if( arAppURL.length > 190 ){
// console.log('arAppURL too long. cant be encoded in qrCode')
// return
// }
var container = document.createElement('div')
var qrcode = new QRCode(container, {
text: url,
width: 256,
height: 256,
colorDark : '#000000',
colorLight : '#ffffff',
});
var qrCodeImage = container.querySelector('img')
qrCodeImage.style.width='100%'
var containerElement = document.body.querySelector('#qrCodeContainer')
while (containerElement.firstChild){
containerElement.removeChild(containerElement.firstChild);
}
containerElement.appendChild(qrCodeImage)
})()
}
function updateArAppURL(){
//////////////////////////////////////////////////////////////////////////////
// build urlOptions
//////////////////////////////////////////////////////////////////////////////
// build urlOptions
var urlOptions = {
trackingBackend: 'artoolkit',
markerPageResolution: window.innerWidth + 'x' + window.innerHeight,
firebasePeerID: (typeof(firebasePeerID) !== 'undefined' && firebasePeerID !== null) ? firebasePeerID : undefined,
}
// if( typeof(firebasePeerID) !== 'undefined' && firebasePeerID !== null ){
// urlOptions.firebasePeerID = firebasePeerID
// }
//
// build arAppURL
if( location.search.substring(1) ){
urlOptions.arAppURL = location.search.substring(1)
}else{
// 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(/[^\/]*$/, '') + '../screenAsPortal/index.html'
}
//////////////////////////////////////////////////////////////////////////////
// build url and update page
//////////////////////////////////////////////////////////////////////////////
// build nextUrl
var tmpLink = document.createElement('a');
tmpLink.href = 'app/' + '#' + encodeURIComponent(JSON.stringify(urlOptions));
// tmpLink.href = '../vendor/ar.js/three.js/examples/augmented-website/app/' + '#' + encodeURIComponent(JSON.stringify(urlOptions));
var nextUrl = tmpLink.href
// Should this url be shortened
var shouldShortenUrl = true
// if localhost, then goo.gl refuse to minimise
var linkElement = document.createElement('a')
linkElement.href = nextUrl
if( linkElement.hostname === '127.0.0.1' || linkElement.hostname === 'localhost' ){
shouldShortenUrl = false
}
// is goo.gl available ?
if( typeof(gapi) === 'undefined' || gapi.client === undefined || gapi.client.urlshortener === undefined ){
shouldShortenUrl = false
}
if( shouldShortenUrl === false ){
arAppURLUpdatePage(nextUrl)
}else{
googlMinify(nextUrl, function(shortURL){
arAppURLUpdatePage(shortURL)
})
}
}
three.js/examples/augmented-website/landing-page/js/dialog.js 已删除 100644 → 0
浏览文件 @ b1167725
function dialogsInit(){
// register all dialog domElement with dialogPolyfill
var dialogs = document.querySelectorAll('dialog');
for(var i = 0; i < dialogs.length; i++){
dialogPolyfill.registerDialog(dialogs[i]);
}
// infoDialog and infoDialog
document.querySelector('#infoButton').addEventListener('click', function(){
document.querySelector('#infoDialog').showModal()
})
document.querySelector('#infoDialog .close').addEventListener('click', function(){
document.querySelector('#infoDialog').close()
})
// helpDialog and helpDialog
document.querySelector('#helpButton').addEventListener('click', function(){
document.querySelector('#helpDialog').showModal()
})
document.querySelector('#helpDialog .close').addEventListener('click', function(){
document.querySelector('#helpDialog').close()
})
}
three.js/examples/augmented-website/landing-page/js/firebase.js 已删除 100644 → 0
浏览文件 @ b1167725
var firebasePeerID = null
function firebaseInit(){
firebasePeerID = createGUID()
// add the firebasePeerID in the arAppURL
updateArAppURL()
// Initialize Firebase
var config = {
apiKey: "AIzaSyAKONfp5EmXuAlFmGGtmJcJiWg_Xyjb5SQ",
// authDomain: "augmented-webpages.firebaseapp.com",
databaseURL: "https://augmented-webpages.firebaseio.com",
// projectId: "augmented-webpages",
// storageBucket: "augmented-webpages.appspot.com",
// messagingSenderId: "128557805583"
};
firebase.initializeApp(config)
var dataRef = firebase.database().ref('marker-page-'+firebasePeerID)
dataRef.set({
qrCodeToScan: true,
createdAt : new Date().toJSON()
})
dataRef.on('value', function(snapshot){
// console.log('new value', snapshot.val())
if( snapshot.val().qrCodeToScan === false ){
console.log('qrcode scanned')
markersPageEnter()
dataRef.update({
qrCodeToScan : true
})
}
})
// remove all records older than 30min
purgeObsoleteRecords(30*60)
return
//////////////////////////////////////////////////////////////////////////////
// create GUID
//////////////////////////////////////////////////////////////////////////////
function createGUID() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1)
}
// return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4()
return s4() + s4()
}
function purgeObsoleteRecords(maxAge){
var ref = firebase.database().ref()
ref.on("child_added", function(snapshot){
if( snapshot.key.match('marker-page-') === null ) return
var createdAtString = snapshot.child("createdAt").val()
var createdAt = new Date(createdAtString)
var ageSeconds = (Date.now() - createdAt.getTime()) / 1000
if( ageSeconds > maxAge ){
snapshot.ref.remove()
}
})
}
}
three.js/examples/augmented-website/landing-page/js/fullscreen.js 已删除 100644 → 0
浏览文件 @ b1167725
//////////////////////////////////////////////////////////////////////////////
// toggleFullScreen
//////////////////////////////////////////////////////////////////////////////
// from https://stackoverflow.com/questions/21280966/toggle-fullscreen-exit
function fullScreenSet(enabled) {
if ( enabled === true ){
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
}else if ( enabled === false){
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}else console.assert(false)
}
function fullscreenToggle(){
if( isFullscreen() ){
fullScreenSet(false)
}else{
fullScreenSet(true)
}
}
function fullscreenInit(){
document.querySelector('#fullscreenButton').addEventListener('click', function(){
fullscreenToggle()
})
document.addEventListener('keydown', function(event){
if( event.code !== 'KeyT' ) return
fullscreenToggle()
})
// document.addEventListener("webkitfullscreenchange", function( event ) {
// if( isFullscreen() === false ){
// markersPageLeave()
// }
// })
// document.addEventListener("webkitfullscreenchange", function( event ) {
// if( isFullscreen() === true ){
// markersPageEnter()
// }else{
// markersPageLeave()
// }
// })
}
function isFullscreen(){
return document.webkitIsFullScreen
}
three.js/examples/augmented-website/landing-page/js/main.js 已删除 100644 → 0
浏览文件 @ b1167725
googlInit()
firebaseInit()
arAppURLInit()
markersPageInit()
fullscreenInit()
dialogsInit()
// kludge to display resolution - used to debug
;(function(){
window.addEventListener('resize', onResize)
onResize()
function onResize(){
document.querySelector('#markerPageResolution').innerHTML = window.innerWidth + 'x' + window.innerHeight
}
})()
three.js/examples/augmented-website/landing-page/js/markers-page.js 已删除 100644 → 0
浏览文件 @ b1167725
function markersPageInit(){
markersPageUpdateBrightnessOpacity()
markersPageSetTrackingBackend('artoolkit')
document.body.addEventListener('keydown', function(event){
if( event.code !== 'Space' ) return
markersPageEnter()
})
document.body.addEventListener('keydown', function(event){
if( event.code !== 'Backspace' && event.code !== 'Escape' ) return
markersPageLeave()
})
document.body.addEventListener('keydown', function(event){
if( event.code === 'ArrowLeft' ){
markersPageBrightness -= 0.025
}else if( event.code === 'ArrowRight' ){
markersPageBrightness += 0.025
}else if( event.code === 'ArrowUp' ){
markersPageOpacity += 0.025
}else if( event.code === 'ArrowDown' ){
markersPageOpacity -= 0.025
}else{
return
}
markersPageUpdateBrightnessOpacity()
})
// remove location.hash
// history.pushState("", document.title, location.pathname + location.search);
window.addEventListener('popstate', function(event){
if(event.state === undefined ) return
if( event.state.plate === 'MarkersPage' ) markersPageSetVisibility(true)
if( event.state.plate === 'LandingPage' ) markersPageSetVisibility(false)
})
}
//////////////////////////////////////////////////////////////////////////////
// markersPage
//////////////////////////////////////////////////////////////////////////////
function markersPageEnter(){
// debugger
history.pushState( {
plate: "MarkersPage"
}, null, "#markers-page");
markersPageSetVisibility(true)
}
function markersPageLeave(){
history.pushState( {
plate: "LandingPage"
}, null, ".");
markersPageSetVisibility(false)
}
function markersPageSetVisibility(visible){
if( visible === true ){
document.querySelector('#markers-page').style.display = 'block'
document.querySelector('.mdl-layout__container').style.display = 'none'
}else if( visible === false ){
document.querySelector('#markers-page').style.display = 'none'
document.querySelector('.mdl-layout__container').style.display = 'block'
}else console.assert(false)
}
//////////////////////////////////////////////////////////////////////////////
// markersPage brightness/contrast
//////////////////////////////////////////////////////////////////////////////
var markersPageBrightness = 0
var markersPageOpacity = 0.5
function markersPageUpdateBrightnessOpacity(){
// normalize values
markersPageBrightness = Math.max(0, Math.min(1, markersPageBrightness))
markersPageOpacity = Math.max(0, Math.min(1, markersPageOpacity))
// update css
var domElement = document.querySelector('#markers-page .filter')
var colorRgba = 'rgba(' + Math.round(markersPageBrightness * 255)
+ ', ' + Math.round(markersPageBrightness * 255)
+ ', ' + Math.round(markersPageBrightness * 255)
+ ', ' + (1-markersPageOpacity)
+ ')'
domElement.style.backgroundColor = colorRgba
// update views1
document.querySelector('#markers-page .currentBrightness').innerHTML = markersPageBrightness.toFixed(3)
document.querySelector('#markers-page .currentOpacity').innerHTML = markersPageOpacity.toFixed(3)
}
//////////////////////////////////////////////////////////////////////////////
// markersPageSetTrackingBackend
//////////////////////////////////////////////////////////////////////////////
function markersPageSetTrackingBackend(trackingBackend){
// trackingBackend feedback
document.querySelector('#currentTracking').innerHTML = trackingBackend
// remove previous classes
document.body.classList.remove('trackingBackend-artoolkit')
document.body.classList.remove('trackingBackend-aruco')
// set the proper class
if( trackingBackend === 'artoolkit' ){
document.body.classList.add('trackingBackend-artoolkit')
}else if( trackingBackend === 'aruco' ){
document.body.classList.add('trackingBackend-aruco')
}else console.assert(false)
}
three.js/examples/augmented-website/landing-page/js/package.json 已删除 100644 → 0
浏览文件 @ b1167725
{
"name": "get-started-node",
"version": "0.1.0",
"dependencies": {
"micro": "latest"
}
}
three.js/examples/augmented-website/landing-page/js/urlshortener.js 已删除 100644 → 0
浏览文件 @ b1167725
function googlInit(){
var timerId = setInterval(function(){
if( gapi.client === undefined ) return
clearInterval(timerId)
timerId = null
gapi.client.setApiKey('AIzaSyDehQAfFZ9COHDLsvg8tIv7m4I4ySIc0e4');
gapi.client.load('urlshortener', 'v1', function() {
console.log('urlshortener loaded')
// TODO do a callback here
updateArAppURL()
})
}, 1000/10)
}
function googlMinify(longURL, onComplete){
var request = gapi.client.urlshortener.url.insert({
'resource': {
'longUrl': longURL
}
});
request.execute(function(response) {
var shortURL = response.id
if (response.id != null) {
onComplete(shortURL)
}else{
onComplete(longURL)
console.error("Error: creating short url", response.error);
}
});
}
three.js/examples/augmented-website/landing-page/tmp/index-mdl.html 已删除 100644 → 0
浏览文件 @ b1167725
<!-- needed to render correctly on mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- getmdl.io -->
<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">
<style media="screen">
.mdl-card {
width: 100%;
}
</style>
<body>
<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row" style='justify-content: center'>
<!-- Title -->
<span class="mdl-layout-title">Augmented Webpages</span>
</div>
</header>
<main class="mdl-layout__content">
<div class="page-content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col"></div>
<div class="mdl-cell mdl-cell--4-col">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Scan this QR-Code</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sagittis pellentesque lacus eleifend lacinia...
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Done
</a>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col"></div>
</div>
</div>
</main>
</div>
<!-- getmdl.io -->
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<!-- from https://davidshimjs.github.io/qrcodejs/ -->
<script defer src='https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js'></script>
</body>
three.js/examples/augmented-website/landing-page/tmp/markers-page.html 已删除 100644 → 0
浏览文件 @ b1167725
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style media='screen'>
body {
background-color: #222;
}
.marker-image {
height:40%;
}
.marker-center {
position: absolute;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
.marker-topleft {
position: absolute;
top: 0;
left: 0;
}
.marker-topright {
position: absolute;
top: 0;
right: 0;
}
.marker-bottomleft {
position: absolute;
bottom: 0;
left: 0;
}
.marker-bottomright{
position: absolute;
bottom: 0;
right: 0;
}
.trackingBackend-aruco .markers-artoolkit {
display : none;
}
.trackingBackend-aruco .markers-aruco {
display : block;
}
.trackingBackend-artoolkit .markers-artoolkit {
background-color: #444;
display : block;
}
.trackingBackend-artoolkit .markers-aruco {
display : none;
}
</style>
<body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
<div style='position: absolute; bottom: 10px; width:100%; text-align: center;';>
<a href='https://github.com/jeromeetienne/AR.js/' target='_blank'>AR.js</a> - Augmenting the screen - screen as a portal
by <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
<br/>
Tracking backend:
<a href='javascript:void(0)' onclick='setTrackingBackend("artoolkit")'>artoolkit</a> /
<a href='javascript:void(0)' onclick='setTrackingBackend("aruco")'>aruco</a>
Current : <span id='currentTracking'></span>
<br/>
<a href='javascript:void(0)' onclick='toggleFullScreen()'>fullscreen</a>
<!-- /
<a href='index.html'>landing page</a> -->
</div>
<div class='markers-aruco'>
<img class='marker-center marker-image' src='../../../../three.js/threex/threex-aruco/examples/images/1001.png'>
<img class='marker-topleft marker-image' src='../../../../three.js/threex/threex-aruco/examples/images/1002.png'>
<img class='marker-topright marker-image' src='../../../../three.js/threex/threex-aruco/examples/images/1003.png'>
<img class='marker-bottomleft marker-image' src='../../../../three.js/threex/threex-aruco/examples/images/1004.png'>
<img class='marker-bottomright marker-image' src='../../../../three.js/threex/threex-aruco/examples/images/1005.png'>
</div>
<div class='markers-artoolkit'>
<img class='marker-center marker-image' src='../../../../three.js/examples/marker-training/examples/pattern-images/pattern-hiro.png'>
<img class='marker-topleft marker-image' src='../../../../three.js/examples/marker-training/examples/pattern-images/pattern-letterA.png'>
<img class='marker-topright marker-image' src='../../../../three.js/examples/marker-training/examples/pattern-images/pattern-letterB.png'>
<img class='marker-bottomleft marker-image' src='../../../../three.js/examples/marker-training/examples/pattern-images/pattern-letterC.png'>
<img class='marker-bottomright marker-image' src='../../../../three.js/examples/marker-training/examples/pattern-images/pattern-letterF.png'>
</div>
<script>
// honor trackingBackend
var trackingBackend = location.hash.substring(1) || 'artoolkit'
setTrackingBackend(trackingBackend)
function setTrackingBackend(trackingBackend){
document.body.classList.remove('trackingBackend-artoolkit')
document.body.classList.remove('trackingBackend-aruco')
document.querySelector('#currentTracking').innerHTML = trackingBackend
if( trackingBackend === 'artoolkit' ){
document.body.classList.add('trackingBackend-artoolkit')
}else if( trackingBackend === 'aruco' ){
document.body.classList.add('trackingBackend-aruco')
}else console.assert(false)
}
// from https://stackoverflow.com/questions/21280966/toggle-fullscreen-exit
function toggleFullScreen() {
if (!document.fullscreenElement
&& !document.mozFullScreenElement
&& !document.webkitFullscreenElement && !document.msFullscreenElement
) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
</script>
</body>
three.js/examples/augmented-website/landing-page/vendor/dialog-polyfill/dialog-polyfill.css 已删除 100644 → 0
浏览文件 @ b1167725
dialog {
position: absolute;
left: 0; right: 0;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
height: -moz-fit-content;
height: -webkit-fit-content;
height: fit-content;
margin: auto;
border: solid;
padding: 1em;
background: white;
color: black;
display: block;
}
dialog:not([open]) {
display: none;
}
dialog + .backdrop {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
background: rgba(0,0,0,0.1);
}
._dialog_overlay {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
}
dialog.fixed {
position: fixed;
top: 50%;
transform: translate(0, -50%);
}
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或