Skip to content

A
AR.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
A
AR.js

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

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

cleanup aframe examples

上级 00b51d8c
隐藏空白更改
内联 并排
Showing with 123 addition and 145 deletion
aframe/examples/aframe-session-dynamic.html
浏览文件 @ 97e465e0
<!DOCTYPE html>
<!-- include a-frame -->
<!-- <script src="vendor/aframe/build/aframe.js"></script> -->
<script src="vendor/aframe-v0.6.1-three-r86.js"></script>
<script src="vendor/aframe/build/aframe.min.js"></script>
<!-- include ar.js -->
<script src='../build/aframe-ar.js'></script>
<script>ARjs.Context.baseURL = '../../three.js/'</script>
......
aframe/examples/basic.html
浏览文件 @ 97e465e0
<!DOCTYPE html>
<!-- include aframe -->
<script src="vendor/aframe/build/aframe.js"></script>
<!-- include aframe-ar.js -->
<script src="../build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden; font-family: Monospace;'><div style='position: fixed; top: 10px; width:inherit; text-align: center; z-index: 1;'>
<a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - example for a-frame
<br/>
Contact me any time at <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
</div>
<!-- enable ar.js on this scene -->
<a-scene embedded arjs='sourceType: image; sourceUrl:../../data/images/img.jpg;'>
<!-- <a-scene embedded ar.js='sourceType: webcam;'> -->
<!-- define a marker -->
<a-marker preset='hiro'>
<!-- define the object which gonna be put on this marker -->
<a-box position='0 0.5 0' material='opacity: 0.5; side: double'>
<!-- include a-frame -->
<script src="vendor/aframe/build/aframe.min.js"></script>
<!-- include ar.js for aframe -->
<script src='../build/aframe-ar.js'></script>
<script>ARjs.Context.baseURL = '../../three.js/'</script>
<!-- start the body of your page -->
<body style='margin : 0px; overflow: hidden;'>
<!-- add some info at the top of the page -->
<div style='position: fixed; top: 10px; width:inherit; text-align: center; z-index: 1;'>
<a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - tango example for a-frame by <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
<br/>
<div id="arjsDebugUIContainer"></div>
</div>
<!-- Define your scene -->
<a-scene embedded arjs='trackingMethod: best; debugUIEnabled: true;'>
<!-- Create a anchor to attach your augmented reality -->
<a-anchor hit-testing-enabled='true'>
<!-- Add your augmented reality here -->
<a-box position='0 0.5 0' material='opacity: 0.5; side:double; color:red;'>
<a-torus-knot radius='0.26' radius-tubular='0.05'>
<a-animation attribute="rotation" to="360 0 0" dur="5000" easing='linear' repeat="indefinite"></a-animation>
</a-torus-knot>
</a-box>
</a-marker>
<!-- define a simple camera -->
<a-entity camera></a-entity>
</a-anchor>
<!-- Define a static camera -->
<a-camera-static/>
</a-scene>
</body>
</html>
aframe/examples/dev-old.html 已删除 100644 → 0
浏览文件 @ 00b51d8c
<!DOCTYPE html>
<!-- <script src="vendor/aframe/build/aframe.min.js"></script> -->
<script src="vendor/aframe/build/aframe.min.js"></script>
<!-- jsartookit -->
<script src="../../three.js/vendor/jsartoolkit5/build/artoolkit.min.js"></script>
<script src="../../three.js/vendor/jsartoolkit5/js/artoolkit.api.js"></script>
<!-- include ar.js -->
<script src="../../three.js/threex-artoolkitcontext.js"></script>
<script src="../../three.js/threex-artoolkitsource.js"></script>
<script src='../../three.js/threex-artoolkitprofile.js'></script>
<script src="../../three.js/threex-arbasecontrols.js"></script>
<script src="../../three.js/threex-armarkercontrols.js"></script>
<script src="../../three.js/threex-armarkerhelper.js"></script>
<script src="../../three.js/threex-arsmoothedcontrols.js"></script>
<script src='../../three.js/examples/multi-markers/threex-armultimarkerutils.js'></script>
<script src='../../three.js/examples/multi-markers/threex-armultimarkercontrols.js'></script>
<script src='../../three.js/examples/multi-markers/threex-armultimarkerlearning.js'></script>
<!-- aframe-artoolkit -->
<script src="../src/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden; font-family: Monospace;'><div style='position: fixed; top: 10px; width:inherit; text-align: center; z-index: 1;'>
<a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - example for a-frame
<br/>
Contact me any time at <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
</div>
<!-- <a-scene embedded arjs='sourceType: video; sourceUrl:../../data/videos/headtracking.mp4;'> -->
<!-- <a-scene embedded arjs='sourceType: image; sourceUrl:../../data/images/armchair.jpg;'> -->
<a-scene embedded arjs='sourceType: webcam;'>
<!-- <a-scene arjs='sourceType: image; sourceUrl:../../data/images/screenshot.png'> -->
<!-- <a-scene arjs='sourceType: image; sourceUrl:../../data/images/img.jpg'> -->
<!-- <a-scene arjs='sourceType: webcam'> -->
<a-box depth="1" height="1" width="1" position='0 0.5 0' material='opacity: 0.5; side:double; color:blue;'></a-box>
<!-- <a-marker-camera type='pattern' patternUrl='../../data/data/patt.hiro'></a-marker-camera> -->
<a-marker-camera preset='hiro'></a-marker-camera>
</a-scene>
</body>
</html>
aframe/examples/tango-demo.html 0 → 100644
浏览文件 @ 97e465e0
<!-- include a-frame -->
<script src="vendor/aframe/build/aframe.min.js"></script>
<!-- include aframe-ar.js -->
<script src='../build/aframe-ar.js'></script>
<script>ARjs.Context.baseURL = '../../three.js/'</script>
<body style='margin : 0px; overflow: hidden;'>
<div style='position: fixed; top: 10px; width:inherit; text-align: center; z-index: 1;'>
<a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - tango example for a-frame by <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
<br/>
<div id="arjsDebugUIContainer"></div>
</div>
<!-- Define your scene -->
<a-scene embedded arjs='trackingMethod: tango; debugUIEnabled: true;'>
<!-- Create a anchor to attach your augmented reality -->
<a-anchor hit-testing-enabled='true'>
<!-- Add your augmented reality here -->
<a-box position='0 0.5 0' material='opacity: 0.5; side:double; color:red;'>
<a-torus-knot radius='0.26' radius-tubular='0.05'>
<a-animation attribute="rotation" to="360 0 0" dur="5000" easing='linear' repeat="indefinite"></a-animation>
</a-torus-knot>
</a-box>
</a-anchor>
<!-- Define a static camera -->
<a-camera-static/>
</a-scene>
</body>
aframe/examples/tracking-multimarkers.html 已删除 100644 → 0
浏览文件 @ 00b51d8c
<!DOCTYPE html>
<!-- include a-frame -->
<script src="vendor/aframe/build/aframe.min.js"></script>
<!-- include aframe-ar.js -->
<script src="../build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden; font-family: Monospace;'><div style='position: fixed; top: 10px; width:inherit; text-align: center; z-index: 1;'>
<a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - multi markers example for a-frame by <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
<br/>
Try with <a href='javascript:void(0)' id='augmentedWebsiteButton' target='_blank'>augmented-website</a>
<script type="text/javascript">
document.querySelector('#augmentedWebsiteButton').addEventListener('click', function(){
var arjsSystem = document.querySelector('a-scene').systems.arjs
arjsSystem.navigateToLearnerPage()
})
</script>
</div>
<a-scene embedded arjs='sourceType: webcam;'>
<a-marker preset='area' markerhelpers=true>
<a-box position='0 0.5 0' material='opacity: 0.5; side: double;color:red;'></a-box>
</a-marker>
<!-- add a simple camera -->
<a-entity camera></a-entity>
<!-- <a-box position='0 0.5 0' material='opacity: 0.5; side:double; color:blue;'></a-box>
<a-marker-camera preset='area'></a-marker-camera> -->
</a-scene>
</body>
</html>
aframe/examples/tracking-new-multimarkers.html 已删除 100644 → 0
浏览文件 @ 00b51d8c
<!DOCTYPE html>
<!-- include a-frame -->
<script src="vendor/aframe/build/aframe.min.js"></script>
<!-- include aframe-ar.js -->
<script src="../src/aframe-ar-new.js"></script>
<!-- include for artookit tracking -->
<script src="../../three.js/vendor/jsartoolkit5/build/artoolkit.min.js"></script>
<script src="../../three.js/vendor/jsartoolkit5/js/artoolkit.api.js"></script>
<!-- include for aruco tracking -->
<script src='../../three.js/vendor/js-aruco/src/svd.js'></script>
<script src='../../three.js/vendor/js-aruco/src/posit1.js'></script>
<script src='../../three.js/vendor/js-aruco/src/cv.js'></script>
<script src='../../three.js/vendor/js-aruco/src/aruco.js'></script>
<script src='../../three.js/threex/threex-aruco/threex-arucocontext.js'></script>
<script src='../../three.js/threex/threex-aruco/threex-arucodebug.js'></script>
<!-- include for tango tracking -->
<script src='../../three.js/vendor/chromium-tango/THREE.WebAR.js'></script>
<!-- include ar.js -->
<script src="../../three.js/threex-artoolkitcontext.js"></script>
<script src="../../three.js/threex-artoolkitsource.js"></script>
<script src='../../three.js/threex-artoolkitprofile.js'></script>
<script src="../../three.js/threex-arbasecontrols.js"></script>
<script src="../../three.js/threex-armarkercontrols.js"></script>
<script src="../../three.js/threex-armarkerhelper.js"></script>
<script src="../../three.js/threex-arsmoothedcontrols.js"></script>
<script src='../../three.js/examples/multi-markers/threex-armultimarkerutils.js'></script>
<script src='../../three.js/examples/multi-markers/threex-armultimarkercontrols.js'></script>
<script src='../../three.js/examples/multi-markers/threex-armultimarkerlearning.js'></script>
<body style='margin : 0px; overflow: hidden; font-family: Monospace;'><div style='position: fixed; top: 10px; width:inherit; text-align: center; z-index: 1;'>
<a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - multi markers example for a-frame by <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
<br/>
Try with <a href='javascript:void(0)' id='augmentedWebsiteButton' target='_blank'>augmented-website</a>
<script type="text/javascript">
document.querySelector('#augmentedWebsiteButton').addEventListener('click', function(){
var arjsSystem = document.querySelector('a-scene').systems.arjs
arjsSystem.navigateToLearnerPage()
})
</script>
</div>
<a-scene embedded arjs='sourceType: webcam;'>
<a-marker preset='area' markerhelpers=true>
<a-box position='0 0.5 0' material='opacity: 0.5; side: double;color:red;'></a-box>
</a-marker>
<!-- add a simple camera -->
<a-entity camera></a-entity>
<!-- <a-box position='0 0.5 0' material='opacity: 0.5; side:double; color:blue;'></a-box>
<a-marker-camera preset='area'></a-marker-camera> -->
</a-scene>
</body>
</html>
aframe/examples/trackingbackend-switch.html 0 → 100644
浏览文件 @ 97e465e0
<!DOCTYPE html>
<!-- include a-frame -->
<!-- <script src="vendor/aframe/build/aframe.js"></script> -->
<script src="vendor/aframe/build/aframe.min.js"></script>
<!-- include ar.js -->
<script src='../build/aframe-ar.js'></script>
<script>ARjs.Context.baseURL = '../../three.js/'</script>
<body style='margin : 0px; overflow: hidden; font-family: Monospace; background-color: black;'>
<div style='position: fixed; top: 10px; width:inherit; text-align: center; z-index: 1;'>
<a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - tango example for a-frame by <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
<br/>
<strong>Tracking Method:</strong> <span id='trackingMethod'>unknown</span>
-
Switch to :
<a href='#artoolkit' onclick='location.reload()'>artoolkit</a>
/
<a href='#aruco' onclick='location.reload()'>aruco</a>
/
<a href='#area-artoolkit' onclick='location.reload()'>area artoolkit</a>
/
<a href='#area-aruco' onclick='location.reload()'>area aruco</a>
/
<a href='#tango' onclick='location.reload()'>tango</a>
/
<a href='#best' onclick='location.reload()'>best</a>
<div id="arjsDebugUIContainer"></div>
</div>
<script>
var trackingMethod = location.hash.substring(1) || 'best'
document.querySelector('#trackingMethod').innerHTML = trackingMethod
var sceneEl = document.createElement('a-scene')
sceneEl.setAttribute('embedded', 'true')
sceneEl.setAttribute('arjs', 'debugUIEnabled: true; trackingMethod: '+trackingMethod)
var parsedTrackingMethod = ARjs.Utils.parseTrackingMethod(trackingMethod)
if( parsedTrackingMethod.trackingBackend === 'tango' ){
var changeMatrixMode = 'cameraTransformMatrix'
}else{
var changeMatrixMode = 'modelViewMatrix'
}
if( changeMatrixMode === 'modelViewMatrix' ){
var markerEl = document.createElement('a-anchor')
markerEl.setAttribute('hit-testing-enabled', 'true')
sceneEl.appendChild(markerEl)
var boxEl = document.createElement('a-box')
boxEl.setAttribute('position', '0 0.5 0')
boxEl.setAttribute('material', 'opacity: 0.5; side:double; color:red;')
markerEl.appendChild(boxEl)
var cameraEl = document.createElement('a-entity')
cameraEl.setAttribute('camera', '')
sceneEl.appendChild(cameraEl)
}else if( changeMatrixMode === 'cameraTransformMatrix' ){
var boxEl = document.createElement('a-box')
boxEl.setAttribute('position', '0 0.5 0')
boxEl.setAttribute('material', 'opacity: 0.5; side:double; color:red;')
sceneEl.appendChild(boxEl)
var cameraEl = document.createElement('a-marker-camera')
sceneEl.appendChild(cameraEl)
}else console.assert(false)
document.body.appendChild(sceneEl)
</script>
</body>
</html>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或