Zimbofly

hehe - jahow, you rock!!! thank you. I didn't realize I had to enable transparency - even if the image had transparency already! works great! Cheers....

Hi all, hope you had a great start to the new year! I'm trying to place a logo (with transparent background) onto my glass window as a kind of watermark. BUT - the transparent background is turning black!!!! any idea what I'm doing wrong? //logo glass watermarks var water = new BABYLON.Mesh.CreatePlane("water", 0.1, scene); water.material = new BABYLON.StandardMaterial("", scene); water.material.diffuseTexture = new BABYLON.Texture("./GalleryAssets/Artwork/PerformLogo1.png", scene); water.material.backFaceCulling = true; //water.material.emissiveColor = new BABYLON.Color3(0.7, 0.7, 0.7); water.position = new BABYLON.Vector3(-6.9, 6.8, 4.3); water.scaling = new BABYLON.Vector3(2.7, 1, 0.05); water.rotation.y = Math.PI * 3 / 2; ta for any input!

for sure - that game is very addictictive, Temechon - awesome job!

ahhh - Ok DeltaKosh... I will update when I get mr manual working! thanks...

I'm learning lots about Babylon with my little project to make yellow stickies on the wall of my 3D room.... so far I can display the stickies fine and edit the text by double clicking on a sticky and typing in text. On hitting submit button - saves fine to the database... BUT - how to refresh the text in the yellow sticky after popup closes? var CreateSticky = function (pos, farWall, stkyContent, stkyID) { var sign = pos.x ? pos.x < 0 ? -1 : 1 : 0 //if (width && height) { // ratio = width / height; //} //use this to resize sticky var sticky = new BABYLON.Mesh.CreateBox("sticky", 0.5, scene); if (farWall) { sticky.rotation.x = sign * (Math.PI); sticky.scaling = new BABYLON.Vector3(1, 1, 0.01); } else { sticky.scaling = new BABYLON.Vector3(0.01, 1, 1); sticky.rotation.x = sign * (-Math.PI / 2); } sticky.position = new BABYLON.Vector3(pos.x, pos.y, pos.z); sticky.material = new BABYLON.StandardMaterial("matPaint", scene); sticky.material.diffuseTexture = new BABYLON.Texture("./GalleryAssets/sticky1_tmp.png", scene); sticky.material.specularColor = new BABYLON.Color3(0, 0, 0); sticky.material.diffuseColor = new BABYLON.Color3(0, 0, 0); sticky.material.emissiveColor = new BABYLON.Color3(0.6, 0.6, 0.6); var content = new BABYLON.Mesh.CreateBox("content", 0.5, scene); if (farWall) { //sticky.rotation.x = sign * (Math.PI); content.scaling = new BABYLON.Vector3(1, 1, 0.01); } else { content.scaling = new BABYLON.Vector3(0.01, 1, 1); content.rotation.x = sign * (-Math.PI / 2); } content.position = new BABYLON.Vector3(pos.x, pos.y, pos.z); content.material = new BABYLON.StandardMaterial("matPaint", scene); content.material.specularColor = new BABYLON.Color3(0, 0, 0); content.material.diffuseColor = new BABYLON.Color3(0, 0, 0); content.material.emissiveColor = new BABYLON.Color3(0.6, 0.6, 0.6); var backgroundTexture = new BABYLON.DynamicTexture("dynamic texture", 512, scene, true); content.material.diffuseTexture = backgroundTexture; backgroundTexture.drawText(stkyContent, null, 80, "40px Arial", "black", "#F7FAA9"); //hover over image sticky.actionManager = new BABYLON.ActionManager(scene); sticky.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOutTrigger, sticky, "visibility", 1, 100)); sticky.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOverTrigger, sticky, "visibility", 0.6, 100)); /** * Register a babylon event to watch out for a pointer over trigger. When this happens set selectedPic to the ID of the ele we've hovered over * so that when a dblclick event happens, we know what pic we're meant to show. * Additionally, when there is a pointer out trigger, set selectedPic to null, so we don't do anything on dblclick */ sticky.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOverTrigger, function (ele) { selectedPic = ele.source; text = stkyContent; stickyID = stkyID; isSticky = true; })); sticky.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOutTrigger, function () { selectedPic = null; isSticky = false; })); //attempted zoom //if ($ && $.fn.zoom) { // $('backgroundTexture').zoom({ on: 'grab' }); //} //$('backgroundTexture img') // .wrap('<span style=""></span>') // .css('display', 'block') // .parent() // .zoom(); //sticky.actionManager.registerAction(action); //sticky.actionManager.registerAction(action2); allC.push(sticky); } brings in sticky text (from DB) - places it over an image on double click - opens popup for editing which then allows edit and submit to DB of text... var LoadForegroundStky = function () { hotkeys = false; $("#BabylonDiv").prepend("<div id='Babylon_loading'><div id='posterContainer'></div></div>"); $("#posterContainer").append("<div id='stickyContainer'><div id='stickyHeader'><img src='./GalleryAssets/close_BtnSmall.png' alt='close' width='28' id='stickyClose' onClick='babylonPopupClose();' /></div><div id='stickyPanel'><textarea id='stkyEdit'></textarea></div><div id='stickyFooter'><input type='submit' id='submit' class='submit' value='submit' /></div></div>"); $('textarea').val(text); var posterContainer = document.getElementById('posterContainer'); posterContainer.style.display = "block"; $("#submit").click(function () { updateSticky(stickyID, stkyEdit.value); babylonPopupClose(); }); //get img from 3DGallery //var firstChild = true; $("#3DGallery").children('img').each(function (i, element) { babylonPopup2Close = function () { $('#posterContainer').remove(); hotkeys = true; } }); //adding image to HTML var img = $('<img class="posterImg" />'); //Equivalent: $(document.createElement('img')) //Changed selectedPic to only hold the URL(id) of the image we are trying to load. img.attr('src', selectedPic.material.diffuseTexture.url); //img.attr('src', selectedPic); img.appendTo('#poster'); //backgroundResize(); }do I need to send the text BACK to the CreateSticky() function before it refreshes? attached - a few screen shots - might help apologies for the long post - so close to making this work....

