diff --git a/babylon.js/README.md b/babylon.js/README.md index be5cd5fabc972071e36bfb37bd7dc0506e8f25ce..fa32f92e4a8f1f66c875bed0b7ef9441a3790637 100644 --- a/babylon.js/README.md +++ b/babylon.js/README.md @@ -1,3 +1,5 @@ +Example of AR.js on babylon.js + # ARBJS Proof of Concept connecting Augmented Reality to Babylon.js for first time with AR.js diff --git a/babylon.js/TODO.md b/babylon.js/TODO.md new file mode 100644 index 0000000000000000000000000000000000000000..cb1373bd234ea63adcc58373aed940845c1ebc15 --- /dev/null +++ b/babylon.js/TODO.md @@ -0,0 +1,7 @@ +# Remaining issue + +- babylon.js object shacky + +- perspective camera to set + +- resize to handle diff --git a/babylon.js/examples/manual.html b/babylon.js/examples/manual.html index 6f1a73b2a2078d03a1a20591dd2c84b059fb8472..e10c392abe97be2d6298a5c96fcedced53fc9df2 100644 --- a/babylon.js/examples/manual.html +++ b/babylon.js/examples/manual.html @@ -19,6 +19,7 @@ window.addEventListener('DOMContentLoaded', function(){ canvasElement.style.width = '100%' canvasElement.style.height = '100%' canvasElement.style.position = 'absolute' + canvasElement.style.zIndex = -1 document.body.appendChild(canvasElement) var engine = new BABYLON.Engine(canvasElement, true); @@ -58,6 +59,7 @@ window.addEventListener('DOMContentLoaded', function(){ material.diffuseTexture = new BABYLON.Texture("images/UV_Grid_Sm.jpg", scene); var mesh = BABYLON.Mesh.CreateSphere("mesh", 12, 1, scene); + // mesh.position.y = 60; mesh.material = material; mesh.position = new BABYLON.Vector3(0,0, 0) @@ -94,16 +96,25 @@ window.addEventListener('DOMContentLoaded', function(){ 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.Mesh.CreatePlane("mesh", 2, scene); + + var mesh = BABYLON.MeshBuilder.CreatePlane("plane1", { + size: 2, + sideOrientation: BABYLON.Mesh.DOUBLESIDE + }, scene); + mesh.material = material; mesh.position = new BABYLON.Vector3(0,0, 0) + mesh.rotation.y = Math.PI } /*********************************CREATE-SCENE******************************/ var createScene = function(){ scene = new BABYLON.Scene(engine); + scene.useRightHandedSystem = true createLights(); createCamera(); @@ -138,19 +149,16 @@ window.addEventListener('DOMContentLoaded', function(){ var cameraBabylon = arcRotateCamera; - // cameraBabylon.setPosition(new BABYLON.Vector3(0, 0, -4)); - // cameraBabylon.setPosition(new BABYLON.Vector3(-threejsPosition.x, 0, -4)); - cameraBabylon.setPosition(new BABYLON.Vector3(-threejsPosition.x, -threejsPosition.y, -threejsPosition.z)); - cameraBabylon.position.x = -threejsPosition.x + + cameraBabylon.position.x = threejsPosition.x cameraBabylon.position.y = threejsPosition.y - cameraBabylon.position.z = -threejsPosition.z - // , -threejsPosition.y, -threejsPosition.z)); - // cameraBabylon.setTarget(BABYLON.Vector3.Zero()); + cameraBabylon.position.z = threejsPosition.z + cameraBabylon.setTarget(new BABYLON.Vector3( - threejsTarget.x, - 0, - 0 - )); + threejsTarget.x, + threejsTarget.y, + threejsTarget.z + )) // cameraBabylon.target.x = -threejsTarget.x // cameraBabylon.target.y = 0 // cameraBabylon.target.z = 0