Skip to content

A
AR.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
A
AR.js

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

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

renaming directory

上级 7a467699
隐藏空白更改
内联 并排
Showing with 34 addition and 403 deletion
aframe/examples/basic.html
浏览文件 @ b1fecb74
<!-- 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 -->
......@@ -10,18 +12,24 @@
<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>
<div id="arjsDebugUIContainer"></div>
</div>
<!-- Define your scene -->
<!-- Define your 3d scene and enabled ar.js -->
<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-anchor>
<!-- Define a static camera -->
<a-camera-static/>
</a-scene>
</body>
aframe/examples/demo-portal/README.md → aframe/examples/demo-portal-door/README.md
浏览文件 @ b1fecb74
# TODO support live scene
- i can put a live scene in there
- cache material on sphere when outside portal - thus real scene is hidden
- it can work for sphere 360 it has nothing special
- good thus ALL the content is handled outside
- cache material on sphere when outside portal - thus real scene is hidden
- it can work for sphere 360 it has nothing special
- good thus ALL the content is handled outside
---
- thus it can be a way to visual VR in AR
......@@ -13,6 +13,6 @@
-------------------
- a actual entity
- support movie url too
- DONE support movie url too
- DONE do that in a THREEx - add it to webar-playground
aframe/examples/demo-portal/basic.html → aframe/examples/demo-portal-door/basic.html
浏览文件 @ b1fecb74
......@@ -3,9 +3,9 @@
<!-- include ar.js for aframe -->
<script src='../../build/aframe-ar.js'></script>
<script>ARjs.Context.baseURL = '../../../three.js/'</script>
<!-- include aframe-portal360 -->
<script src='src/aframe-portal360.js'></script>
<script src='src/threex-portal360.js'></script>
<!-- include aframe-portal-door -->
<script src='src/aframe-portal-door.js'></script>
<script src='src/threex-portal-door.js'></script>
<!-- start the body of your page -->
<body style='margin : 0px; overflow: hidden;'>
......@@ -14,17 +14,18 @@
<a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - Two-ways Portal 360 for a-frame by <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
<div id="arjsDebugUIContainer"></div>
</div>
<!-- Define your scene -->
<!-- Define your 3d scene and enabled ar.js -->
<a-scene embedded arjs='trackingMethod: best; debugUIEnabled: true;'>
<!-- Create a anchor to attach your augmented reality -->
<a-anchor hit-testing-enabled='true'>
<!-- portal 360 with an image -->
<a-entity arjs-portal360='url:images/360_topaz.png' position='0 0 0' scale='2 2 2' rotation='0 90 0'><a-entity>
<a-portal-door url='images/360_topaz.png' position='0 0 0' scale='2 2 2' rotation='0 90 0'><a-portal-door>
<!-- portal 360 with an video -->
<!-- <a-entity arjs-portal360='url:videos/pano.webm' position='0 0 0' scale='2 2 2' rotation='0 90 0'><a-entity> -->
<!-- <a-portal-door url='videos/pano.webm' position='0 0 0' scale='2 2 2' rotation='0 90 0'><a-portal-door> -->
</a-anchor>
......
aframe/examples/demo-portal/src/aframe-portal360.js → aframe/examples/demo-portal-door/src/aframe-portal-door.js
浏览文件 @ b1fecb74
//////////////////////////////////////////////////////////////////////////////
// arjs-hit-testing
//////////////////////////////////////////////////////////////////////////////
AFRAME.registerComponent('arjs-portal360', {
AFRAME.registerComponent('arjs-portal-door', {
dependencies: ['arjs'],
schema: {
url : {
url : { // Url of the content - may be video or image
type: 'string',
},
doorWidth : {
doorWidth : { // width of the door
type: 'number',
default: 1,
},
doorHeight : {
doorHeight : { // height of the door
type: 'number',
default: 2,
},
......@@ -23,22 +23,22 @@ AFRAME.registerComponent('arjs-portal360', {
var doorHeight = this.data.doorHeight
var imageURL = this.data.url
var portal360 = new THREEx.Portal360(imageURL, doorWidth, doorHeight)
this._portal360 = portal360
this.el.object3D.add(portal360.object3d)
var portalDoor = new THREEx.Portal360(imageURL, doorWidth, doorHeight)
this._portalDoor = portalDoor
this.el.object3D.add(portalDoor.object3d)
},
tick: function(){
this._portal360.update()
this._portalDoor.update()
}
})
AFRAME.registerPrimitive('a-portal360', AFRAME.utils.extendDeep({}, AFRAME.primitives.getMeshMixin(), {
AFRAME.registerPrimitive('a-portal-door', AFRAME.utils.extendDeep({}, AFRAME.primitives.getMeshMixin(), {
defaultComponents: {
'arjs-portal360': {},
'arjs-portal-door': {},
},
mappings: {
'url': 'arjs-portal360.url',
'url': 'arjs-portal-door.url',
}
}));
}))
aframe/examples/demo-portal/src/threex-portal360.js → aframe/examples/demo-portal-door/src/threex-portal-door.js
浏览文件 @ b1fecb74
......@@ -6,7 +6,6 @@ THREEx.Portal360 = function(videoImageURL, doorWidth, doorHeight){
doorCenter.position.y = doorHeight/2
this.object3d = doorCenter
//////////////////////////////////////////////////////////////////////////////
// build texture360
//////////////////////////////////////////////////////////////////////////////
......
aframe/src/aframe-ar-obsolete.js 已删除 100644 → 0
浏览文件 @ 7a467699
//////////////////////////////////////////////////////////////////////////////
// Code Separator
//////////////////////////////////////////////////////////////////////////////
// to keep backward compatibility with deprecated code
// AFRAME.registerComponent('arjs', buildSystemParameter())
// AFRAME.registerComponent('artoolkit', buildSystemParameter())
// function buildSystemParameter(){ return {
// AFRAME.registerSystem('arjs', {
AFRAME.registerSystem('arjs', {
schema: {
trackingBackend : {
type: 'string',
default: 'artoolkit',
},
areaLearningButton : {
type: 'boolean',
default: true,
},
performanceProfile : {
type: 'string',
default: 'default',
},
// old parameters
debug : {
type: 'boolean',
default: false
},
detectionMode : {
type: 'string',
default: '',
},
matrixCodeType : {
type: 'string',
default: '',
},
cameraParametersUrl : {
type: 'string',
default: '',
},
maxDetectionRate : {
type: 'number',
default: -1
},
sourceType : {
type: 'string',
default: '',
},
sourceUrl : {
type: 'string',
default: '',
},
sourceWidth : {
type: 'number',
default: -1
},
sourceHeight : {
type: 'number',
default: -1
},
displayWidth : {
type: 'number',
default: -1
},
displayHeight : {
type: 'number',
default: -1
},
canvasWidth : {
type: 'number',
default: -1
},
canvasHeight : {
type: 'number',
default: -1
},
},
//////////////////////////////////////////////////////////////////////////////
// Code Separator
//////////////////////////////////////////////////////////////////////////////
init: function () {
var _this = this
// setup artoolkitProfile
var artoolkitProfile = new THREEx.ArToolkitProfile()
artoolkitProfile.sourceWebcam()
artoolkitProfile.trackingBackend(this.data.trackingBackend)
artoolkitProfile.performance(this.data.performanceProfile)
//////////////////////////////////////////////////////////////////////////////
// honor this.data
//////////////////////////////////////////////////////////////////////////////
// honor this.data and push what has been modified into artoolkitProfile
if( this.data.debug !== false ) artoolkitProfile.contextParameters.debug = this.data.debug
if( this.data.detectionMode !== '' ) artoolkitProfile.contextParameters.detectionMode = this.data.detectionMode
if( this.data.matrixCodeType !== '' ) artoolkitProfile.contextParameters.matrixCodeType = this.data.matrixCodeType
if( this.data.cameraParametersUrl !== '' ) artoolkitProfile.contextParameters.cameraParametersUrl = this.data.cameraParametersUrl
if( this.data.maxDetectionRate !== -1 ) artoolkitProfile.contextParameters.maxDetectionRate = this.data.maxDetectionRate
if( this.data.sourceType !== '' ) artoolkitProfile.contextParameters.sourceType = this.data.sourceType
if( this.data.sourceUrl !== '' ) artoolkitProfile.contextParameters.sourceUrl = this.data.sourceUrl
if( this.data.sourceWidth !== -1 ) artoolkitProfile.contextParameters.sourceWidth = this.data.sourceWidth
if( this.data.sourceHeight !== -1 ) artoolkitProfile.contextParameters.sourceHeight = this.data.sourceHeight
if( this.data.displayWidth !== -1 ) artoolkitProfile.contextParameters.displayWidth = this.data.displayWidth
if( this.data.displayHeight !== -1 ) artoolkitProfile.contextParameters.displayHeight = this.data.displayHeight
if( this.data.canvasWidth !== -1 ) artoolkitProfile.contextParameters.canvasWidth = this.data.canvasWidth
if( this.data.canvasHeight !== -1 ) artoolkitProfile.contextParameters.canvasHeight = this.data.canvasHeight
////////////////////////////////////////////////////////////////////////////////
// handle arToolkitSource
////////////////////////////////////////////////////////////////////////////////
var arToolkitSource = new THREEx.ArToolkitSource(artoolkitProfile.sourceParameters)
this.arToolkitSource = arToolkitSource
arToolkitSource.init(function onReady(){
// handle resize of renderer
onResize()
// TODO this is crappy - code an exponential backoff - max 1 seconds
// kludge to write a 'resize' event
var startedAt = Date.now()
var timerId = setInterval(function(){
if( Date.now() - startedAt > 10*1000 ){
clearInterval(timerId)
return
}
// onResize()
window.dispatchEvent(new Event('resize'));
}, 1000/30)
})
// handle resize
window.addEventListener('resize', onResize)
function onResize(){
// ugly kludge to get resize on aframe... not even sure it works
arToolkitSource.onResizeElement()
arToolkitSource.copyElementSizeTo(document.body)
var buttonElement = document.querySelector('.a-enter-vr')
if( buttonElement ){
buttonElement.style.position = 'fixed'
}
}
////////////////////////////////////////////////////////////////////////////////
// initialize arToolkitContext
////////////////////////////////////////////////////////////////////////////////
// create atToolkitContext
var arToolkitContext = new THREEx.ArToolkitContext(artoolkitProfile.contextParameters)
this.arToolkitContext = arToolkitContext
// initialize it
arToolkitContext.init(function onCompleted(){
// // copy projection matrix to camera
// var projectionMatrixArr = arToolkitContext.arController.getCameraMatrix();
// _this.sceneEl.camera.projectionMatrix.fromArray(projprojectionMatrixArrectionMatrix);
})
//////////////////////////////////////////////////////////////////////////////
// area learning
//////////////////////////////////////////////////////////////////////////////
// export function to navigateToLearnerPage
this.navigateToLearnerPage = function(){
var learnerURL = THREEx.ArToolkitContext.baseURL + 'examples/multi-markers/examples/learner.html'
THREEx.ArMultiMarkerUtils.navigateToLearnerPage(learnerURL, _this.data.trackingBackend)
}
// export function to initAreaLearningButton
this.initAreaLearningButton = function(){
// honor arjsSystem.data.areaLearningButton
if( this.data.areaLearningButton === false ) return
// if there is already a button, do nothing
if( document.querySelector('#arjsAreaLearningButton') !== null ) return
// create the img
var imgElement = document.createElement('img')
imgElement.id = 'arjsAreaLearningButton'
imgElement.style.position = 'fixed'
imgElement.style.bottom = '16px'
imgElement.style.left = '16px'
imgElement.style.width = '48px'
imgElement.style.height = '48px'
imgElement.style.zIndex = 1
imgElement.src = THREEx.ArToolkitContext.baseURL + "examples/multi-markers/examples/images/record-start.png"
document.body.appendChild(imgElement)
imgElement.addEventListener('click', function(){
_this.navigateToLearnerPage()
})
}
},
tick : function(now, delta){
if( this.arToolkitSource.ready === false ) return
// copy projection matrix to camera
if( this.arToolkitContext.arController !== null ){
this.el.sceneEl.camera.projectionMatrix.copy( this.arToolkitContext.getProjectionMatrix() );
}
this.arToolkitContext.update( this.arToolkitSource.domElement )
},
})
//////////////////////////////////////////////////////////////////////////////
// arjsmarker
//////////////////////////////////////////////////////////////////////////////
AFRAME.registerComponent('arjsmarker', {
dependencies: ['arjs', 'artoolkit'],
schema: {
preset: {
type: 'string',
},
markerhelpers : { // IIF preset === 'area'
type: 'boolean',
default: false,
},
// controls parameters
size: {
type: 'number',
default: 1
},
type: {
type: 'string',
},
patternUrl: {
type: 'string',
},
barcodeValue: {
type: 'number'
},
changeMatrixMode: {
type: 'string',
default : 'modelViewMatrix',
},
minConfidence: {
type: 'number',
default: 0.6,
},
},
init: function () {
var _this = this
// actually init arMarkerControls
var arjsSystem = this.el.sceneEl.systems.arjs || this.el.sceneEl.systems.artoolkit
var artoolkitContext = arjsSystem.arToolkitContext
var scene = this.el.sceneEl.object3D
// honor this.data.preset
if( this.data.preset === 'hiro' ){
this.data.type = 'pattern'
this.data.patternUrl = THREEx.ArToolkitContext.baseURL+'examples/marker-training/examples/pattern-files/pattern-hiro.patt'
}else if( this.data.preset === 'kanji' ){
this.data.type = 'pattern'
this.data.patternUrl = THREEx.ArToolkitContext.baseURL+'examples/marker-training/examples/pattern-files/pattern-kanji.patt'
}else if( this.data.preset === 'area' ){
this.data.type = 'area'
}else {
console.assert( this.data.preset === '', 'illegal preset value '+this.data.preset)
}
// build a smoothedControls
this._markerRoot = new THREE.Group()
scene.add(this._markerRoot)
this._arMarkerControls = null
this._multiMarkerControls = null
// create the controls
if( this.data.type === 'area' ){
// if no localStorage.ARjsMultiMarkerFile, then write one with default marker
if( localStorage.getItem('ARjsMultiMarkerFile') === null ){
THREEx.ArMultiMarkerUtils.storeDefaultMultiMarkerFile(arjsSystem.data.trackingBackend)
}
// get multiMarkerFile from localStorage
console.assert( localStorage.getItem('ARjsMultiMarkerFile') !== null )
var multiMarkerFile = localStorage.getItem('ARjsMultiMarkerFile')
// create ArMultiMarkerControls
this._multiMarkerControls = THREEx.ArMultiMarkerControls.fromJSON(artoolkitContext, scene, this._markerRoot, multiMarkerFile, {
changeMatrixMode : this.data.changeMatrixMode
})
console.log('this.data.markerhelpers', this.data.markerhelpers)
// display THREEx.ArMarkerHelper if needed - useful to debug
if( this.data.markerhelpers === true ){
this._multiMarkerControls.subMarkersControls.forEach(function(subMarkerControls){
// add an helper to visuable each sub-marker
var markerHelper = new THREEx.ArMarkerHelper(subMarkerControls)
scene.add( markerHelper.object3d )
})
}
}else if( this.data.type === 'pattern' || this.data.type === 'barcode' || this.data.type === 'unknown' ){
this._arMarkerControls = new THREEx.ArMarkerControls(artoolkitContext, this._markerRoot, this.data)
}else console.assert(false)
// build a smoothedControls
this.arSmoothedControls = new THREEx.ArSmoothedControls(this.el.object3D,{
lerpPosition : 0.1,
lerpQuaternion : 0.1,
lerpScale : 0.1,
// minVisibleDelay: 0,
// minUnvisibleDelay: 0,
})
// honor arjsSystem.data.areaLearningButton
if( this.data.type === 'area' ) arjsSystem.initAreaLearningButton()
},
remove : function(){
// this._arMarkerControls.dispose()
},
update: function () {
// FIXME this mean to change the recode in trackBarcodeMarkerId ?
// var markerRoot = this.el.object3D;
// markerRoot.userData.size = this.data.size;
},
tick: function(){
if( this.data.changeMatrixMode === 'cameraTransformMatrix' ){
this.el.sceneEl.object3D.visible = this.el.object3D.visible;
}
if( this._multiMarkerControls !== null ){
// update smoothedControls parameters depending on how many markers are visible in multiMarkerControls
this._multiMarkerControls.updateSmoothedControls(this.arSmoothedControls)
}
// update smoothedControls position
this.arSmoothedControls.update(this._markerRoot)
}
});
//////////////////////////////////////////////////////////////////////////////
// define some primitives shortcuts
//////////////////////////////////////////////////////////////////////////////
AFRAME.registerPrimitive('a-marker', AFRAME.utils.extendDeep({}, AFRAME.primitives.getMeshMixin(), {
defaultComponents: {
'arjsmarker': {},
},
mappings: {
'type': 'arjsmarker.type',
'size': 'arjsmarker.size',
'url': 'arjsmarker.patternUrl',
'value': 'arjsmarker.barcodeValue',
'preset': 'arjsmarker.preset',
'minConfidence': 'arjsmarker.minConfidence',
'markerhelpers': 'arjsmarker.markerhelpers',
}
}));
AFRAME.registerPrimitive('a-marker-camera', AFRAME.utils.extendDeep({}, AFRAME.primitives.getMeshMixin(), {
defaultComponents: {
'arjsmarker': {
changeMatrixMode: 'cameraTransformMatrix'
},
'camera': true,
},
mappings: {
'type': 'arjsmarker.type',
'size': 'arjsmarker.size',
'url': 'arjsmarker.patternUrl',
'value': 'arjsmarker.barcodeValue',
'preset': 'arjsmarker.preset',
'minConfidence': 'arjsmarker.minConfidence',
'markerhelpers': 'arjsmarker.markerhelpers',
}
}));
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或