Thanks Dad - just making those changes to see if any improvement... Next question..... at the moment, I can double click on yellow sticky on the wall and edit content - then update database - BUT HOW do I make it refresh the test with new value?????? I have var LoadImagesFromHTML = function () I have tried to put this again after submit button - no change... also tried to copy: engine.runRenderLoop(function () { scene.render(); });after submit button - no joy Any ideas?

Hi dad - I'm not really sure i understand what you mean - are you saying i should remove sticky.material = new BABYLON.StandardMaterial("matPaint", scene); and move it to var stickyMat = new BABYLON.StandardMaterial("matPaint", scene); ? is it just cleaner code - or something I'm doing wrong? Hey Wingnut! yes - word-wrapping is the game! I'm taking the content from a database I'm making yellow stickies for the walls on my room. Maybe I need to find/make a little function that takes the database content, works max characters per line then splits content into those different lines as you show.... ouch!

Hey all ! I',m playing around with dynamic texture and drawText to layer some text over my mesh. anyone have any idea on how to wrap the text on the box? I'm able to position, change font and size as per the documentation - but wrapping is a bit of a mystery! here - I'm able to layer text over an image of a yellow sticky, but so far - no wrapping.... var sticky = new BABYLON.Mesh.CreateBox("sticky", 0.5, scene); if (farWall) { sticky.rotation.x = sign * (Math.PI); sticky.scaling = new BABYLON.Vector3(1, 1, 0.01); } else { sticky.scaling = new BABYLON.Vector3(0.01, 1, 1); sticky.rotation.x = sign * (-Math.PI / 2); } sticky.position = new BABYLON.Vector3(pos.x, pos.y, pos.z); sticky.material = new BABYLON.StandardMaterial("matPaint", scene); sticky.material.diffuseTexture = new BABYLON.Texture("./GalleryAssets/sticky1_tmp.png", scene); sticky.material.specularColor = new BABYLON.Color3(0, 0, 0); sticky.material.diffuseColor = new BABYLON.Color3(0, 0, 0); sticky.material.emissiveColor = new BABYLON.Color3(0.6, 0.6, 0.6); var content = new BABYLON.Mesh.CreateBox("content", 0.5, scene); if (farWall) { //sticky.rotation.x = sign * (Math.PI); content.scaling = new BABYLON.Vector3(1, 1, 0.01); } else { content.scaling = new BABYLON.Vector3(0.01, 1, 1); content.rotation.x = sign * (-Math.PI / 2); } content.position = new BABYLON.Vector3(pos.x, pos.y, pos.z); content.material = new BABYLON.StandardMaterial("matPaint", scene); content.material.specularColor = new BABYLON.Color3(0, 0, 0); content.material.diffuseColor = new BABYLON.Color3(0, 0, 0); content.material.emissiveColor = new BABYLON.Color3(0.6, 0.6, 0.6); var backgroundTexture = new BABYLON.DynamicTexture("dynamic texture", 512, scene, true); content.material.diffuseTexture = backgroundTexture; backgroundTexture.drawText(stkyContent, null, 80, "50px Segoe UI", "black", "#F7FAA9"); //hover over image sticky.actionManager = new BABYLON.ActionManager(scene); sticky.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOutTrigger, sticky, "visibility", 1, 100)); sticky.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOverTrigger, sticky, "visibility", 0.6, 100)); cheers!

