Skip to content

A
AR.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
A
AR.js

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

提交 23da00d9 编写于 作者: N Nicolò Carpignoli 提交者： GitHub
浏览文件
操作

Merge pull request #549 from jeromeetienne/issue/clean-paths 

General AR Events and other stuff
上级 6d48e649 2d2c2878
隐藏空白更改
内联 并排
Showing with 400 addition and 395 deletion
aframe/build/aframe-ar.js
浏览文件 @ 23da00d9
......@@ -5683,7 +5683,7 @@ ARjs.Profile.prototype._guessPerformanceLabel = function() {
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)
? true : false
? true : false
if( isMobile === true ){
return 'phone-normal'
}
......@@ -5699,17 +5699,17 @@ ARjs.Profile.prototype._guessPerformanceLabel = function() {
*/
ARjs.Profile.prototype.reset = function () {
this.sourceParameters = {
// to read from the webcam
// to read from the webcam
sourceType : 'webcam',
}
this.contextParameters = {
cameraParametersUrl: THREEx.ArToolkitContext.baseURL + '../data/data/camera_para.dat',
cameraParametersUrl: '../../data/data/camera_para.dat',
detectionMode: 'mono',
}
this.defaultMarkerParameters = {
type : 'pattern',
patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro',
patternUrl : '../../data/data/patt.hiro',
changeMatrixMode: 'modelViewMatrix',
}
return this
......@@ -5746,7 +5746,7 @@ ARjs.Profile.prototype.performance = function(label) {
this.contextParameters.canvasWidth = 80*3
this.contextParameters.canvasHeight = 60*3
this.contextParameters.maxDetectionRate = 30
this.contextParameters.maxDetectionRate = 30
}else {
console.assert(false, 'unknonwn label '+label)
}
......@@ -5764,7 +5764,7 @@ ARjs.Profile.prototype.defaultMarker = function (trackingBackend) {
if( trackingBackend === 'artoolkit' ){
this.contextParameters.detectionMode = 'mono'
this.defaultMarkerParameters.type = 'pattern'
this.defaultMarkerParameters.patternUrl = THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro'
this.defaultMarkerParameters.patternUrl = '../../data/data/patt.hiro'
}else if( trackingBackend === 'aruco' ){
this.contextParameters.detectionMode = 'mono'
this.defaultMarkerParameters.type = 'barcode'
......@@ -5821,7 +5821,7 @@ ARjs.Profile.prototype.changeMatrixMode = function (changeMatrixMode) {
ARjs.Profile.prototype.trackingMethod = function (trackingMethod) {
var data = ARjs.Utils.parseTrackingMethod(trackingMethod)
this.defaultMarkerParameters.markersAreaEnabled = data.markersAreaEnabled
this.contextParameters.trackingBackend = data.trackingBackend
this.contextParameters.trackingBackend = data.trackingBackend
return this
}
......@@ -5830,14 +5830,14 @@ ARjs.Profile.prototype.trackingMethod = function (trackingMethod) {
*/
ARjs.Profile.prototype.checkIfValid = function () {
if( this.contextParameters.trackingBackend === 'tango' ){
this.sourceImage(THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg')
this.sourceImage('../../data/images/img.jpg')
}
return this
}
var ARjs = ARjs || {}
var THREEx = THREEx || {}
ARjs.Source = THREEx.ArToolkitSource = function(parameters){
ARjs.Source = THREEx.ArToolkitSource = function(parameters){
var _this = this
this.ready = false
......@@ -5856,7 +5856,7 @@ ARjs.Source = THREEx.ArToolkitSource = function(parameters){
// resolution of at which we initialize in the source image
sourceWidth: 640,
sourceHeight: 480,
// resolution displayed for the source
// resolution displayed for the source
displayWidth: 640,
displayHeight: 480,
}
......@@ -5883,7 +5883,7 @@ ARjs.Source = THREEx.ArToolkitSource = function(parameters){
_this.parameters[ key ] = newValue
}
}
}
}
//////////////////////////////////////////////////////////////////////////////
......@@ -5893,12 +5893,12 @@ ARjs.Source.prototype.init = function(onReady, onError){
var _this = this
if( this.parameters.sourceType === 'image' ){
var domElement = this._initSourceImage(onSourceReady, onError)
var domElement = this._initSourceImage(onSourceReady, onError)
}else if( this.parameters.sourceType === 'video' ){
var domElement = this._initSourceVideo(onSourceReady, onError)
var domElement = this._initSourceVideo(onSourceReady, onError)
}else if( this.parameters.sourceType === 'webcam' ){
// var domElement = this._initSourceWebcamOld(onSourceReady)
var domElement = this._initSourceWebcam(onSourceReady, onError)
// var domElement = this._initSourceWebcamOld(onSourceReady)
var domElement = this._initSourceWebcam(onSourceReady, onError)
}else{
console.assert(false)
}
......@@ -5918,7 +5918,7 @@ ARjs.Source.prototype.init = function(onReady, onError){
onReady && onReady()
}
}
}
////////////////////////////////////////////////////////////////////////////////
// init image source
......@@ -5942,7 +5942,7 @@ ARjs.Source.prototype._initSourceImage = function(onReady) {
clearInterval(interval)
}, 1000/50);
return domElement
return domElement
}
////////////////////////////////////////////////////////////////////////////////
......@@ -5973,7 +5973,7 @@ ARjs.Source.prototype._initSourceVideo = function(onReady) {
domElement.height = this.parameters.sourceHeight
domElement.style.width = this.parameters.displayWidth+'px'
domElement.style.height = this.parameters.displayHeight+'px'
// wait until the video stream is ready
var interval = setInterval(function() {
if (!domElement.videoWidth) return;
......@@ -5991,8 +5991,10 @@ ARjs.Source.prototype._initSourceWebcam = function(onReady, onError) {
var _this = this
// init default value
onError = onError || function(error){
onError = onError || function(error){
alert('Webcam Error\nName: '+error.name + '\nMessage: '+error.message)
var event = new CustomEvent('camera-error', {error: error});
window.dispatchEvent(event);
}
var domElement = document.createElement('video');
......@@ -6003,8 +6005,8 @@ ARjs.Source.prototype._initSourceWebcam = function(onReady, onError) {
domElement.style.height = this.parameters.displayHeight+'px'
// check API is available
if (navigator.mediaDevices === undefined
|| navigator.mediaDevices.enumerateDevices === undefined
if (navigator.mediaDevices === undefined
|| navigator.mediaDevices.enumerateDevices === undefined
|| navigator.mediaDevices.getUserMedia === undefined ){
if( navigator.mediaDevices === undefined ) var fctName = 'navigator.mediaDevices'
else if( navigator.mediaDevices.enumerateDevices === undefined ) var fctName = 'navigator.mediaDevices.enumerateDevices'
......@@ -6045,11 +6047,14 @@ ARjs.Source.prototype._initSourceWebcam = function(onReady, onError) {
// get a device which satisfy the constraints
navigator.mediaDevices.getUserMedia(userMediaConstraints).then(function success(stream) {
// set the .src of the domElement
domElement.srcObject = stream;
domElement.srcObject = stream;
var event = new CustomEvent('camera-init', {stream: stream});
window.dispatchEvent(event);
// to start the video, when it is possible to start it only on userevent. like in android
document.body.addEventListener('click', function(){
domElement.play();
})
});
// domElement.play();
// TODO listen to loadedmetadata instead
......@@ -6091,7 +6096,7 @@ ARjs.Source.prototype.hasMobileTorch = function(){
if( videoTrack.getCapabilities === undefined ) return false
var capabilities = videoTrack.getCapabilities()
return capabilities.torch ? true : false
}
......@@ -6102,7 +6107,7 @@ ARjs.Source.prototype.hasMobileTorch = function(){
ARjs.Source.prototype.toggleMobileTorch = function(){
// sanity check
console.assert(this.hasMobileTorch() === true)
var stream = arToolkitSource.domElement.srcObject
if( stream instanceof MediaStream === false ){
alert('enabling mobile torch is available only on webcam')
......@@ -6115,7 +6120,7 @@ ARjs.Source.prototype.toggleMobileTorch = function(){
var videoTrack = stream.getVideoTracks()[0];
var capabilities = videoTrack.getCapabilities()
if( !capabilities.torch ){
alert('no mobile torch is available on your camera')
return
......@@ -6160,7 +6165,7 @@ ARjs.Source.prototype.onResizeElement = function(){
}else{
console.assert(false)
}
// compute sourceAspect
var sourceAspect = sourceWidth / sourceHeight
// compute screenAspect
......@@ -6172,7 +6177,7 @@ ARjs.Source.prototype.onResizeElement = function(){
var newWidth = sourceAspect * screenHeight
this.domElement.style.width = newWidth+'px'
this.domElement.style.marginLeft = -(newWidth-screenWidth)/2+'px'
// init style.height/.marginTop to normal value
this.domElement.style.height = screenHeight+'px'
this.domElement.style.marginTop = '0px'
......@@ -6181,7 +6186,7 @@ ARjs.Source.prototype.onResizeElement = function(){
var newHeight = 1 / (sourceAspect / screenWidth)
this.domElement.style.height = newHeight+'px'
this.domElement.style.marginTop = -(newHeight-screenHeight)/2+'px'
// init style.width/.marginLeft to normal value
this.domElement.style.width = screenWidth+'px'
this.domElement.style.marginLeft = '0px'
......@@ -6190,7 +6195,7 @@ ARjs.Source.prototype.onResizeElement = function(){
/*
ARjs.Source.prototype.copyElementSizeTo = function(otherElement){
otherElement.style.width = this.domElement.style.width
otherElement.style.height = this.domElement.style.height
otherElement.style.height = this.domElement.style.height
otherElement.style.marginLeft = this.domElement.style.marginLeft
otherElement.style.marginTop = this.domElement.style.marginTop
}
......@@ -6236,28 +6241,28 @@ ARjs.Source.prototype.onResize = function(arToolkitContext, renderer, camera){
}
var trackingBackend = arToolkitContext.parameters.trackingBackend
// RESIZE DOMELEMENT
if( trackingBackend === 'artoolkit' ){
this.onResizeElement()
var isAframe = renderer.domElement.dataset.aframeCanvas ? true : false
if( isAframe === false ){
this.copyElementSizeTo(renderer.domElement)
this.copyElementSizeTo(renderer.domElement)
}else{
}
if( arToolkitContext.arController !== null ){
this.copyElementSizeTo(arToolkitContext.arController.canvas)
this.copyElementSizeTo(arToolkitContext.arController.canvas)
}
}else if( trackingBackend === 'aruco' ){
this.onResizeElement()
this.copyElementSizeTo(renderer.domElement)
this.copyElementSizeTo(renderer.domElement)
this.copyElementSizeTo(arToolkitContext.arucoContext.canvas)
this.copyElementSizeTo(arToolkitContext.arucoContext.canvas)
}else if( trackingBackend === 'tango' ){
renderer.setSize( window.innerWidth, window.innerHeight )
}else console.assert(false, 'unhandled trackingBackend '+trackingBackend)
......@@ -6266,16 +6271,16 @@ ARjs.Source.prototype.onResize = function(arToolkitContext, renderer, camera){
// UPDATE CAMERA
if( trackingBackend === 'artoolkit' ){
if( arToolkitContext.arController !== null ){
camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
}
}else if( trackingBackend === 'aruco' ){
}else if( trackingBackend === 'aruco' ){
camera.aspect = renderer.domElement.width / renderer.domElement.height;
camera.updateProjectionMatrix();
camera.updateProjectionMatrix();
}else if( trackingBackend === 'tango' ){
var vrDisplay = arToolkitContext._tangoContext.vrDisplay
// make camera fit vrDisplay
if( vrDisplay && vrDisplay.displayName === "Tango VR Device" ) THREE.WebAR.resizeVRSeeThroughCamera(vrDisplay, camera)
}else console.assert(false, 'unhandled trackingBackend '+trackingBackend)
}else console.assert(false, 'unhandled trackingBackend '+trackingBackend)
}
var THREEx = THREEx || {}
......@@ -8353,11 +8358,11 @@ AFRAME.registerComponent('arjs-anchor', {
if( _this.data.preset === 'hiro' ){
markerParameters.type = 'pattern'
markerParameters.patternUrl = THREEx.ArToolkitContext.baseURL+'examples/marker-training/examples/pattern-files/pattern-hiro.patt'
markerParameters.patternUrl = '../../three.js/examples/marker-training/examples/pattern-files/pattern-hiro.patt'
markerParameters.markersAreaEnabled = false
}else if( _this.data.preset === 'kanji' ){
markerParameters.type = 'pattern'
markerParameters.patternUrl = THREEx.ArToolkitContext.baseURL+'examples/marker-training/examples/pattern-files/pattern-kanji.patt'
markerParameters.patternUrl = '../../three.js/examples/marker-training/examples/pattern-files/pattern-kanji.patt'
markerParameters.markersAreaEnabled = false
}else if( _this.data.preset === 'area' ){
markerParameters.type = 'barcode'
aframe/examples/marker-events.html
浏览文件 @ 23da00d9
......@@ -4,6 +4,16 @@
<script src="../build/aframe-ar.js"></script>
<!-- Register an aframe component that allows reacting to marker events -->
<script>
window.addEventListener('camera-init', (data) => {
console.log('camera-init', data);
// TODO: Add your own code
})
window.addEventListener('camera-error', (error) => {
console.log('camera-error', error);
// TODO: Add your own code e.g. splash screen, message to user, etc.
})
AFRAME.registerComponent('registerevents', {
init: function () {
var marker = this.el;
......@@ -23,7 +33,7 @@
});
</script>
<body style='margin : 0px; overflow: hidden; font-family: Monospace;'><div style='position: fixed; top: 10px; width:100%; text-align: center; z-index: 1;'>
<body style='margin : 0px; overflow: hidden; font-family: Monospace;'><div style='position: fixed; top: 10px; left: 5px; text-align: center; z-index: 1;'>
<a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - marker events example for a-frame - look at the js console
<br/>
Contact me any time at <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
......
aframe/src/component-anchor.js
浏览文件 @ 23da00d9
......@@ -92,11 +92,11 @@ AFRAME.registerComponent('arjs-anchor', {
if( _this.data.preset === 'hiro' ){
markerParameters.type = 'pattern'
markerParameters.patternUrl = THREEx.ArToolkitContext.baseURL+'examples/marker-training/examples/pattern-files/pattern-hiro.patt'
markerParameters.patternUrl = '../../three.js/examples/marker-training/examples/pattern-files/pattern-hiro.patt'
markerParameters.markersAreaEnabled = false
}else if( _this.data.preset === 'kanji' ){
markerParameters.type = 'pattern'
markerParameters.patternUrl = THREEx.ArToolkitContext.baseURL+'examples/marker-training/examples/pattern-files/pattern-kanji.patt'
markerParameters.patternUrl = '../../three.js/examples/marker-training/examples/pattern-files/pattern-kanji.patt'
markerParameters.markersAreaEnabled = false
}else if( _this.data.preset === 'area' ){
markerParameters.type = 'barcode'
......
three.js/build/ar.js
浏览文件 @ 23da00d9
......@@ -5683,7 +5683,7 @@ ARjs.Profile.prototype._guessPerformanceLabel = function() {
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)
? true : false
? true : false
if( isMobile === true ){
return 'phone-normal'
}
......@@ -5699,17 +5699,17 @@ ARjs.Profile.prototype._guessPerformanceLabel = function() {
*/
ARjs.Profile.prototype.reset = function () {
this.sourceParameters = {
// to read from the webcam
// to read from the webcam
sourceType : 'webcam',
}
this.contextParameters = {
cameraParametersUrl: THREEx.ArToolkitContext.baseURL + '../data/data/camera_para.dat',
cameraParametersUrl: '../../data/data/camera_para.dat',
detectionMode: 'mono',
}
this.defaultMarkerParameters = {
type : 'pattern',
patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro',
patternUrl : '../../data/data/patt.hiro',
changeMatrixMode: 'modelViewMatrix',
}
return this
......@@ -5746,7 +5746,7 @@ ARjs.Profile.prototype.performance = function(label) {
this.contextParameters.canvasWidth = 80*3
this.contextParameters.canvasHeight = 60*3
this.contextParameters.maxDetectionRate = 30
this.contextParameters.maxDetectionRate = 30
}else {
console.assert(false, 'unknonwn label '+label)
}
......@@ -5764,7 +5764,7 @@ ARjs.Profile.prototype.defaultMarker = function (trackingBackend) {
if( trackingBackend === 'artoolkit' ){
this.contextParameters.detectionMode = 'mono'
this.defaultMarkerParameters.type = 'pattern'
this.defaultMarkerParameters.patternUrl = THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro'
this.defaultMarkerParameters.patternUrl = '../../data/data/patt.hiro'
}else if( trackingBackend === 'aruco' ){
this.contextParameters.detectionMode = 'mono'
this.defaultMarkerParameters.type = 'barcode'
......@@ -5821,7 +5821,7 @@ ARjs.Profile.prototype.changeMatrixMode = function (changeMatrixMode) {
ARjs.Profile.prototype.trackingMethod = function (trackingMethod) {
var data = ARjs.Utils.parseTrackingMethod(trackingMethod)
this.defaultMarkerParameters.markersAreaEnabled = data.markersAreaEnabled
this.contextParameters.trackingBackend = data.trackingBackend
this.contextParameters.trackingBackend = data.trackingBackend
return this
}
......@@ -5830,14 +5830,14 @@ ARjs.Profile.prototype.trackingMethod = function (trackingMethod) {
*/
ARjs.Profile.prototype.checkIfValid = function () {
if( this.contextParameters.trackingBackend === 'tango' ){
this.sourceImage(THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg')
this.sourceImage('../../data/images/img.jpg')
}
return this
}
var ARjs = ARjs || {}
var THREEx = THREEx || {}
ARjs.Source = THREEx.ArToolkitSource = function(parameters){
ARjs.Source = THREEx.ArToolkitSource = function(parameters){
var _this = this
this.ready = false
......@@ -5856,7 +5856,7 @@ ARjs.Source = THREEx.ArToolkitSource = function(parameters){
// resolution of at which we initialize in the source image
sourceWidth: 640,
sourceHeight: 480,
// resolution displayed for the source
// resolution displayed for the source
displayWidth: 640,
displayHeight: 480,
}
......@@ -5883,7 +5883,7 @@ ARjs.Source = THREEx.ArToolkitSource = function(parameters){
_this.parameters[ key ] = newValue
}
}
}
}
//////////////////////////////////////////////////////////////////////////////
......@@ -5893,12 +5893,12 @@ ARjs.Source.prototype.init = function(onReady, onError){
var _this = this
if( this.parameters.sourceType === 'image' ){
var domElement = this._initSourceImage(onSourceReady, onError)
var domElement = this._initSourceImage(onSourceReady, onError)
}else if( this.parameters.sourceType === 'video' ){
var domElement = this._initSourceVideo(onSourceReady, onError)
var domElement = this._initSourceVideo(onSourceReady, onError)
}else if( this.parameters.sourceType === 'webcam' ){
// var domElement = this._initSourceWebcamOld(onSourceReady)
var domElement = this._initSourceWebcam(onSourceReady, onError)
// var domElement = this._initSourceWebcamOld(onSourceReady)
var domElement = this._initSourceWebcam(onSourceReady, onError)
}else{
console.assert(false)
}
......@@ -5918,7 +5918,7 @@ ARjs.Source.prototype.init = function(onReady, onError){
onReady && onReady()
}
}
}
////////////////////////////////////////////////////////////////////////////////
// init image source
......@@ -5942,7 +5942,7 @@ ARjs.Source.prototype._initSourceImage = function(onReady) {
clearInterval(interval)
}, 1000/50);
return domElement
return domElement
}
////////////////////////////////////////////////////////////////////////////////
......@@ -5973,7 +5973,7 @@ ARjs.Source.prototype._initSourceVideo = function(onReady) {
domElement.height = this.parameters.sourceHeight
domElement.style.width = this.parameters.displayWidth+'px'
domElement.style.height = this.parameters.displayHeight+'px'
// wait until the video stream is ready
var interval = setInterval(function() {
if (!domElement.videoWidth) return;
......@@ -5991,8 +5991,10 @@ ARjs.Source.prototype._initSourceWebcam = function(onReady, onError) {
var _this = this
// init default value
onError = onError || function(error){
onError = onError || function(error){
alert('Webcam Error\nName: '+error.name + '\nMessage: '+error.message)
var event = new CustomEvent('camera-error', {error: error});
window.dispatchEvent(event);
}
var domElement = document.createElement('video');
......@@ -6003,8 +6005,8 @@ ARjs.Source.prototype._initSourceWebcam = function(onReady, onError) {
domElement.style.height = this.parameters.displayHeight+'px'
// check API is available
if (navigator.mediaDevices === undefined
|| navigator.mediaDevices.enumerateDevices === undefined
if (navigator.mediaDevices === undefined
|| navigator.mediaDevices.enumerateDevices === undefined
|| navigator.mediaDevices.getUserMedia === undefined ){
if( navigator.mediaDevices === undefined ) var fctName = 'navigator.mediaDevices'
else if( navigator.mediaDevices.enumerateDevices === undefined ) var fctName = 'navigator.mediaDevices.enumerateDevices'
......@@ -6045,11 +6047,14 @@ ARjs.Source.prototype._initSourceWebcam = function(onReady, onError) {
// get a device which satisfy the constraints
navigator.mediaDevices.getUserMedia(userMediaConstraints).then(function success(stream) {
// set the .src of the domElement
domElement.srcObject = stream;
domElement.srcObject = stream;
var event = new CustomEvent('camera-init', {stream: stream});
window.dispatchEvent(event);
// to start the video, when it is possible to start it only on userevent. like in android
document.body.addEventListener('click', function(){
domElement.play();
})
});
// domElement.play();
// TODO listen to loadedmetadata instead
......@@ -6091,7 +6096,7 @@ ARjs.Source.prototype.hasMobileTorch = function(){
if( videoTrack.getCapabilities === undefined ) return false
var capabilities = videoTrack.getCapabilities()
return capabilities.torch ? true : false
}
......@@ -6102,7 +6107,7 @@ ARjs.Source.prototype.hasMobileTorch = function(){
ARjs.Source.prototype.toggleMobileTorch = function(){
// sanity check
console.assert(this.hasMobileTorch() === true)
var stream = arToolkitSource.domElement.srcObject
if( stream instanceof MediaStream === false ){
alert('enabling mobile torch is available only on webcam')
......@@ -6115,7 +6120,7 @@ ARjs.Source.prototype.toggleMobileTorch = function(){
var videoTrack = stream.getVideoTracks()[0];
var capabilities = videoTrack.getCapabilities()
if( !capabilities.torch ){
alert('no mobile torch is available on your camera')
return
......@@ -6160,7 +6165,7 @@ ARjs.Source.prototype.onResizeElement = function(){
}else{
console.assert(false)
}
// compute sourceAspect
var sourceAspect = sourceWidth / sourceHeight
// compute screenAspect
......@@ -6172,7 +6177,7 @@ ARjs.Source.prototype.onResizeElement = function(){
var newWidth = sourceAspect * screenHeight
this.domElement.style.width = newWidth+'px'
this.domElement.style.marginLeft = -(newWidth-screenWidth)/2+'px'
// init style.height/.marginTop to normal value
this.domElement.style.height = screenHeight+'px'
this.domElement.style.marginTop = '0px'
......@@ -6181,7 +6186,7 @@ ARjs.Source.prototype.onResizeElement = function(){
var newHeight = 1 / (sourceAspect / screenWidth)
this.domElement.style.height = newHeight+'px'
this.domElement.style.marginTop = -(newHeight-screenHeight)/2+'px'
// init style.width/.marginLeft to normal value
this.domElement.style.width = screenWidth+'px'
this.domElement.style.marginLeft = '0px'
......@@ -6190,7 +6195,7 @@ ARjs.Source.prototype.onResizeElement = function(){
/*
ARjs.Source.prototype.copyElementSizeTo = function(otherElement){
otherElement.style.width = this.domElement.style.width
otherElement.style.height = this.domElement.style.height
otherElement.style.height = this.domElement.style.height
otherElement.style.marginLeft = this.domElement.style.marginLeft
otherElement.style.marginTop = this.domElement.style.marginTop
}
......@@ -6236,28 +6241,28 @@ ARjs.Source.prototype.onResize = function(arToolkitContext, renderer, camera){
}
var trackingBackend = arToolkitContext.parameters.trackingBackend
// RESIZE DOMELEMENT
if( trackingBackend === 'artoolkit' ){
this.onResizeElement()
var isAframe = renderer.domElement.dataset.aframeCanvas ? true : false
if( isAframe === false ){
this.copyElementSizeTo(renderer.domElement)
this.copyElementSizeTo(renderer.domElement)
}else{
}
if( arToolkitContext.arController !== null ){
this.copyElementSizeTo(arToolkitContext.arController.canvas)
this.copyElementSizeTo(arToolkitContext.arController.canvas)
}
}else if( trackingBackend === 'aruco' ){
this.onResizeElement()
this.copyElementSizeTo(renderer.domElement)
this.copyElementSizeTo(renderer.domElement)
this.copyElementSizeTo(arToolkitContext.arucoContext.canvas)
this.copyElementSizeTo(arToolkitContext.arucoContext.canvas)
}else if( trackingBackend === 'tango' ){
renderer.setSize( window.innerWidth, window.innerHeight )
}else console.assert(false, 'unhandled trackingBackend '+trackingBackend)
......@@ -6266,16 +6271,16 @@ ARjs.Source.prototype.onResize = function(arToolkitContext, renderer, camera){
// UPDATE CAMERA
if( trackingBackend === 'artoolkit' ){
if( arToolkitContext.arController !== null ){
camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
}
}else if( trackingBackend === 'aruco' ){
}else if( trackingBackend === 'aruco' ){
camera.aspect = renderer.domElement.width / renderer.domElement.height;
camera.updateProjectionMatrix();
camera.updateProjectionMatrix();
}else if( trackingBackend === 'tango' ){
var vrDisplay = arToolkitContext._tangoContext.vrDisplay
// make camera fit vrDisplay
if( vrDisplay && vrDisplay.displayName === "Tango VR Device" ) THREE.WebAR.resizeVRSeeThroughCamera(vrDisplay, camera)
}else console.assert(false, 'unhandled trackingBackend '+trackingBackend)
}else console.assert(false, 'unhandled trackingBackend '+trackingBackend)
}
var THREEx = THREEx || {}
three.js/build/ar.lean.js
浏览文件 @ 23da00d9
......@@ -2949,7 +2949,7 @@ ARjs.Profile.prototype._guessPerformanceLabel = function() {
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)
? true : false
? true : false
if( isMobile === true ){
return 'phone-normal'
}
......@@ -2965,17 +2965,17 @@ ARjs.Profile.prototype._guessPerformanceLabel = function() {
*/
ARjs.Profile.prototype.reset = function () {
this.sourceParameters = {
// to read from the webcam
// to read from the webcam
sourceType : 'webcam',
}
this.contextParameters = {
cameraParametersUrl: THREEx.ArToolkitContext.baseURL + '../data/data/camera_para.dat',
cameraParametersUrl: '../../data/data/camera_para.dat',
detectionMode: 'mono',
}
this.defaultMarkerParameters = {
type : 'pattern',
patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro',
patternUrl : '../../data/data/patt.hiro',
changeMatrixMode: 'modelViewMatrix',
}
return this
......@@ -3012,7 +3012,7 @@ ARjs.Profile.prototype.performance = function(label) {
this.contextParameters.canvasWidth = 80*3
this.contextParameters.canvasHeight = 60*3
this.contextParameters.maxDetectionRate = 30
this.contextParameters.maxDetectionRate = 30
}else {
console.assert(false, 'unknonwn label '+label)
}
......@@ -3030,7 +3030,7 @@ ARjs.Profile.prototype.defaultMarker = function (trackingBackend) {
if( trackingBackend === 'artoolkit' ){
this.contextParameters.detectionMode = 'mono'
this.defaultMarkerParameters.type = 'pattern'
this.defaultMarkerParameters.patternUrl = THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro'
this.defaultMarkerParameters.patternUrl = '../../data/data/patt.hiro'
}else if( trackingBackend === 'aruco' ){
this.contextParameters.detectionMode = 'mono'
this.defaultMarkerParameters.type = 'barcode'
......@@ -3087,7 +3087,7 @@ ARjs.Profile.prototype.changeMatrixMode = function (changeMatrixMode) {
ARjs.Profile.prototype.trackingMethod = function (trackingMethod) {
var data = ARjs.Utils.parseTrackingMethod(trackingMethod)
this.defaultMarkerParameters.markersAreaEnabled = data.markersAreaEnabled
this.contextParameters.trackingBackend = data.trackingBackend
this.contextParameters.trackingBackend = data.trackingBackend
return this
}
......@@ -3096,14 +3096,14 @@ ARjs.Profile.prototype.trackingMethod = function (trackingMethod) {
*/
ARjs.Profile.prototype.checkIfValid = function () {
if( this.contextParameters.trackingBackend === 'tango' ){
this.sourceImage(THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg')
this.sourceImage('../../data/images/img.jpg')
}
return this
}
var ARjs = ARjs || {}
var THREEx = THREEx || {}
ARjs.Source = THREEx.ArToolkitSource = function(parameters){
ARjs.Source = THREEx.ArToolkitSource = function(parameters){
var _this = this
this.ready = false
......@@ -3122,7 +3122,7 @@ ARjs.Source = THREEx.ArToolkitSource = function(parameters){
// resolution of at which we initialize in the source image
sourceWidth: 640,
sourceHeight: 480,
// resolution displayed for the source
// resolution displayed for the source
displayWidth: 640,
displayHeight: 480,
}
......@@ -3149,7 +3149,7 @@ ARjs.Source = THREEx.ArToolkitSource = function(parameters){
_this.parameters[ key ] = newValue
}
}
}
}
//////////////////////////////////////////////////////////////////////////////
......@@ -3159,12 +3159,12 @@ ARjs.Source.prototype.init = function(onReady, onError){
var _this = this
if( this.parameters.sourceType === 'image' ){
var domElement = this._initSourceImage(onSourceReady, onError)
var domElement = this._initSourceImage(onSourceReady, onError)
}else if( this.parameters.sourceType === 'video' ){
var domElement = this._initSourceVideo(onSourceReady, onError)
var domElement = this._initSourceVideo(onSourceReady, onError)
}else if( this.parameters.sourceType === 'webcam' ){
// var domElement = this._initSourceWebcamOld(onSourceReady)
var domElement = this._initSourceWebcam(onSourceReady, onError)
// var domElement = this._initSourceWebcamOld(onSourceReady)
var domElement = this._initSourceWebcam(onSourceReady, onError)
}else{
console.assert(false)
}
......@@ -3184,7 +3184,7 @@ ARjs.Source.prototype.init = function(onReady, onError){
onReady && onReady()
}
}
}
////////////////////////////////////////////////////////////////////////////////
// init image source
......@@ -3208,7 +3208,7 @@ ARjs.Source.prototype._initSourceImage = function(onReady) {
clearInterval(interval)
}, 1000/50);
return domElement
return domElement
}
////////////////////////////////////////////////////////////////////////////////
......@@ -3239,7 +3239,7 @@ ARjs.Source.prototype._initSourceVideo = function(onReady) {
domElement.height = this.parameters.sourceHeight
domElement.style.width = this.parameters.displayWidth+'px'
domElement.style.height = this.parameters.displayHeight+'px'
// wait until the video stream is ready
var interval = setInterval(function() {
if (!domElement.videoWidth) return;
......@@ -3257,8 +3257,10 @@ ARjs.Source.prototype._initSourceWebcam = function(onReady, onError) {
var _this = this
// init default value
onError = onError || function(error){
onError = onError || function(error){
alert('Webcam Error\nName: '+error.name + '\nMessage: '+error.message)
var event = new CustomEvent('camera-error', {error: error});
window.dispatchEvent(event);
}
var domElement = document.createElement('video');
......@@ -3269,8 +3271,8 @@ ARjs.Source.prototype._initSourceWebcam = function(onReady, onError) {
domElement.style.height = this.parameters.displayHeight+'px'
// check API is available
if (navigator.mediaDevices === undefined
|| navigator.mediaDevices.enumerateDevices === undefined
if (navigator.mediaDevices === undefined
|| navigator.mediaDevices.enumerateDevices === undefined
|| navigator.mediaDevices.getUserMedia === undefined ){
if( navigator.mediaDevices === undefined ) var fctName = 'navigator.mediaDevices'
else if( navigator.mediaDevices.enumerateDevices === undefined ) var fctName = 'navigator.mediaDevices.enumerateDevices'
......@@ -3311,11 +3313,14 @@ ARjs.Source.prototype._initSourceWebcam = function(onReady, onError) {
// get a device which satisfy the constraints
navigator.mediaDevices.getUserMedia(userMediaConstraints).then(function success(stream) {
// set the .src of the domElement
domElement.srcObject = stream;
domElement.srcObject = stream;
var event = new CustomEvent('camera-init', {stream: stream});
window.dispatchEvent(event);
// to start the video, when it is possible to start it only on userevent. like in android
document.body.addEventListener('click', function(){
domElement.play();
})
});
// domElement.play();
// TODO listen to loadedmetadata instead
......@@ -3357,7 +3362,7 @@ ARjs.Source.prototype.hasMobileTorch = function(){
if( videoTrack.getCapabilities === undefined ) return false
var capabilities = videoTrack.getCapabilities()
return capabilities.torch ? true : false
}
......@@ -3368,7 +3373,7 @@ ARjs.Source.prototype.hasMobileTorch = function(){
ARjs.Source.prototype.toggleMobileTorch = function(){
// sanity check
console.assert(this.hasMobileTorch() === true)
var stream = arToolkitSource.domElement.srcObject
if( stream instanceof MediaStream === false ){
alert('enabling mobile torch is available only on webcam')
......@@ -3381,7 +3386,7 @@ ARjs.Source.prototype.toggleMobileTorch = function(){
var videoTrack = stream.getVideoTracks()[0];
var capabilities = videoTrack.getCapabilities()
if( !capabilities.torch ){
alert('no mobile torch is available on your camera')
return
......@@ -3426,7 +3431,7 @@ ARjs.Source.prototype.onResizeElement = function(){
}else{
console.assert(false)
}
// compute sourceAspect
var sourceAspect = sourceWidth / sourceHeight
// compute screenAspect
......@@ -3438,7 +3443,7 @@ ARjs.Source.prototype.onResizeElement = function(){
var newWidth = sourceAspect * screenHeight
this.domElement.style.width = newWidth+'px'
this.domElement.style.marginLeft = -(newWidth-screenWidth)/2+'px'
// init style.height/.marginTop to normal value
this.domElement.style.height = screenHeight+'px'
this.domElement.style.marginTop = '0px'
......@@ -3447,7 +3452,7 @@ ARjs.Source.prototype.onResizeElement = function(){
var newHeight = 1 / (sourceAspect / screenWidth)
this.domElement.style.height = newHeight+'px'
this.domElement.style.marginTop = -(newHeight-screenHeight)/2+'px'
// init style.width/.marginLeft to normal value
this.domElement.style.width = screenWidth+'px'
this.domElement.style.marginLeft = '0px'
......@@ -3456,7 +3461,7 @@ ARjs.Source.prototype.onResizeElement = function(){
/*
ARjs.Source.prototype.copyElementSizeTo = function(otherElement){
otherElement.style.width = this.domElement.style.width
otherElement.style.height = this.domElement.style.height
otherElement.style.height = this.domElement.style.height
otherElement.style.marginLeft = this.domElement.style.marginLeft
otherElement.style.marginTop = this.domElement.style.marginTop
}
......@@ -3502,28 +3507,28 @@ ARjs.Source.prototype.onResize = function(arToolkitContext, renderer, camera){
}
var trackingBackend = arToolkitContext.parameters.trackingBackend
// RESIZE DOMELEMENT
if( trackingBackend === 'artoolkit' ){
this.onResizeElement()
var isAframe = renderer.domElement.dataset.aframeCanvas ? true : false
if( isAframe === false ){
this.copyElementSizeTo(renderer.domElement)
this.copyElementSizeTo(renderer.domElement)
}else{
}
if( arToolkitContext.arController !== null ){
this.copyElementSizeTo(arToolkitContext.arController.canvas)
this.copyElementSizeTo(arToolkitContext.arController.canvas)
}
}else if( trackingBackend === 'aruco' ){
this.onResizeElement()
this.copyElementSizeTo(renderer.domElement)
this.copyElementSizeTo(renderer.domElement)
this.copyElementSizeTo(arToolkitContext.arucoContext.canvas)
this.copyElementSizeTo(arToolkitContext.arucoContext.canvas)
}else if( trackingBackend === 'tango' ){
renderer.setSize( window.innerWidth, window.innerHeight )
}else console.assert(false, 'unhandled trackingBackend '+trackingBackend)
......@@ -3532,16 +3537,16 @@ ARjs.Source.prototype.onResize = function(arToolkitContext, renderer, camera){
// UPDATE CAMERA
if( trackingBackend === 'artoolkit' ){
if( arToolkitContext.arController !== null ){
camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
}
}else if( trackingBackend === 'aruco' ){
}else if( trackingBackend === 'aruco' ){
camera.aspect = renderer.domElement.width / renderer.domElement.height;
camera.updateProjectionMatrix();
camera.updateProjectionMatrix();
}else if( trackingBackend === 'tango' ){
var vrDisplay = arToolkitContext._tangoContext.vrDisplay
// make camera fit vrDisplay
if( vrDisplay && vrDisplay.displayName === "Tango VR Device" ) THREE.WebAR.resizeVRSeeThroughCamera(vrDisplay, camera)
}else console.assert(false, 'unhandled trackingBackend '+trackingBackend)
}else console.assert(false, 'unhandled trackingBackend '+trackingBackend)
}
var THREEx = THREEx || {}
......
three.js/contribs/portableAR.js/build/portable-ar.js
浏览文件 @ 23da00d9
......@@ -54181,7 +54181,7 @@ ARjs.Profile.prototype._guessPerformanceLabel = function() {
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)
? true : false
? true : false
if( isMobile === true ){
return 'phone-normal'
}
......@@ -54197,17 +54197,17 @@ ARjs.Profile.prototype._guessPerformanceLabel = function() {
*/
ARjs.Profile.prototype.reset = function () {
this.sourceParameters = {
// to read from the webcam
// to read from the webcam
sourceType : 'webcam',
}
this.contextParameters = {
cameraParametersUrl: THREEx.ArToolkitContext.baseURL + '../data/data/camera_para.dat',
cameraParametersUrl: '../../data/data/camera_para.dat',
detectionMode: 'mono',
}
this.defaultMarkerParameters = {
type : 'pattern',
patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro',
patternUrl : '../../data/data/patt.hiro',
changeMatrixMode: 'modelViewMatrix',
}
return this
......@@ -54244,7 +54244,7 @@ ARjs.Profile.prototype.performance = function(label) {
this.contextParameters.canvasWidth = 80*3
this.contextParameters.canvasHeight = 60*3
this.contextParameters.maxDetectionRate = 30
this.contextParameters.maxDetectionRate = 30
}else {
console.assert(false, 'unknonwn label '+label)
}
......@@ -54262,7 +54262,7 @@ ARjs.Profile.prototype.defaultMarker = function (trackingBackend) {
if( trackingBackend === 'artoolkit' ){
this.contextParameters.detectionMode = 'mono'
this.defaultMarkerParameters.type = 'pattern'
this.defaultMarkerParameters.patternUrl = THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro'
this.defaultMarkerParameters.patternUrl = '../../data/data/patt.hiro'
}else if( trackingBackend === 'aruco' ){
this.contextParameters.detectionMode = 'mono'
this.defaultMarkerParameters.type = 'barcode'
......@@ -54319,7 +54319,7 @@ ARjs.Profile.prototype.changeMatrixMode = function (changeMatrixMode) {
ARjs.Profile.prototype.trackingMethod = function (trackingMethod) {
var data = ARjs.Utils.parseTrackingMethod(trackingMethod)
this.defaultMarkerParameters.markersAreaEnabled = data.markersAreaEnabled
this.contextParameters.trackingBackend = data.trackingBackend
this.contextParameters.trackingBackend = data.trackingBackend
return this
}
......@@ -54328,14 +54328,14 @@ ARjs.Profile.prototype.trackingMethod = function (trackingMethod) {
*/
ARjs.Profile.prototype.checkIfValid = function () {
if( this.contextParameters.trackingBackend === 'tango' ){
this.sourceImage(THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg')
this.sourceImage('../../data/images/img.jpg')
}
return this
}
var ARjs = ARjs || {}
var THREEx = THREEx || {}
ARjs.Source = THREEx.ArToolkitSource = function(parameters){
ARjs.Source = THREEx.ArToolkitSource = function(parameters){
var _this = this
this.ready = false
......@@ -54354,7 +54354,7 @@ ARjs.Source = THREEx.ArToolkitSource = function(parameters){
// resolution of at which we initialize in the source image
sourceWidth: 640,
sourceHeight: 480,
// resolution displayed for the source
// resolution displayed for the source
displayWidth: 640,
displayHeight: 480,
}
......@@ -54381,7 +54381,7 @@ ARjs.Source = THREEx.ArToolkitSource = function(parameters){
_this.parameters[ key ] = newValue
}
}
}
}
//////////////////////////////////////////////////////////////////////////////
......@@ -54391,12 +54391,12 @@ ARjs.Source.prototype.init = function(onReady, onError){
var _this = this
if( this.parameters.sourceType === 'image' ){
var domElement = this._initSourceImage(onSourceReady, onError)
var domElement = this._initSourceImage(onSourceReady, onError)
}else if( this.parameters.sourceType === 'video' ){
var domElement = this._initSourceVideo(onSourceReady, onError)
var domElement = this._initSourceVideo(onSourceReady, onError)
}else if( this.parameters.sourceType === 'webcam' ){
// var domElement = this._initSourceWebcamOld(onSourceReady)
var domElement = this._initSourceWebcam(onSourceReady, onError)
// var domElement = this._initSourceWebcamOld(onSourceReady)
var domElement = this._initSourceWebcam(onSourceReady, onError)
}else{
console.assert(false)
}
......@@ -54416,7 +54416,7 @@ ARjs.Source.prototype.init = function(onReady, onError){
onReady && onReady()
}
}
}
////////////////////////////////////////////////////////////////////////////////
// init image source
......@@ -54440,7 +54440,7 @@ ARjs.Source.prototype._initSourceImage = function(onReady) {
clearInterval(interval)
}, 1000/50);
return domElement
return domElement
}
////////////////////////////////////////////////////////////////////////////////
......@@ -54471,7 +54471,7 @@ ARjs.Source.prototype._initSourceVideo = function(onReady) {
domElement.height = this.parameters.sourceHeight
domElement.style.width = this.parameters.displayWidth+'px'
domElement.style.height = this.parameters.displayHeight+'px'
// wait until the video stream is ready
var interval = setInterval(function() {
if (!domElement.videoWidth) return;
......@@ -54489,8 +54489,10 @@ ARjs.Source.prototype._initSourceWebcam = function(onReady, onError) {
var _this = this
// init default value
onError = onError || function(error){
onError = onError || function(error){
alert('Webcam Error\nName: '+error.name + '\nMessage: '+error.message)
var event = new CustomEvent('camera-error', {error: error});
window.dispatchEvent(event);
}
var domElement = document.createElement('video');
......@@ -54501,8 +54503,8 @@ ARjs.Source.prototype._initSourceWebcam = function(onReady, onError) {
domElement.style.height = this.parameters.displayHeight+'px'
// check API is available
if (navigator.mediaDevices === undefined
|| navigator.mediaDevices.enumerateDevices === undefined
if (navigator.mediaDevices === undefined
|| navigator.mediaDevices.enumerateDevices === undefined
|| navigator.mediaDevices.getUserMedia === undefined ){
if( navigator.mediaDevices === undefined ) var fctName = 'navigator.mediaDevices'
else if( navigator.mediaDevices.enumerateDevices === undefined ) var fctName = 'navigator.mediaDevices.enumerateDevices'
......@@ -54543,11 +54545,14 @@ ARjs.Source.prototype._initSourceWebcam = function(onReady, onError) {
// get a device which satisfy the constraints
navigator.mediaDevices.getUserMedia(userMediaConstraints).then(function success(stream) {
// set the .src of the domElement
domElement.srcObject = stream;
domElement.srcObject = stream;
var event = new CustomEvent('camera-init', {stream: stream});
window.dispatchEvent(event);
// to start the video, when it is possible to start it only on userevent. like in android
document.body.addEventListener('click', function(){
domElement.play();
})
});
// domElement.play();
// TODO listen to loadedmetadata instead
......@@ -54589,7 +54594,7 @@ ARjs.Source.prototype.hasMobileTorch = function(){
if( videoTrack.getCapabilities === undefined ) return false
var capabilities = videoTrack.getCapabilities()
return capabilities.torch ? true : false
}
......@@ -54600,7 +54605,7 @@ ARjs.Source.prototype.hasMobileTorch = function(){
ARjs.Source.prototype.toggleMobileTorch = function(){
// sanity check
console.assert(this.hasMobileTorch() === true)
var stream = arToolkitSource.domElement.srcObject
if( stream instanceof MediaStream === false ){
alert('enabling mobile torch is available only on webcam')
......@@ -54613,7 +54618,7 @@ ARjs.Source.prototype.toggleMobileTorch = function(){
var videoTrack = stream.getVideoTracks()[0];
var capabilities = videoTrack.getCapabilities()
if( !capabilities.torch ){
alert('no mobile torch is available on your camera')
return
......@@ -54658,7 +54663,7 @@ ARjs.Source.prototype.onResizeElement = function(){
}else{
console.assert(false)
}
// compute sourceAspect
var sourceAspect = sourceWidth / sourceHeight
// compute screenAspect
......@@ -54670,7 +54675,7 @@ ARjs.Source.prototype.onResizeElement = function(){
var newWidth = sourceAspect * screenHeight
this.domElement.style.width = newWidth+'px'
this.domElement.style.marginLeft = -(newWidth-screenWidth)/2+'px'
// init style.height/.marginTop to normal value
this.domElement.style.height = screenHeight+'px'
this.domElement.style.marginTop = '0px'
......@@ -54679,7 +54684,7 @@ ARjs.Source.prototype.onResizeElement = function(){
var newHeight = 1 / (sourceAspect / screenWidth)
this.domElement.style.height = newHeight+'px'
this.domElement.style.marginTop = -(newHeight-screenHeight)/2+'px'
// init style.width/.marginLeft to normal value
this.domElement.style.width = screenWidth+'px'
this.domElement.style.marginLeft = '0px'
......@@ -54688,7 +54693,7 @@ ARjs.Source.prototype.onResizeElement = function(){
/*
ARjs.Source.prototype.copyElementSizeTo = function(otherElement){
otherElement.style.width = this.domElement.style.width
otherElement.style.height = this.domElement.style.height
otherElement.style.height = this.domElement.style.height
otherElement.style.marginLeft = this.domElement.style.marginLeft
otherElement.style.marginTop = this.domElement.style.marginTop
}
......@@ -54734,28 +54739,28 @@ ARjs.Source.prototype.onResize = function(arToolkitContext, renderer, camera){
}
var trackingBackend = arToolkitContext.parameters.trackingBackend
// RESIZE DOMELEMENT
if( trackingBackend === 'artoolkit' ){
this.onResizeElement()
var isAframe = renderer.domElement.dataset.aframeCanvas ? true : false
if( isAframe === false ){
this.copyElementSizeTo(renderer.domElement)
this.copyElementSizeTo(renderer.domElement)
}else{
}
if( arToolkitContext.arController !== null ){
this.copyElementSizeTo(arToolkitContext.arController.canvas)
this.copyElementSizeTo(arToolkitContext.arController.canvas)
}
}else if( trackingBackend === 'aruco' ){
this.onResizeElement()
this.copyElementSizeTo(renderer.domElement)
this.copyElementSizeTo(renderer.domElement)
this.copyElementSizeTo(arToolkitContext.arucoContext.canvas)
this.copyElementSizeTo(arToolkitContext.arucoContext.canvas)
}else if( trackingBackend === 'tango' ){
renderer.setSize( window.innerWidth, window.innerHeight )
}else console.assert(false, 'unhandled trackingBackend '+trackingBackend)
......@@ -54764,16 +54769,16 @@ ARjs.Source.prototype.onResize = function(arToolkitContext, renderer, camera){
// UPDATE CAMERA
if( trackingBackend === 'artoolkit' ){
if( arToolkitContext.arController !== null ){
camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
}
}else if( trackingBackend === 'aruco' ){
}else if( trackingBackend === 'aruco' ){
camera.aspect = renderer.domElement.width / renderer.domElement.height;
camera.updateProjectionMatrix();
camera.updateProjectionMatrix();
}else if( trackingBackend === 'tango' ){
var vrDisplay = arToolkitContext._tangoContext.vrDisplay
// make camera fit vrDisplay
if( vrDisplay && vrDisplay.displayName === "Tango VR Device" ) THREE.WebAR.resizeVRSeeThroughCamera(vrDisplay, camera)
}else console.assert(false, 'unhandled trackingBackend '+trackingBackend)
}else console.assert(false, 'unhandled trackingBackend '+trackingBackend)
}
var THREEx = THREEx || {}
three.js/examples/multi-markers/examples/threex-screenasportal/threex-screenasportal.js
浏览文件 @ 23da00d9
......@@ -11,7 +11,7 @@ THREEx.ScreenAsPortal = function(multiMarkerFile){
onRenderFct()
})
}
// compute screenSize
var markerSize = 1
var whiteMargin = 0.125*2
......@@ -32,21 +32,21 @@ THREEx.ScreenAsPortal = function(multiMarkerFile){
return
function initLogo(){
// add the inner box
var geometry = new THREE.PlaneGeometry(1,1).rotateX(-Math.PI/2)
var material = new THREE.MeshBasicMaterial({
side: THREE.DoubleSide,
map: new THREE.TextureLoader().load(THREEx.ArToolkitContext.baseURL+'../data/logo/logo-black-transparent-512x204.png'),
map: new THREE.TextureLoader().load('../../data/logo/logo-black-transparent-512x204.png'),
alphaTest: 0.9,
})
})
var mesh = new THREE.Mesh( geometry, material )
mesh.scale.set(screenSize.x, 1, screenSize.x*204/512)
mesh.position.y = -screenDepth + 0.3
_this.object3d.add(mesh)
_this.object3d.add(mesh)
}
function initCube(){
// add outter cube - invisibility cloak
var geometry = new THREE.BoxGeometry(screenSize.x, screenDepth, screenSize.z)
......@@ -71,12 +71,12 @@ THREEx.ScreenAsPortal = function(multiMarkerFile){
side: THREE.BackSide,
map: textureBox,
color: 'white',
})
})
var innerBoxMesh = new THREE.Mesh( geometry, material )
// innerBoxMesh.scale.set(0.96, 1, 0.96)
innerBoxMesh.position.y = -geometry.parameters.height/2
_this.object3d.add( innerBoxMesh )
_this.object3d.add( innerBoxMesh )
}
function addTargets(){
......@@ -86,7 +86,7 @@ THREEx.ScreenAsPortal = function(multiMarkerFile){
side: THREE.DoubleSide,
map: new THREE.TextureLoader().load(THREEx.ScreenAsPortal.baseURL+'images/target.png'),
alphaTest: 0.9,
})
})
var targetModel = new THREE.Mesh( geometry, material )
// create a blue LineBasicMaterial
......@@ -101,8 +101,8 @@ THREEx.ScreenAsPortal = function(multiMarkerFile){
var height = screenDepth*0.25 + Math.random() * (screenDepth * 2)
addTarget( positionX, positionZ, height)
}
return
function addTarget(positionX, positionZ, height){
var geometry = new THREE.Geometry()
......@@ -113,7 +113,7 @@ THREEx.ScreenAsPortal = function(multiMarkerFile){
line.position.y = -screenDepth
line.position.z = positionZ
_this.object3d.add(line)
var target = targetModel.clone()
target.position.copy(line.position)
target.position.y += height
......@@ -126,7 +126,7 @@ THREEx.ScreenAsPortal = function(multiMarkerFile){
//////////////////////////////////////////////////////////////////////////////
function addBorders(){
var thickNess = 0.15
var material = new THREE.MeshNormalMaterial()
var material = new THREE.MeshBasicMaterial({
color: 'black',
......@@ -137,26 +137,26 @@ THREEx.ScreenAsPortal = function(multiMarkerFile){
var mesh = new THREE.Mesh(geometry, material)
mesh.position.y = +thickNess/2
mesh.position.z = -screenSize.z/2
_this.object3d.add(mesh)
_this.object3d.add(mesh)
// bottom border
var mesh = new THREE.Mesh(geometry, material)
mesh.position.y = +thickNess/2
mesh.position.z = +screenSize.z/2
_this.object3d.add(mesh)
_this.object3d.add(mesh)
// left border
var geometry = new THREE.BoxGeometry(thickNess, thickNess, screenSize.z).rotateZ(Math.PI/4)
var mesh = new THREE.Mesh(geometry, material)
mesh.position.y = +thickNess/2
mesh.position.x = -screenSize.x/2
_this.object3d.add(mesh)
_this.object3d.add(mesh)
// right border
var mesh = new THREE.Mesh(geometry, material)
mesh.position.y = +thickNess/2
mesh.position.x = +screenSize.x/2
_this.object3d.add(mesh)
_this.object3d.add(mesh)
}
}
......
three.js/src/new-api/arjs-debugui.js
浏览文件 @ 23da00d9
......@@ -6,75 +6,50 @@ var ARjs = ARjs || {}
*
* @param {ARjs.Anchor} arAnchor - the anchor to user
*/
ARjs.SessionDebugUI = function(arSession, tangoPointCloud){
var trackingBackend = arSession.arContext.parameters.trackingBackend
this.domElement = document.createElement('div')
this.domElement.style.color = 'rgba(0,0,0,0.9)'
this.domElement.style.backgroundColor = 'rgba(127,127,127,0.5)'
this.domElement.style.display = 'inline-block'
this.domElement.style.padding = '0.5em'
this.domElement.style.margin = '0.5em'
this.domElement.style.textAlign = 'left'
//////////////////////////////////////////////////////////////////////////////
// add title
//////////////////////////////////////////////////////////////////////////////
// var domElement = document.createElement('div')
// domElement.style.display = 'block'
// domElement.style.fontWeight = 'bold'
// domElement.style.fontSize = '120%'
// this.domElement.appendChild(domElement)
// domElement.innerHTML = 'AR.js Session Debug'
//////////////////////////////////////////////////////////////////////////////
// current-tracking-backend
//////////////////////////////////////////////////////////////////////////////
var domElement = document.createElement('span')
domElement.style.display = 'block'
this.domElement.appendChild(domElement)
domElement.innerHTML = '<b>trackingBackend</b> : ' +trackingBackend
//////////////////////////////////////////////////////////////////////////////
// augmented-websites
//////////////////////////////////////////////////////////////////////////////
if( ARjs.SessionDebugUI.AugmentedWebsiteURL ){
var domElement = document.createElement('a')
domElement.innerHTML = 'Share on augmented-websites'
domElement.style.display = 'block'
domElement.style.position = 'fixed';
domElement.style.left = '5px';
domElement.style.bottom = '10px';
// domElement.setAttribute('target', '_blank')
domElement.href = ARjs.SessionDebugUI.AugmentedWebsiteURL + '?'+location.href
this.domElement.appendChild(domElement)
}
//////////////////////////////////////////////////////////////////////////////
// toggle-point-cloud
//////////////////////////////////////////////////////////////////////////////
if( trackingBackend === 'tango' && tangoPointCloud ){
var domElement = document.createElement('button')
this.domElement.appendChild(domElement)
domElement.id= 'buttonTangoTogglePointCloud'
domElement.innerHTML = 'toggle-point-cloud'
domElement.href='javascript:void(0)'
domElement.addEventListener('click', function(){
var scene = arSession.parameters.scene
// TODO how tangoPointCloud, get connected here ???
// in arguments simply ?
if( tangoPointCloud.object3d.parent ){
scene.remove(tangoPointCloud.object3d)
}else{
scene.add(tangoPointCloud.object3d)
}
})
}
ARjs.SessionDebugUI = function (arSession, tangoPointCloud) {
var trackingBackend = arSession.arContext.parameters.trackingBackend
this.domElement = document.createElement('div')
this.domElement.style.color = 'rgba(0,0,0,0.9)'
this.domElement.style.backgroundColor = 'rgba(127,127,127,0.5)'
this.domElement.style.display = 'block'
this.domElement.style.padding = '0.5em'
this.domElement.style.position = 'fixed'
this.domElement.style.left = '5px'
this.domElement.style.bottom = '10px'
this.domElement.style.textAlign = 'right'
//////////////////////////////////////////////////////////////////////////////
// current-tracking-backend
//////////////////////////////////////////////////////////////////////////////
var domElement = document.createElement('span')
domElement.style.display = 'block'
domElement.innerHTML = '<b>trackingBackend</b> : ' + trackingBackend
this.domElement.appendChild(domElement)
//////////////////////////////////////////////////////////////////////////////
// toggle-point-cloud
//////////////////////////////////////////////////////////////////////////////
if (trackingBackend === 'tango' && tangoPointCloud) {
var domElement = document.createElement('button')
this.domElement.appendChild(domElement)
domElement.id = 'buttonTangoTogglePointCloud'
domElement.innerHTML = 'toggle-point-cloud'
domElement.href = 'javascript:void(0)'
domElement.addEventListener('click', function () {
var scene = arSession.parameters.scene
if (tangoPointCloud.object3d.parent) {
scene.remove(tangoPointCloud.object3d)
} else {
scene.add(tangoPointCloud.object3d)
}
})
}
}
/**
......@@ -87,108 +62,103 @@ ARjs.SessionDebugUI.AugmentedWebsiteURL = 'https://webxr.io/augmented-website'
// ARjs.AnchorDebugUI
//////////////////////////////////////////////////////////////////////////////
/**
* Create an debug UI for an ARjs.Anchor
*
* @param {ARjs.Anchor} arAnchor - the anchor to user
*/
ARjs.AnchorDebugUI = function(arAnchor){
var _this = this
var arSession = arAnchor.arSession
var trackingBackend = arSession.arContext.parameters.trackingBackend
this.domElement = document.createElement('div')
this.domElement.style.color = 'rgba(0,0,0,0.9)'
this.domElement.style.backgroundColor = 'rgba(127,127,127,0.5)'
this.domElement.style.display = 'inline-block'
this.domElement.style.padding = '0.5em'
this.domElement.style.margin = '0.5em'
this.domElement.style.textAlign = 'left'
//////////////////////////////////////////////////////////////////////////////
// add title
//////////////////////////////////////////////////////////////////////////////
// var domElement = document.createElement('div')
// domElement.style.display = 'block'
// domElement.style.fontWeight = 'bold'
// domElement.style.fontSize = '120%'
// this.domElement.appendChild(domElement)
// domElement.innerHTML = 'Anchor Marker Debug'
//////////////////////////////////////////////////////////////////////////////
// current-tracking-backend
//////////////////////////////////////////////////////////////////////////////
var domElement = document.createElement('span')
domElement.style.display = 'block'
this.domElement.appendChild(domElement)
domElement.innerHTML = '<b>markersAreaEnabled</b> :' +arAnchor.parameters.markersAreaEnabled
//////////////////////////////////////////////////////////////////////////////
// toggle-marker-helper
//////////////////////////////////////////////////////////////////////////////
if( arAnchor.parameters.markersAreaEnabled ){
var domElement = document.createElement('button')
domElement.style.display = 'block'
this.domElement.appendChild(domElement)
domElement.id= 'buttonToggleMarkerHelpers'
domElement.innerHTML = 'toggle-marker-helper'
domElement.href='javascript:void(0)'
var subMarkerHelpersVisible = false
domElement.addEventListener('click', function(){
subMarkerHelpersVisible = subMarkerHelpersVisible ? false : true
arAnchor.markersArea.setSubMarkersVisibility(subMarkerHelpersVisible)
})
}
//////////////////////////////////////////////////////////////////////////////
// Learn-new-marker-area
//////////////////////////////////////////////////////////////////////////////
if( arAnchor.parameters.markersAreaEnabled ){
var domElement = document.createElement('button')
domElement.style.display = 'block'
this.domElement.appendChild(domElement)
domElement.id = 'buttonMarkersAreaLearner'
domElement.innerHTML = 'Learn-new-marker-area'
domElement.href ='javascript:void(0)'
domElement.addEventListener('click', function(){
if( ARjs.AnchorDebugUI.MarkersAreaLearnerURL !== null ){
var learnerURL = ARjs.AnchorDebugUI.MarkersAreaLearnerURL
}else{
var learnerURL = ARjs.Context.baseURL + 'examples/multi-markers/examples/learner.html'
}
ARjs.MarkersAreaUtils.navigateToLearnerPage(learnerURL, trackingBackend)
})
}
//////////////////////////////////////////////////////////////////////////////
// Reset-marker-area
//////////////////////////////////////////////////////////////////////////////
if( arAnchor.parameters.markersAreaEnabled ){
var domElement = document.createElement('button')
domElement.style.display = 'block'
this.domElement.appendChild(domElement)
domElement.id = 'buttonMarkersAreaReset'
domElement.innerHTML = 'Reset-marker-area'
domElement.href ='javascript:void(0)'
domElement.addEventListener('click', function(){
ARjs.MarkersAreaUtils.storeDefaultMultiMarkerFile(trackingBackend)
location.reload()
})
}
ARjs.AnchorDebugUI = function (arAnchor) {
var arSession = arAnchor.arSession
var trackingBackend = arSession.arContext.parameters.trackingBackend
this.domElement = document.createElement('div')
this.domElement.style.color = 'rgba(0,0,0,0.9)'
this.domElement.style.backgroundColor = 'rgba(127,127,127,0.5)'
this.domElement.style.display = 'inline-block'
this.domElement.style.padding = '0.5em'
this.domElement.style.margin = '0.5em'
this.domElement.style.textAlign = 'left'
//////////////////////////////////////////////////////////////////////////////
// current-tracking-backend
//////////////////////////////////////////////////////////////////////////////
var domElement = document.createElement('span')
domElement.style.display = 'block'
domElement.style.padding = '0.5em'
domElement.style.color = 'rgba(0,0,0,0.9)'
domElement.style.backgroundColor = 'rgba(127,127,127,0.5)'
domElement.style.position = 'fixed'
domElement.style.left = '5px'
domElement.style.bottom = '40px'
this.domElement.appendChild(domElement)
domElement.innerHTML = '<b>markersAreaEnabled</b> :' + arAnchor.parameters.markersAreaEnabled
//////////////////////////////////////////////////////////////////////////////
// toggle-marker-helper
//////////////////////////////////////////////////////////////////////////////
if (arAnchor.parameters.markersAreaEnabled) {
var domElement = document.createElement('button')
domElement.style.display = 'block'
this.domElement.style.padding = '0.5em'
this.domElement.style.position = 'fixed'
this.domElement.style.textAlign = 'left'
this.domElement.appendChild(domElement)
domElement.id = 'buttonToggleMarkerHelpers'
domElement.innerHTML = 'toggle-marker-helper'
domElement.href = 'javascript:void(0)'
var subMarkerHelpersVisible = false
domElement.addEventListener('click', function () {
subMarkerHelpersVisible = subMarkerHelpersVisible ? false : true
arAnchor.markersArea.setSubMarkersVisibility(subMarkerHelpersVisible)
})
}
//////////////////////////////////////////////////////////////////////////////
// Learn-new-marker-area
//////////////////////////////////////////////////////////////////////////////
if (arAnchor.parameters.markersAreaEnabled) {
var domElement = document.createElement('button')
domElement.style.display = 'block'
this.domElement.appendChild(domElement)
domElement.id = 'buttonMarkersAreaLearner'
domElement.innerHTML = 'Learn-new-marker-area'
domElement.href = 'javascript:void(0)'
domElement.addEventListener('click', function () {
if (ARjs.AnchorDebugUI.MarkersAreaLearnerURL !== null) {
var learnerURL = ARjs.AnchorDebugUI.MarkersAreaLearnerURL
} else {
var learnerURL = ARjs.Context.baseURL + 'examples/multi-markers/examples/learner.html'
}
ARjs.MarkersAreaUtils.navigateToLearnerPage(learnerURL, trackingBackend)
})
}
//////////////////////////////////////////////////////////////////////////////
// Reset-marker-area
//////////////////////////////////////////////////////////////////////////////
if (arAnchor.parameters.markersAreaEnabled) {
var domElement = document.createElement('button')
domElement.style.display = 'block'
this.domElement.appendChild(domElement)
domElement.id = 'buttonMarkersAreaReset'
domElement.innerHTML = 'Reset-marker-area'
domElement.href = 'javascript:void(0)'
domElement.addEventListener('click', function () {
ARjs.MarkersAreaUtils.storeDefaultMultiMarkerFile(trackingBackend)
location.reload()
})
}
}
/**
......
three.js/src/threex/threex-artoolkitprofile.js
浏览文件 @ 23da00d9
......@@ -23,7 +23,7 @@ ARjs.Profile.prototype._guessPerformanceLabel = function() {
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)
? true : false
? true : false
if( isMobile === true ){
return 'phone-normal'
}
......@@ -39,17 +39,17 @@ ARjs.Profile.prototype._guessPerformanceLabel = function() {
*/
ARjs.Profile.prototype.reset = function () {
this.sourceParameters = {
// to read from the webcam
// to read from the webcam
sourceType : 'webcam',
}
this.contextParameters = {
cameraParametersUrl: THREEx.ArToolkitContext.baseURL + '../data/data/camera_para.dat',
cameraParametersUrl: '../../data/data/camera_para.dat',
detectionMode: 'mono',
}
this.defaultMarkerParameters = {
type : 'pattern',
patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro',
patternUrl : '../../data/data/patt.hiro',
changeMatrixMode: 'modelViewMatrix',
}
return this
......@@ -86,7 +86,7 @@ ARjs.Profile.prototype.performance = function(label) {
this.contextParameters.canvasWidth = 80*3
this.contextParameters.canvasHeight = 60*3
this.contextParameters.maxDetectionRate = 30
this.contextParameters.maxDetectionRate = 30
}else {
console.assert(false, 'unknonwn label '+label)
}
......@@ -104,7 +104,7 @@ ARjs.Profile.prototype.defaultMarker = function (trackingBackend) {
if( trackingBackend === 'artoolkit' ){
this.contextParameters.detectionMode = 'mono'
this.defaultMarkerParameters.type = 'pattern'
this.defaultMarkerParameters.patternUrl = THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro'
this.defaultMarkerParameters.patternUrl = '../../data/data/patt.hiro'
}else if( trackingBackend === 'aruco' ){
this.contextParameters.detectionMode = 'mono'
this.defaultMarkerParameters.type = 'barcode'
......@@ -161,7 +161,7 @@ ARjs.Profile.prototype.changeMatrixMode = function (changeMatrixMode) {
ARjs.Profile.prototype.trackingMethod = function (trackingMethod) {
var data = ARjs.Utils.parseTrackingMethod(trackingMethod)
this.defaultMarkerParameters.markersAreaEnabled = data.markersAreaEnabled
this.contextParameters.trackingBackend = data.trackingBackend
this.contextParameters.trackingBackend = data.trackingBackend
return this
}
......@@ -170,7 +170,7 @@ ARjs.Profile.prototype.trackingMethod = function (trackingMethod) {
*/
ARjs.Profile.prototype.checkIfValid = function () {
if( this.contextParameters.trackingBackend === 'tango' ){
this.sourceImage(THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg')
this.sourceImage('../../data/images/img.jpg')
}
return this
}
three.js/src/threex/threex-artoolkitsource.js
浏览文件 @ 23da00d9
var ARjs = ARjs || {}
var THREEx = THREEx || {}
ARjs.Source = THREEx.ArToolkitSource = function(parameters){
ARjs.Source = THREEx.ArToolkitSource = function(parameters){
var _this = this
this.ready = false
......@@ -20,7 +20,7 @@ ARjs.Source = THREEx.ArToolkitSource = function(parameters){
// resolution of at which we initialize in the source image
sourceWidth: 640,
sourceHeight: 480,
// resolution displayed for the source
// resolution displayed for the source
displayWidth: 640,
displayHeight: 480,
}
......@@ -47,7 +47,7 @@ ARjs.Source = THREEx.ArToolkitSource = function(parameters){
_this.parameters[ key ] = newValue
}
}
}
}
//////////////////////////////////////////////////////////////////////////////
......@@ -57,12 +57,12 @@ ARjs.Source.prototype.init = function(onReady, onError){
var _this = this
if( this.parameters.sourceType === 'image' ){
var domElement = this._initSourceImage(onSourceReady, onError)
var domElement = this._initSourceImage(onSourceReady, onError)
}else if( this.parameters.sourceType === 'video' ){
var domElement = this._initSourceVideo(onSourceReady, onError)
var domElement = this._initSourceVideo(onSourceReady, onError)
}else if( this.parameters.sourceType === 'webcam' ){
// var domElement = this._initSourceWebcamOld(onSourceReady)
var domElement = this._initSourceWebcam(onSourceReady, onError)
// var domElement = this._initSourceWebcamOld(onSourceReady)
var domElement = this._initSourceWebcam(onSourceReady, onError)
}else{
console.assert(false)
}
......@@ -82,7 +82,7 @@ ARjs.Source.prototype.init = function(onReady, onError){
onReady && onReady()
}
}
}
////////////////////////////////////////////////////////////////////////////////
// init image source
......@@ -106,7 +106,7 @@ ARjs.Source.prototype._initSourceImage = function(onReady) {
clearInterval(interval)
}, 1000/50);
return domElement
return domElement
}
////////////////////////////////////////////////////////////////////////////////
......@@ -137,7 +137,7 @@ ARjs.Source.prototype._initSourceVideo = function(onReady) {
domElement.height = this.parameters.sourceHeight
domElement.style.width = this.parameters.displayWidth+'px'
domElement.style.height = this.parameters.displayHeight+'px'
// wait until the video stream is ready
var interval = setInterval(function() {
if (!domElement.videoWidth) return;
......@@ -155,8 +155,10 @@ ARjs.Source.prototype._initSourceWebcam = function(onReady, onError) {
var _this = this
// init default value
onError = onError || function(error){
onError = onError || function(error){
alert('Webcam Error\nName: '+error.name + '\nMessage: '+error.message)
var event = new CustomEvent('camera-error', {error: error});
window.dispatchEvent(event);
}
var domElement = document.createElement('video');
......@@ -167,8 +169,8 @@ ARjs.Source.prototype._initSourceWebcam = function(onReady, onError) {
domElement.style.height = this.parameters.displayHeight+'px'
// check API is available
if (navigator.mediaDevices === undefined
|| navigator.mediaDevices.enumerateDevices === undefined
if (navigator.mediaDevices === undefined
|| navigator.mediaDevices.enumerateDevices === undefined
|| navigator.mediaDevices.getUserMedia === undefined ){
if( navigator.mediaDevices === undefined ) var fctName = 'navigator.mediaDevices'
else if( navigator.mediaDevices.enumerateDevices === undefined ) var fctName = 'navigator.mediaDevices.enumerateDevices'
......@@ -209,11 +211,14 @@ ARjs.Source.prototype._initSourceWebcam = function(onReady, onError) {
// get a device which satisfy the constraints
navigator.mediaDevices.getUserMedia(userMediaConstraints).then(function success(stream) {
// set the .src of the domElement
domElement.srcObject = stream;
domElement.srcObject = stream;
var event = new CustomEvent('camera-init', {stream: stream});
window.dispatchEvent(event);
// to start the video, when it is possible to start it only on userevent. like in android
document.body.addEventListener('click', function(){
domElement.play();
})
});
// domElement.play();
// TODO listen to loadedmetadata instead
......@@ -255,7 +260,7 @@ ARjs.Source.prototype.hasMobileTorch = function(){
if( videoTrack.getCapabilities === undefined ) return false
var capabilities = videoTrack.getCapabilities()
return capabilities.torch ? true : false
}
......@@ -266,7 +271,7 @@ ARjs.Source.prototype.hasMobileTorch = function(){
ARjs.Source.prototype.toggleMobileTorch = function(){
// sanity check
console.assert(this.hasMobileTorch() === true)
var stream = arToolkitSource.domElement.srcObject
if( stream instanceof MediaStream === false ){
alert('enabling mobile torch is available only on webcam')
......@@ -279,7 +284,7 @@ ARjs.Source.prototype.toggleMobileTorch = function(){
var videoTrack = stream.getVideoTracks()[0];
var capabilities = videoTrack.getCapabilities()
if( !capabilities.torch ){
alert('no mobile torch is available on your camera')
return
......@@ -324,7 +329,7 @@ ARjs.Source.prototype.onResizeElement = function(){
}else{
console.assert(false)
}
// compute sourceAspect
var sourceAspect = sourceWidth / sourceHeight
// compute screenAspect
......@@ -336,7 +341,7 @@ ARjs.Source.prototype.onResizeElement = function(){
var newWidth = sourceAspect * screenHeight
this.domElement.style.width = newWidth+'px'
this.domElement.style.marginLeft = -(newWidth-screenWidth)/2+'px'
// init style.height/.marginTop to normal value
this.domElement.style.height = screenHeight+'px'
this.domElement.style.marginTop = '0px'
......@@ -345,7 +350,7 @@ ARjs.Source.prototype.onResizeElement = function(){
var newHeight = 1 / (sourceAspect / screenWidth)
this.domElement.style.height = newHeight+'px'
this.domElement.style.marginTop = -(newHeight-screenHeight)/2+'px'
// init style.width/.marginLeft to normal value
this.domElement.style.width = screenWidth+'px'
this.domElement.style.marginLeft = '0px'
......@@ -354,7 +359,7 @@ ARjs.Source.prototype.onResizeElement = function(){
/*
ARjs.Source.prototype.copyElementSizeTo = function(otherElement){
otherElement.style.width = this.domElement.style.width
otherElement.style.height = this.domElement.style.height
otherElement.style.height = this.domElement.style.height
otherElement.style.marginLeft = this.domElement.style.marginLeft
otherElement.style.marginTop = this.domElement.style.marginTop
}
......@@ -400,28 +405,28 @@ ARjs.Source.prototype.onResize = function(arToolkitContext, renderer, camera){
}
var trackingBackend = arToolkitContext.parameters.trackingBackend
// RESIZE DOMELEMENT
if( trackingBackend === 'artoolkit' ){
this.onResizeElement()
var isAframe = renderer.domElement.dataset.aframeCanvas ? true : false
if( isAframe === false ){
this.copyElementSizeTo(renderer.domElement)
this.copyElementSizeTo(renderer.domElement)
}else{
}
if( arToolkitContext.arController !== null ){
this.copyElementSizeTo(arToolkitContext.arController.canvas)
this.copyElementSizeTo(arToolkitContext.arController.canvas)
}
}else if( trackingBackend === 'aruco' ){
this.onResizeElement()
this.copyElementSizeTo(renderer.domElement)
this.copyElementSizeTo(renderer.domElement)
this.copyElementSizeTo(arToolkitContext.arucoContext.canvas)
this.copyElementSizeTo(arToolkitContext.arucoContext.canvas)
}else if( trackingBackend === 'tango' ){
renderer.setSize( window.innerWidth, window.innerHeight )
}else console.assert(false, 'unhandled trackingBackend '+trackingBackend)
......@@ -430,14 +435,14 @@ ARjs.Source.prototype.onResize = function(arToolkitContext, renderer, camera){
// UPDATE CAMERA
if( trackingBackend === 'artoolkit' ){
if( arToolkitContext.arController !== null ){
camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
}
}else if( trackingBackend === 'aruco' ){
}else if( trackingBackend === 'aruco' ){
camera.aspect = renderer.domElement.width / renderer.domElement.height;
camera.updateProjectionMatrix();
camera.updateProjectionMatrix();
}else if( trackingBackend === 'tango' ){
var vrDisplay = arToolkitContext._tangoContext.vrDisplay
// make camera fit vrDisplay
if( vrDisplay && vrDisplay.displayName === "Tango VR Device" ) THREE.WebAR.resizeVRSeeThroughCamera(vrDisplay, camera)
}else console.assert(false, 'unhandled trackingBackend '+trackingBackend)
}else console.assert(false, 'unhandled trackingBackend '+trackingBackend)
}
three.js/vendor/jsartoolkit5/js/artoolkit.three.js
浏览文件 @ 23da00d9
......@@ -315,7 +315,7 @@
}
} else {
setTimeout(tick, 50);
}
}
};
tick();
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或