Skip to content

A
AR.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
A
AR.js

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

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

more work

上级 a99df83f
展开全部 显示空白变更内容
内联 并排
Showing with 219 addition and 132 deletion
three.js/examples/ar-in-webvr.html
浏览文件 @ 2dd3c457
......@@ -187,63 +187,6 @@
// patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.kanji',
})
//////////////////////////////////////////////////////////////////////////////
// Code Separator
//////////////////////////////////////////////////////////////////////////////
initSceneCubeTorus()
function initSceneCubeTorus(){
var group = new THREE.Group
group.scale.set(1,1,1).multiplyScalar(1.2)
group.rotation.x = -Math.PI/2
group.position.y = -0.5 * group.scale.x
markerRoot.add(group)
// add outter cube - invisibility cloak
var geometry = new THREE.BoxGeometry(1,1,1);
geometry.faces.splice(8, 2); // make hole by removing top two triangles (is this assumption stable?)
var material = buildTransparentMaterial()
var mesh = new THREE.Mesh( geometry, material);
mesh.scale.set(1,1,1).multiplyScalar(1.02)
group.add(mesh)
// add the inner box
var geometry = new THREE.BoxGeometry(1,1,1);
var material = new THREE.MeshNormalMaterial({
side: THREE.BackSide
});
var mesh = new THREE.Mesh( geometry, material );
group.add( mesh );
// add the torus knot
var geometry = new THREE.TorusKnotGeometry(0.25,0.1,32,32);
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh( geometry, material );
group.add( mesh );
onRenderFcts.push(function(){
mesh.rotation.x += 0.1
})
}
function buildCircleCache(){
var geometry = new THREE.RingGeometry( 0.5, 5, 32 );
var material = buildTransparentMaterial()
var mesh = new THREE.Mesh( geometry, material);
return mesh
}
function buildTransparentMaterial(){
var material = new THREE.MeshBasicMaterial({
colorWrite: false // only write to z-buf
})
// an alternative to reach the same visual - this one seems way slower tho. My guess is it is hitting a slow-path in gpu
// var material = new THREE.MeshBasicMaterial();
// material.color.set('black')
// material.opacity = 0;
// material.blending = THREE.NoBlending;
return material
}
//////////////////////////////////////////////////////////////////////////////////
// build videoTexture
//////////////////////////////////////////////////////////////////////////////////
......
three.js/examples/multi-markers/TODO.md
浏览文件 @ 2dd3c457
- every time you add a new object
- make a list of all the objects in the scene in a <li> element
- on top left
- easy element of this list an idea aka demoScene.id
- each created demoSCene is set in array demoScene.id
- click on <li> is about setting the demoScene variable - rename it selectedDemoScene
- each click on li change selectedDemoScene
- add a button to delete element
- write a basic.html
- fix the hiro case
---
- make a simple multi marker with a hardcoded cube
- make a player more useful
- pick to create object on the ground plane
- drag to rotate on y
- scale with pinch in/out
- demo.html
- put all that in chromium webar
- create repo with those demo in webar/ar.js webar/chromiumAR
- make your demo scene in there
- CLEAN UP STUFF
- NOGO in player, load the hardcoded from a file
- clean up the code and demo the case
......
three.js/examples/multi-markers/examples/player.html
浏览文件 @ 2dd3c457
......@@ -3,6 +3,8 @@
<!-- three.js library -->
<script src='../../vendor/three.js/build/three.js'></script>
<script src='../../vendor/three.js/examples/js/libs/stats.min.js'></script>
<script src='../../vendor/hammer.min.js'></script>
<script src='../../vendor/hammer-time.min.js'></script>
<!-- jsartookit -->
<script src='../../../vendor/jsartoolkit5/build/artoolkit.min.js'></script>
<script src='../../../vendor/jsartoolkit5/js/artoolkit.api.js'></script>
......@@ -52,8 +54,7 @@
Area source:
<a href='javascript:void(0)' onclick='urlOptions.areaSource = "localStorage"; reload()'>localStorage</a>
/
<a href='javascript:void(0)' onclick='urlOptions.areaSource = "hardcoded"; reload()'>hardcoded</a>
(<a href='../../../../data/images/multi-pattern-template-abcdgf.png' target='_blank'>image</a>)
<a href='javascript:void(0)' onclick='urlOptions.areaSource = "onlyHiro"; reload()'>onlyHiro</a>
<br>
Marker helpers:
<a href='javascript:void(0)' onclick='urlOptions.markerHelpers = true; reload()'>yes</a>
......@@ -65,6 +66,27 @@
<img src="images/record-start.png" width='64px' height='64px'>
</a>
</div>
<div id='objectList' style='position: fixed; top: 16px; right: 16px; z-index:1';>
<ul>
</ul>
<style>
#objectList ul {
list-style: none;
font-size: 15px;
}
#objectList ul li {
cursor: pointer;
padding: 5px;
border-radius: 10px;
}
#objectList ul li.selected {
background: lightgray;
}
#objectList ul li:hover {
background: gray;
}
</style>
</div>
<script>
// ;(function(){
//////////////////////////////////////////////////////////////////////////////////
......@@ -213,16 +235,30 @@
}
if( urlOptions.areaSource === 'localStorage' && localStorage.getItem('ARjsMultiMarkerFile') === null ){
alert('No area has been learned on this device!\n Forwarding you to the learning application.')
location.href = document.querySelector('#recordButton').href
alert('No area has been learned on this device!\n Using only hiro.')
urlOptions.areaSource === 'onlyHiro'
urlOptionsUpdate()
}
//////////////////////////////////////////////////////////////////////////////
// get multiMarkerFile
//////////////////////////////////////////////////////////////////////////////
if( urlOptions.areaSource === 'localStorage' ){
console.assert( localStorage.getItem('ARjsMultiMarkerFile') !== null )
multiMarkerFile = localStorage.getItem('ARjsMultiMarkerFile')
}else if( urlOptions.areaSource === 'hardcoded' ){
console.assert(false)
multiMarkerFile = buildMarkerPlayHarcoded()
var multiMarkerFile = localStorage.getItem('ARjsMultiMarkerFile')
}else if( urlOptions.areaSource === 'onlyHiro' ){
var multiMarkerFile = JSON.stringify({
subMarkersControls : [
{
parameters: {
type : 'pattern',
patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro',
},
poseMatrix: new THREE.Matrix4().makeTranslation(0,0, 0).toArray()
},
]
})
}else{
console.assert('unknown areaSource', areaSource)
}
......@@ -249,7 +285,13 @@
// build a smoothedControls
var smoothedRoot = new THREE.Group()
scene.add(smoothedRoot)
var smoothedControls = new THREEx.ArSmoothedControls(smoothedRoot)
var smoothedControls = new THREEx.ArSmoothedControls(smoothedRoot, {
lerpPosition: 0.3,
lerpQuaternion: 0.5,
lerpScale: 0.5,
minVisibleDelay: 0.3,
minUnvisibleDelay: 0.2,
})
onRenderFcts.push(function(delta){
smoothedControls.update(markerRoot)
})
......@@ -264,34 +306,147 @@
demoScenes.update(delta)
})
var demoObject3d = new THREE.Group
smoothedRoot.add(demoObject3d)
var averageMatrix = THREEx.ArMultiMarkerControls.computeCenter(multiMarkerFile)
averageMatrix.decompose(demoObject3d.position, demoObject3d.quaternion, demoObject3d.scale)
demoObject3d.scale.multiplyScalar(3)
// create the selectedMarkerScene based on sceneName
var markerScenes = []
var selectedMarkerScene = null
// create the markerScene based on sceneName
var markerScene = null
switchDemoScene(urlOptions.sceneName)
// function to dynamically switch demoScenes
window.switchDemoScene = switchDemoScene
function switchDemoScene(newSceneName){
// remove previous markerScene if suiltabled
if( markerScene ){
markerScene.parent.remove( markerScene )
demoScenes.dispose()
markerScene = null
// remove previous selectedMarkerScene if suiltabled
if( selectedMarkerScene ){
// selectedMarkerScene.parent.remove( selectedMarkerScene )
// demoScenes.dispose()
// selectedMarkerScene = null
}
// create the new markerScene
markerScene = demoScenes.createMarkerScene(newSceneName)
demoObject3d.add( markerScene )
var demoRoot = new THREE.Group
var averageMatrix = THREEx.ArMultiMarkerControls.computeCenter(multiMarkerFile)
averageMatrix.decompose(demoRoot.position, demoRoot.quaternion, demoRoot.scale)
smoothedRoot.add(demoRoot)
// create the new selectedMarkerScene
var markerScene = demoScenes.createMarkerScene(newSceneName)
demoRoot.add( markerScene )
markerScenes[markerScene.id] = markerScene
// update the UI
var domElement = document.createElement('li')
document.querySelector('#objectList ul').appendChild(domElement)
domElement.classList.add('selected')
domElement.innerHTML = newSceneName
domElement.dataset.markerSceneId = markerScene.id
// update urlOptions.sceneName
urlOptions.sceneName = newSceneName
urlOptionsUpdate()
selectScene(markerScene)
domElement.addEventListener('click', function(){
var object3dId = domElement.dataset.markerSceneId
var markerScene = markerScenes[object3dId];
selectScene(markerScene)
})
return
function selectScene(markerScene){
// debugger
selectedMarkerScene = markerScene
;[].slice.call(document.querySelectorAll('#objectList ul li.selected')).forEach(function(domElement){
// debugger
domElement.classList.remove('selected')
})
domElement.classList.add('selected')
}
window.switchDemoScene = switchDemoScene
}
//////////////////////////////////////////////////////////////////////////////
// Code Separator
//////////////////////////////////////////////////////////////////////////////
var hammertime = new Hammer(renderer.domElement);
// var hammertime = new Hammer(document.body);
hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });
hammertime.on('pan', function(event) {
if( event.additionalEvent !== 'panright' && event.additionalEvent !== 'panleft' ) return
var delta = event.velocityX / window.innerWidth * 60
var demoRoot = selectedMarkerScene.parent
demoRoot.rotation.y += delta
});
hammertime.on('pan', function(event) {
if( event.additionalEvent !== 'panup' && event.additionalEvent !== 'pandown' ) return
var delta = -event.velocityY/window.innerHeight * 60
delta = THREE.Math.clamp(delta, -0.2, 0.2)
var demoRoot = selectedMarkerScene.parent
var scale = demoRoot.scale.x * (1 + delta)
scale = THREE.Math.clamp(scale, 0.2, 10)
demoRoot.scale.set(scale, scale, scale)
});
//////////////////////////////////////////////////////////////////////////////
// Picking on ground
//////////////////////////////////////////////////////////////////////////////
var raycaster = new THREE.Raycaster();
var mouseCoordinate = new THREE.Vector2()
document.addEventListener( 'mousemove', function onDocumentMouseMove( event ) {
event.preventDefault();
mouseCoordinate.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouseCoordinate.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}, false );
// Create a three.js camera.
var cameraPicking = new THREE.PerspectiveCamera(42, window.innerWidth / window.innerHeight, 0.1, 100);
scene.add(cameraPicking);
// handle resize
window.addEventListener('resize', function(){
cameraPicking.aspect = window.innerWidth / window.innerHeight;
cameraPicking.updateProjectionMatrix();
})
var geometry = new THREE.PlaneGeometry(20,20).rotateX(-Math.PI/2)
var material = new THREE.MeshBasicMaterial({
// opacity: 0.5,
// transparent: true,
})
material.visible = false
var pickingPlane = new THREE.Mesh(geometry, material)
selectedMarkerScene.parent.add(pickingPlane)
// keep pickingPlane the same size even if parent is changing scale
onRenderFcts.push(function(delta){
pickingPlane.scale.set(1,1,1).multiplyScalar(1 / pickingPlane.parent.scale.x)
})
hammertime.on('tap', function(event) {
// compute intersections between mouseCoordinate and pickingPlane
raycaster.setFromCamera( mouseCoordinate, cameraPicking );
var intersects = raycaster.intersectObjects( [pickingPlane] )
// if no intersection occurs, return now
if( intersects.length === 0 ) return
// set new demoRoot position
var demoRoot = selectedMarkerScene.parent
var newPosition = demoRoot.parent.worldToLocal( intersects[0].point.clone() )
demoRoot.position.copy(newPosition)
})
//////////////////////////////////////////////////////////////////////////////////
// render the whole thing on the page
......@@ -301,6 +456,8 @@
// render the scene
onRenderFcts.push(function(){
renderer.render( scene, camera );
// scene.updateMatrixWorld(true)
// renderer.render( scenePicking, cameraPicking );
stats.update();
})
......@@ -318,48 +475,5 @@
onRenderFct(deltaMsec/1000, nowMsec/1000)
})
})
//////////////////////////////////////////////////////////////////////////////
// Code Separator
//////////////////////////////////////////////////////////////////////////////
function buildMarkerPlayHarcoded(){
var interMarkerWidth = 2.61
var multiMarkerFile = {
subMarkersControls : [
{
parameters: {
type : 'pattern',
patternUrl : THREEx.ArToolkitContext.baseURL + '../data/multimarkers/multi-abcdef/patt.a',
},
poseMatrix: new THREE.Matrix4().makeTranslation(0,0, 0).toArray()
},
{
parameters: {
type : 'pattern',
patternUrl : THREEx.ArToolkitContext.baseURL + '../data/multimarkers/multi-abcdef/patt.b',
},
poseMatrix: new THREE.Matrix4().makeTranslation(interMarkerWidth,0, 0).toArray()
},
{
parameters: {
type : 'pattern',
patternUrl : THREEx.ArToolkitContext.baseURL + '../data/multimarkers/multi-abcdef/patt.c',
},
poseMatrix: new THREE.Matrix4().makeTranslation(interMarkerWidth*2, 0, 0).toArray()
},
// {
// parameters: {
// type : 'pattern',
// patternUrl : THREEx.ArToolkitContext.baseURL + '../data/multimarkers/multi-abcdef/patt.f',
// },
// poseMatrix: new THREE.Matrix4().makeTranslation(interMarkerWidth*2, 0, interMarkerWidth).toArray()
// },
]
}
return multiMarkerFile
}
// })()
</script></body>
three.js/examples/vendor/hammer-time.min.js 0 → 100644
浏览文件 @ 2dd3c457
!function(){var a=window.MutationObserver||window.WebKitMutationObserver,b="ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch,c=void 0!==document.documentElement.style["touch-action"]||document.documentElement.style["-ms-touch-action"];if(!c&&b&&a){window.Hammer=window.Hammer||{};var d=/touch-action[:][\s]*(none)[^;'"]*/,e=/touch-action[:][\s]*(manipulation)[^;'"]*/,f=/touch-action/,g=navigator.userAgent.match(/(iPad|iPhone|iPod)/g)?!0:!1,h=function(){try{var a=document.createElement("canvas");return!(!window.WebGLRenderingContext||!a.getContext("webgl")&&!a.getContext("experimental-webgl"))}catch(b){return!1}}(),i=h&&g;window.Hammer.time={getTouchAction:function(a){return this.checkStyleString(a.getAttribute("style"))},checkStyleString:function(a){return f.test(a)?d.test(a)?"none":e.test(a)?"manipulation":!0:void 0},shouldHammer:function(a){var b=this.hasParent(a.target);return b&&(!i||Date.now()-a.target.lastStart<125)?b:!1},touchHandler:function(a){var b=a.target.getBoundingClientRect(),c=b.top!==this.pos.top||b.left!==this.pos.left,d=this.shouldHammer(a);("none"===d||c===!1&&"manipulation"===d)&&("touchend"===a.type&&(a.target.focus(),setTimeout(function(){a.target.click()},0)),a.preventDefault()),this.scrolled=!1,delete a.target.lastStart},touchStart:function(a){this.pos=a.target.getBoundingClientRect(),i&&this.hasParent(a.target)&&(a.target.lastStart=Date.now())},styleWatcher:function(a){a.forEach(this.styleUpdater,this)},styleUpdater:function(a){if(a.target.updateNext)return void(a.target.updateNext=!1);var b=this.getTouchAction(a.target);return b?void("none"!==b&&(a.target.hadTouchNone=!1)):void(!b&&(a.oldValue&&this.checkStyleString(a.oldValue)||a.target.hadTouchNone)&&(a.target.hadTouchNone=!0,a.target.updateNext=!1,a.target.setAttribute("style",a.target.getAttribute("style")+" touch-action: none;")))},hasParent:function(a){for(var b,c=a;c&&c.parentNode;c=c.parentNode)if(b=this.getTouchAction(c))return b;return!1},installStartEvents:function(){document.addEventListener("touchstart",this.touchStart.bind(this)),document.addEventListener("mousedown",this.touchStart.bind(this))},installEndEvents:function(){document.addEventListener("touchend",this.touchHandler.bind(this),!0),document.addEventListener("mouseup",this.touchHandler.bind(this),!0)},installObserver:function(){this.observer=new a(this.styleWatcher.bind(this)).observe(document,{subtree:!0,attributes:!0,attributeOldValue:!0,attributeFilter:["style"]})},install:function(){this.installEndEvents(),this.installStartEvents(),this.installObserver()}},window.Hammer.time.install()}}();
\ No newline at end of file
three.js/examples/vendor/hammer.min.js 0 → 100644
浏览文件 @ 2dd3c457
此差异已折叠。
three.js/threex-arsmoothedcontrols.js
浏览文件 @ 2dd3c457
......@@ -23,11 +23,11 @@ THREEx.ArSmoothedControls = function(object3d, parameters){
parameters = parameters || {}
this.parameters = {
// lerp coeficient for the position - between [0,1] - default to 1
lerpPosition: parameters.lerpPosition !== undefined ? parameters.lerpPosition : 0.8,
lerpPosition: parameters.lerpPosition !== undefined ? parameters.lerpPosition : 0.7,
// lerp coeficient for the quaternion - between [0,1] - default to 1
lerpQuaternion: parameters.lerpQuaternion !== undefined ? parameters.lerpQuaternion : 0.8,
lerpQuaternion: parameters.lerpQuaternion !== undefined ? parameters.lerpQuaternion : 0.7,
// lerp coeficient for the scale - between [0,1] - default to 1
lerpScale: parameters.lerpScale !== undefined ? parameters.lerpScale : 0.8,
lerpScale: parameters.lerpScale !== undefined ? parameters.lerpScale : 0.7,
// delay for lerp fixed steps - in seconds - default to 1/120
lerpStepDelay: parameters.fixStepDelay !== undefined ? parameters.fixStepDelay : 1/60,
// minimum delay the sub-control must be visible before this controls become visible - default to 0 seconds
......
three.js/threex-arvideoinwebgl.js
浏览文件 @ 2dd3c457
......@@ -38,7 +38,7 @@ THREEx.ArVideoInWebgl = function(videoTexture){
// extract the fov from the projectionMatrix
var fov = THREE.Math.radToDeg(Math.atan(1/camera.projectionMatrix.elements[5]))*2;
// console.log('fov', fov)
var elementWidth = parseFloat( arToolkitSource.domElement.style.width.replace(/px$/,''), 10 )
var elementHeight = parseFloat( arToolkitSource.domElement.style.height.replace(/px$/,''), 10 )
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或