Hey Wingnut - You rock dude! thanks - things are great - real busy Hope you too...? thanks for taking the time to do that. So - I've found the culprit... camera.applyGravity = true;camera.ellipsoid = new BABYLON.Vector3(1, 3, 1); these 2 line together were forcing the height to all ways return to the same.after removing them, then, just like your examples - the height function began to work as expected. I thought camera.ellipsoid was needed for collision checking - but works fine without. Most of all - what you've done by taking everything back to basics, was exactly what i needed to do (and learn to do with all problems)simplify - take it back to basics, then work out which line/s is causuing problems Thanks again man!

Hi all.... I have freecamera with some custom hotkeys to move the 'first person shooter' . Pageup button - the camera floats up Pagedown button - the camera 'crouches' down. BUT - when I press forward or back keys, camera returns to original height (Y.position) instead of continuing at the new height. window.addEventListener("keydown", function (event) {//pageup if (event.keyCode === 33) { if (camera.position.y < 6) { animateCameraPositionAndRotation(camera, camera.position, new BABYLON.Vector3(camera.position.x, camera.position.y + 2, camera.position.z), camera.rotation, camera.rotation); } } //pagedown if (event.keyCode === 34) { if (camera.position.y > 3) { animateCameraPositionAndRotation(camera, camera.position, new BABYLON.Vector3(camera.position.x, camera.position.y - 2, camera.position.z), camera.rotation, camera.rotation); } }}, false);var animateCameraPositionAndRotation = function (camera, fromPosition, toPosition, fromRotation, toRotation) { //needs work to even out the time of animation between short and long distances var animTime if (fromPosition - toPosition > 10) { animTime = 40 } else { animTime = 50 } var animCamPosition = new BABYLON.Animation("animCam", "position", animTime, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE); var keysPosition = []; keysPosition.push({ frame: 0, value: fromPosition }); keysPosition.push({ frame: 100, value: toPosition }); animCamPosition.setKeys(keysPosition); var animCamRotation = new BABYLON.Animation("animCam", "rotation", animTime, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE); var keysRotation = []; keysRotation.push({ frame: 0, value: fromRotation }); keysRotation.push({ frame: 100, value: toRotation }); animCamRotation.setKeys(keysRotation); camera.animations.push(animCamPosition); camera.animations.push(animCamRotation); camera.checkCollisions = true; scene.beginAnimation(camera, 0, 100, false); };any ideas how I can get the camera to continue at the new height after pageup or down pressed? eg - I want to fly up into the sky, then continue forward at that height many thanks

ok found the answer to my issue - I needed to parent all the meshes to one parent in blender before exporting to Babylon.... then above codes are working!!! http://www.html5gamedevs.com/topic/8146-babylonsceneloader-positioning-and-scaling-issues-the-saga-continues/ then scaling and positioning is working with Temechons code above... thank you!

THANKYOU JC - finaly got it all working - I owe you a beer! since making the all the meshes to a single parent, and using this code from temechon - http://www.html5gamedevs.com/topic/1896-problem-with-babylonsceneloaderimportmesh/ (I think very similar to yours) BABYLON.SceneLoader.ImportMesh("", "GalleryAssets/room/", "furniture.babylon", scene, function (newMeshes) { setup(newMeshes[0]); function setup(mesh) { mesh.position.x = 0; mesh.position.z = 24; mesh.scaling = new BABYLON.Vector3(50, 40, 40); mesh.material.emissiveColor = new BABYLON.Color3(0.4, 0, 0); mesh.material.diffuse = new BABYLON.Color3(0.1, 0.1, 0.1); shadowGenerator.getShadowMap().renderList.push(mesh); //mesh.receiveShadows = true; }working good - (except I'm getting some strange results when parenting all in blender - so I need to learn a bit more about blender ) thanks!!!

thanks DeltaKosh - using that code in conjunction with window.addEventListener("keydown", function (event) - and reading this great tutorial http://blogs.msdn.com/b/davrous/archive/2014/02/19/coding4fun-tutorial-creating-a-3d-webgl-procedural-qrcode-maze-with-babylon-js.aspx window.addEventListener("keydown", function (event) { //left wall //hotkey no. 1 if (event.keyCode === 49 || event.keyCode === 97) { animateCameraPositionAndRotation(camera, camera.position, new BABYLON.Vector3(LWallXCamera, cameraHeight, startPos), camera.rotation, new BABYLON.Vector3(0, faceLeft, camera.rotation.z)); } now to see if I can chain animations to make camera move around objects great forum - thanks!

Hi dad72 - welding objects to a single mesh sounds exactly what i need - must it be done in blender b4 export or Babylon? Good comment JCPalmer - hope it's not a trilogy either - I will play with the cache idea - thanks any other ideas out there?

Hi all - I've done as much searching as possible and tried so many different things - STILL, I'm struggling to position or resize any files from Blender exporter. THis is driving me nuts!!!! The model will display, but refuses to change position and size. here are a few codes I've tried..... var LoadChairs = function () {BABYLON.SceneLoader.ImportMesh("", "GalleryAssets/", "office_chair2.babylon", scene, function (newMeshes, particleSystems) { var benchCenter1 = newMeshes; benchCenter1.scaling = new BABYLON.Vector3(0.4, 0.3, 0.4); benchCenter1.rotation.y = Math.PI / 1; benchCenter1.position = new BABYLON.Vector3(8, 0.1, 0); shadowGenerator.getShadowMap().renderList.push(benchCenter1); });}This brings the chair in - BUT no scaling/position response var LoadChairs = function () {BABYLON.SceneLoader.ImportMesh("", "GalleryAssets/", "office_chair2.babylon", scene, function (newMeshes, particleSystems) { var benchCenter1 = newMeshes[0]; benchCenter1.scaling = new BABYLON.Vector3(0.4, 0.3, 0.4); benchCenter1.rotation.y = Math.PI / 1; benchCenter1.position = new BABYLON.Vector3(8, 0.1, 0); shadowGenerator.getShadowMap().renderList.push(benchCenter1); });}This brings the chair in and the first mesh - here the first mesh responds to position and resizing - you can see it to the right in the image below. BABYLON.SceneLoader.ImportMesh("", "GalleryAssets/", "office_chair2.babylon", scene, function (newMeshes, particleSystems) { newMeshes[0].position = new Babylon.vector3(10, 1, 10); newMeshes[0].scaling = new Babylon.vector3(0.5, 0.5, 0.5); });chair comes in - no scaling/position response a) is this something I'm doing wrong in calling my routine, or I've left out lack of understanding of meshes c) problem with the way I'm exporting these files from Blender - I have tried quite a few and all giving the same issue. - I've attached a zip of office_chair2.babylon file Is there something I should be doing in blender b4 exporting???? another related problem is that if try load more than one mesh, then the second one gives console error - Cannot set property 'y' of undefined..... Can anyone help please this has and has been going on for days - I realize it's most likely my lack of understanding of meshes etc -but it's driving me nuts!!!!! office_chair2.zip

thanks for looking! - I had already removed 'bench' from the sceneloader - so thats not the issue....

I've zipped it and attached.... no link as it's just running on localhost cheers! office_chair.zip

Yes - I can see the file - even with / without those 2 lines - it comes in fine. my problem is that I need to resize and position the chair

Hi guys' thanks for responses... I've removed "bench" and tried the code above from reddozen... var LoadChairs = function () { BABYLON.SceneLoader.ImportMesh("", "GalleryAssets/room/", "office_chair.babylon", scene, function (newMeshes, particleSystems) { newMeshes[0].position = new Babylon.vector3(10, 1, -10); newMeshes[0].scaling = new Babylon.vector3(5, 5, 5); });} BUT - I still get this i get error - cannot set property 'position' of undefined' in console I've even tried to resize and position in the office_chair.babylon file with no results.... is there something i should do with my blender file before exporting?

Hi Guy's - when I try this i get error - cannot set property 'position' of undefined' in console BABYLON.SceneLoader.ImportMesh("bench", "GalleryAssets/room/", "office_chair.babylon", scene, function (newMeshes, particleSystems) { setup(newMeshes[0]); }); function setup(mesh) { function setup(mesh) { mesh.position.x = 10; mesh.position.y = 1; mesh.position.z = -10; mesh.scaling.x = 5; mesh.scaling.y = 5; mesh.scaling.z = 5; } any ideas to help? thanks

Hi temechon - many thanks! your code is bringing in the mesh fine, but it's still not responding to any scaling or positioning... var internalMesh; BABYLON.SceneLoader.ImportMesh("", "GalleryAssets/room/", "office_chair.babylon", scene, function (newMeshes, particleSystems) { // Your first imported mesh internalMesh = newMeshes[0]; internalMesh.position.y = 20; internalMesh.scaling.x = 0.2; internalMesh.scaling.y = 0.2; internalMesh.scaling.z = 0.2; setup(internalMesh); }); function setup(mesh) { mesh.position.x = 10; mesh.position.y = 1; mesh.position.z = -10; mesh.scaling.x = 5; mesh.scaling.y = 5; mesh.scaling.z = 5; } Any ideas? help!!! thanks

Here is my original code - that is bringing the mesh in, but not allowing me to change size or position... var mesh = this; BABYLON.SceneLoader.ImportMesh("", "GalleryAssets/room/", "Room3.babylon", scene, function (newMeshes, particleSystems) { this.internalMesh = newMeshes[0]; this.internalMesh.position.y = 20; this.internalMesh.scaling.x = 0.2; newMeshes[0].scaling.x = 0.2; newMeshes[0].scaling.y = 0.2; newMeshes[0].scaling.z = 0.2; //this.setMesh(newMeshes[0]); setup(newMeshes[0]); var bb1 = new BABYLON.Mesh.CreateBox("bb1", 1, scene); bb1.scaling = new BABYLON.Vector3(0.2, 17, 48); bb1.position = new BABYLON.Vector3(-7.7, 0, 20); bb1.visibility = 0; bb1.checkCollisions = true; }); i guess what you are saying is that variable 'mesh' doesn't really contain anything, so this.internalMesh.scaling.x = 0.2; is unable to do anything?

Hi Kilombo - thanks so much for taking the time to help. I'm just about grasping what you are saying with OOP - this is my code I've tried by copying your example... var imageFileName = "Room3.babylon"; unit.prototype.load3D = function(imageFileName){ var temp = this; BABYLON.SceneLoader.ImportMesh("", "GalleryAssets/room/", imageFileName, scene, function (newMeshes) { var room = newMeshes[0].clone(); room.scaling.x = 20; room.scaling.y = 20; room.scaling.z = 20; room.position = new BABYLON.Vector3(0, 50, 10); temp.setMesh(room); setup(newMeshes[0]); var bb1 = new BABYLON.Mesh.CreateBox("bb1", 1, scene); bb1.scaling = new BABYLON.Vector3(0.2, 17, 48); bb1.position = new BABYLON.Vector3(-7.7, 0, 20); bb1.visibility = 0; bb1.checkCollisions = true; }); with this it tells me 'unit' is not defined - which i supose makes sense (I thought it might have been a babylon command) - now I'm not really sure how to progress?

I've been using tween.js with three.js with good results for auto animating camera with hotkeys. is there something simmilar that will work with babylon? what I'm trying to achieve for example - press key '1' and camera tweens to a certain location along a path press key '2' and camera goes to a different location. any ideas to set me on the right path would be much appreciated. ta.

Awesome work man - really good for us beginners to get stuck into! thanks!