Skip to content

A
AR.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
A
AR.js

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

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

more on babylon-ar.js

上级 efe38ac4
隐藏空白更改
内联 并排
Showing with 131 addition and 165 deletion
babylon.js/TODO.md
浏览文件 @ 4a5d54b7
- port it to ar-session.js
- put the gatefunctions in a babylon-ar.js
- babylon forum - http://www.html5gamedevs.com/topic/31654-babylonaugmented-reality-in-arjs/?tab=comments&_fromLogin=1
# Remaining issue
- babylon.js object very shacky - while three.js super stable - reason unkonwn
- camera projection matrix to set
- resize to handle
- DONE babylon.js object very shacky - while three.js super stable - reason unkonwn
- DONE put the gatefunctions in a babylon-ar.js
- DONE port it to new api ar-session.js
babylon.js/examples/manual.html → babylon.js/examples/dev.html
浏览文件 @ 4a5d54b7
......@@ -23,25 +23,16 @@ window.addEventListener('DOMContentLoaded', function(){
canvasElement.style.position = 'absolute'
canvasElement.style.zIndex = -1
document.body.appendChild(canvasElement)
var engine = new BABYLON.Engine(canvasElement, true);
var engine = new BABYLON.Engine(canvasElement, true)
var babylonCamera;
/*********************************CREATE-LIGHTS******************************/
var createLights = function() {
var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,10,0), scene);
light.intensity = 0.4;
var light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(-1, -2, -1), scene);
light.position = new BABYLON.Vector3(20, 39, 20);
light.intensity = 0.5;
}
/******************************CREATE-MOON*****************************/
var createMoon = function(){
var material = new BABYLON.StandardMaterial("proutMaterial", scene);
material.diffuseTexture = new BABYLON.Texture("images/UV_Grid_Sm.jpg", scene);
var material = new BABYLON.StandardMaterial("proutMaterial", scene)
material.diffuseTexture = new BABYLON.Texture("images/UV_Grid_Sm.jpg", scene)
var mesh = BABYLON.Mesh.CreateSphere("mesh", 12, 1, scene);
var mesh = BABYLON.Mesh.CreateSphere("mesh", 12, 1, scene)
// mesh.position.y = 60;
mesh.material = material;
......@@ -49,81 +40,78 @@ window.addEventListener('DOMContentLoaded', function(){
}
var displayMeshAxis = function (mesh) {
mesh.computeWorldMatrix();
var matrix = mesh.getWorldMatrix();
mesh.computeWorldMatrix()
var matrix = mesh.getWorldMatrix()
var origin = mesh.position;
// find existing axis for this box and dispose
var xAxis = scene.getMeshByName("xAxis"+mesh.name);
var yAxis = scene.getMeshByName("yAxis"+mesh.name);
var zAxis = scene.getMeshByName("zAxis"+mesh.name);
if (xAxis!=null){ xAxis.dispose();}
if (yAxis!=null){ yAxis.dispose();}
if (zAxis!=null){ zAxis.dispose();}
var xAxis = scene.getMeshByName("xAxis"+mesh.name)
var yAxis = scene.getMeshByName("yAxis"+mesh.name)
var zAxis = scene.getMeshByName("zAxis"+mesh.name)
if (xAxis!=null){ xAxis.dispose()}
if (yAxis!=null){ yAxis.dispose()}
if (zAxis!=null){ zAxis.dispose()}
// calculate new normals for this mesh in world coordinate system
var xNormal=BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(100,0,0),matrix);
var yNormal=BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(0,100,0),matrix);
var zNormal=BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(0,0,100),matrix);
var xNormal=BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(100,0,0),matrix)
var yNormal=BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(0,100,0),matrix)
var zNormal=BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(0,0,100),matrix)
// create axis lines
xAxis = BABYLON.Mesh.CreateDashedLines("xAxis"+mesh.name, [origin, xNormal],3,10,200, scene, false);
xAxis.color = BABYLON.Color3.Red();
yAxis = BABYLON.Mesh.CreateDashedLines("yAxis"+mesh.name, [origin, yNormal],3,10,200, scene, false);
yAxis.color = BABYLON.Color3.Green();
zAxis = BABYLON.Mesh.CreateDashedLines("zAxis"+mesh.name, [origin, zNormal],3,10,200, scene, false);
zAxis.color = BABYLON.Color3.Blue();
xAxis = BABYLON.Mesh.CreateDashedLines("xAxis"+mesh.name, [origin, xNormal],3,10,200, scene, false)
xAxis.color = BABYLON.Color3.Red()
yAxis = BABYLON.Mesh.CreateDashedLines("yAxis"+mesh.name, [origin, yNormal],3,10,200, scene, false)
yAxis.color = BABYLON.Color3.Green()
zAxis = BABYLON.Mesh.CreateDashedLines("zAxis"+mesh.name, [origin, zNormal],3,10,200, scene, false)
zAxis.color = BABYLON.Color3.Blue()
}
/****************************CREATE-SYMPHONY*******************************/
var createImagePlane = function(){
var material = new BABYLON.StandardMaterial("texturePlane", scene);
material.twoSidedLighting = true
material.diffuseTexture = new BABYLON.Texture("images/UV_Grid_Sm.jpg", scene);
material.specularColor = new BABYLON.Color3(1, 1, 1);
// material.backFaceCulling = true;
// var mesh = BABYLON.Mesh.CreatePlane("mesh", 2, scene);
var mesh = BABYLON.MeshBuilder.CreatePlane("plane1", {
size: 2,
sideOrientation: BABYLON.Mesh.DOUBLESIDE
}, scene);
mesh.material = material;
}, scene)
mesh.position = new BABYLON.Vector3(0,0, 0)
mesh.rotation.y = Math.PI
var material = new BABYLON.StandardMaterial("texturePlane", scene)
material.twoSidedLighting = true
material.diffuseTexture = new BABYLON.Texture("images/UV_Grid_Sm.jpg", scene)
material.specularColor = new BABYLON.Color3(1, 1, 1)
mesh.material = material
}
/******************************Initialization******************************/
var scene = new BABYLON.Scene(engine);
var scene = new BABYLON.Scene(engine)
scene.useRightHandedSystem = true
scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
scene.clearColor = new BABYLON.Color4(0, 0, 0, 0)
var babylonCamera = ARjs.Babylon.createCamera(scene)
var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,10,0), scene);
light.intensity = 0.4;
var light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(-1, -2, -1), scene);
light.position = new BABYLON.Vector3(20, 39, 20);
light.intensity = 0.5;
// add ligts
var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,10,0), scene)
light.intensity = 0.4
var light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(-1, -2, -1), scene)
light.position = new BABYLON.Vector3(20, 39, 20)
light.intensity = 0.5
createMoon();
createImagePlane();
createMoon()
createImagePlane()
engine.runRenderLoop(function(){
ARjs.Babylon.setObject3D(babylonCamera, markerControls.object3d)
ARjs.Babylon.updateObjectPose(babylonCamera, camera)
scene.render();
});
scene.render()
})
window.addEventListener('resize', function(){
engine.resize();
});
});
engine.resize()
})
})
</script>
<script>
// ;(function(){
//
// })()
//////////////////////////////////////////////////////////////////////////////////
// Init
//////////////////////////////////////////////////////////////////////////////////
......@@ -132,127 +120,92 @@ window.addEventListener('DOMContentLoaded', function(){
var renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
})
renderer.setClearColor(new THREE.Color('lightgrey'), 0)
renderer.setSize( 640, 480 );
renderer.setSize( 640, 480 )
renderer.domElement.style.position = 'absolute'
renderer.domElement.style.top = '0px'
renderer.domElement.style.left = '0px'
document.body.appendChild( renderer.domElement );
// array of functions for the rendering loop
var onRenderFcts= [];
// init scene and camera
var scene = new THREE.Scene();
var scene = new THREE.Scene()
var trackingMethod = 'area-artoolkit'
//////////////////////////////////////////////////////////////////////////////////
// Initialize a basic camera
// Initialize the camera
//////////////////////////////////////////////////////////////////////////////////
// Create a camera
var camera = new THREE.Camera();
scene.add(camera);
console.log('STEP: creating new bjsCamera')
// var bjscamera = new BABYLON.Camera("bcam",new BABYLON.Vector3(0,0,0),bscene); //https://doc.babylonjs.com/classes/2.5/camera
////////////////////////////////////////////////////////////////////////////////
// handle arToolkitSource
////////////////////////////////////////////////////////////////////////////////
var arToolkitSource = new THREEx.ArToolkitSource({
// to read from the webcam
sourceType : 'webcam',
})
var camera = ARjs.Utils.createDefaultCamera(trackingMethod)
scene.add(camera)
arToolkitSource.init(function onReady(){
onResize()
})
// handle resize
window.addEventListener('resize', function(){
onResize()
})
function onResize(){
arToolkitSource.onResize()
arToolkitSource.copySizeTo(renderer.domElement)
if( arToolkitContext.arController !== null ){
arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)
}
}
////////////////////////////////////////////////////////////////////////////////
// initialize arToolkitContext
// Set up Arjs.Profile
////////////////////////////////////////////////////////////////////////////////
// create atToolkitContext
var arToolkitContext = new THREEx.ArToolkitContext({
// cameraParametersUrl: '../data/camera_para.dat',
// cameraParametersUrl: THREEx.ArToolkitContext.baseURL +'../data/camera_para.dat',
cameraParametersUrl: THREEx.ArToolkitContext.baseURL + '../data/data/camera_para.dat',
detectionMode: 'mono',
})
// initialize it
arToolkitContext.init(function onCompleted(){ //ARCameraParam loaded file and created ARController, calls back through a chain to here.
// copy projection matrix to camera!! projection Matrix is...camera_mat?
camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
// bjscamera._projectionMatrix = arToolkitContext.getProjectionMatrix() ;
// console.log('STEP: ProjectionMatrix put into Camera.')
})
var arProfile = new ARjs.Profile()
.sourceWebcam()
.trackingMethod(trackingMethod)
// .changeMatrixMode('modelViewMatrix')
.changeMatrixMode('cameraTransformMatrix')
.defaultMarker()
.checkIfValid()
// update artoolkit on every frame
onRenderFcts.push(function(){ //RUNTIME-LOOP...
if( arToolkitSource.ready === false ) return
arToolkitContext.update( arToolkitSource.domElement ) //passes in the video component
// update scene.visible if the marker is seen
scene.visible = true //SHOW 3D ALWAYS....
// scene.visible = camera.visible
if( arProfile.contextParameters.trackingBackend === 'tango' ){
arProfile.changeMatrixMode('cameraTransformMatrix')
}
//////////////////////////////////////////////////////////////////////////////
// build ARjs.Session
//////////////////////////////////////////////////////////////////////////////
var arSession = new ARjs.Session({
scene: scene,
renderer: renderer,
camera: camera,
sourceParameters: arProfile.sourceParameters,
contextParameters: arProfile.contextParameters
})
onRenderFcts.push(function(){
arSession.update()
})
////////////////////////////////////////////////////////////////////////////////
// Create a ArMarkerControls
// Create a ARjs.Anchor
////////////////////////////////////////////////////////////////////////////////
console.log('STEP: possibly swap out camera early.')
// init controls for camera
var markerControls = new THREEx.ArMarkerControls(arToolkitContext, camera, {
type : 'pattern',
patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro',
// as we controls the camera, set changeMatrixMode: 'cameraTransformMatrix'
changeMatrixMode: 'cameraTransformMatrix'
var arAnchor = new ARjs.Anchor(arSession, arProfile.defaultMarkerParameters)
onRenderFcts.push(function(){
arAnchor.update()
})
// as we do changeMatrixMode: 'cameraTransformMatrix', start with invisible scene
scene.visible = true
// scene.visible = false
//
//
// markerControls.addEventListener('markerFound', function(){
// var markerObject3D = markerControls.object3d
// var modelViewMatrix = markerObject3D.matrix
//
// // cameraBabylon._computedViewMatrix = new BABYLON.Matrix.FromArray(modelViewMatrix.toArray());
// cameraBabylon._computedViewMatrix.m.set(modelViewMatrix.toArray());
// })
//////////////////////////////////////////////////////////////////////////////////
// add an object in the scene
//////////////////////////////////////////////////////////////////////////////////
var arWorldRoot = arAnchor.object3d
// add a torus knot
var geometry = new THREE.CubeGeometry(1,1,1);
var geometry = new THREE.CubeGeometry(1,1,1)
var material = new THREE.MeshNormalMaterial({
transparent : true,
opacity: 0.5,
side: THREE.DoubleSide
});
var mesh = new THREE.Mesh( geometry, material );
})
var mesh = new THREE.Mesh( geometry, material )
// mesh.position.y = geometry.parameters.height/2
scene.add( mesh );
arWorldRoot.add( mesh )
var geometry = new THREE.TorusKnotGeometry(0.3,0.1,64,16);
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh( geometry, material );
var geometry = new THREE.TorusKnotGeometry(0.3,0.1,64,16)
var material = new THREE.MeshNormalMaterial()
var mesh = new THREE.Mesh( geometry, material )
// mesh.position.y = 0.5
// scene.add( mesh );
// arWorldRoot.add( mesh )
onRenderFcts.push(function(delta){
mesh.rotation.x += Math.PI*delta
......@@ -264,14 +217,22 @@ window.addEventListener('DOMContentLoaded', function(){
// render the scene
onRenderFcts.push(function(){
renderer.render( scene, camera );
// update all matrixWorld
scene.updateMatrixWorld()
})
if( true ){
document.body.appendChild( renderer.domElement )
onRenderFcts.push(function(){
renderer.render( scene, camera )
})
}
// run the rendering loop
var lastTimeMsec= null
requestAnimationFrame(function animate(nowMsec){
// keep looping
requestAnimationFrame( animate );
requestAnimationFrame( animate )
// measure time
lastTimeMsec = lastTimeMsec || nowMsec-1000/60
var deltaMsec = Math.min(200, nowMsec - lastTimeMsec)
......
babylon.js/src/babylon-ar.js
浏览文件 @ 4a5d54b7
......@@ -4,17 +4,21 @@ var ARjs = ARjs || {}
ARjs.Babylon = function(){}
ARjs.Babylon.createCamera = function(scene){
var babylonCamera = new BABYLON.ArcRotateCamera("GlobalRotativeCamera1", 0, 0, 0, new BABYLON.Vector3(0, 0, -1), scene);
// arcRotateCamera.setPosition(new BABYLON.Vector3(0, 50, 80));
// arcRotateCamera.setTarget(BABYLON.Vector3.Zero());
// arcRotateCamera.attachControl(canvas, true);
// debugger
scene.activeCamera.fovmode = BABYLON.Camera.fovmode_HORIZONTAL_FIXED;
scene.activeCamera.fov = 2*22 / 180*Math.PI
var babylonCamera = new BABYLON.ArcRotateCamera("GlobalRotativeCamera1", 0, 0, 0, new BABYLON.Vector3(0, 0, -1), scene);
// arcRotateCamera.setPosition(new BABYLON.Vector3(0, 50, 80));
// arcRotateCamera.setTarget(BABYLON.Vector3.Zero());
// arcRotateCamera.attachControl(canvas, true);
scene.activeCamera.fovmode = BABYLON.Camera.fovmode_HORIZONTAL_FIXED;
scene.activeCamera.fov = 2*22 / 180*Math.PI
return babylonCamera
}
ARjs.Babylon.setObject3D = function(babylonObject3D, threeObject3D){
ARjs.Babylon.updateCamera = function(babylonCamera, threeCamera){
}
ARjs.Babylon.updateObjectPose = function(babylonObject3D, threeObject3D){
var modelViewMatrix = threeObject3D.matrix
threeObject3D.updateMatrixWorld()
......
three.js/build/ar.js
浏览文件 @ 4a5d54b7
......@@ -7367,11 +7367,11 @@ ARjs.MarkersAreaControls.prototype.updateSmoothedControls = function(smoothedCon
// {lerpPosition: 0.5, lerpQuaternion: 0.2, lerpQuaternion: 0.7}
// ]
lerpsValues = [
[0.1, 0.1, 0.3],
[0.2, 0.1, 0.4],
[0.2, 0.2, 0.5],
[0.3, 0.2, 0.7],
[0.3, 0.2, 0.7],
[0.3+.1, 0.1, 0.3],
[0.4+.1, 0.1, 0.4],
[0.4+.1, 0.2, 0.5],
[0.5+.1, 0.2, 0.7],
[0.5+.1, 0.2, 0.7],
]
}
// count how many subMarkersControls are visible
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或