TheFrenchieCake

Members
  • Content Count

    10
  • Joined

  • Last visited

About TheFrenchieCake

  • Rank
    Member
  • Birthday February 23

Profile Information

  • Gender
    Male
  • Location
    Rouen

Contact Methods

  • Twitter
    @TheFrenchieCake
  1. Hey people! New feature for the documentation has just been pushed to production :-) you now have a possibility to filter the list of classes/tags on the classes pages and in the sidebar of any class page displayed in desktop mode.
  2. Documentation for BabylonJS 2.2 is live :-) you can see the list of changes on the what's new page, as usual.
  3. Hey guys! I added a section in the README of the github repo to explain how to structure your document in order to have a valid and usable table of content ;-) you can already see it in the branch "master" of the repo. To give some examples, I went through EVERY documents from the "generals", "tutorials", "exporters" and "extensions" sections, and modified them in order to have valid TOC everywhere on the current documentation.
  4. Hi Wingnut! Thanks for your answer :-) I was already thinking about this solution, but thought there would have been a 3D solution ;-p I'll use this solution, for now (thank you for all the styling that I won't have to search, by the way ;-) ).
  5. Hi everyone, I have a minimap in the upper right corner of my project; the minimap is a orthographic camera with its own viewport, just like in Temechons FPS tutorial. For clarity purpose, I need it to be clearly "separated" from the main canvas. So, I'd like to create a square plane with round corners, and eventually with a colored border, that I'll place beneath the main terrain of my scene. For now I just created a square half-transparent white plane beneath the terrain, which already separated the minimap from the terrain displayed (but I really need those round corners and that colored border ^^). I could create an other plane that I would place upon the first one, but the fact is the main terrain is very big (the first underneath plane has dimensions of 40.000x40.000) and it would maybe cause some performance issues. Also, I thought about texturing the underneath plane, but again, it's very big and could cause performance issues... Any ideas ? :-)
  6. Do you want the wall to appear dynamically as you move your mouse over the canvas? Or do you want it to be displayed only when the second point is picked? I don't think I'll have much time to work on it today, maybe this WE if I get motivated enough x)
  7. Hi again! I'm back, with a new, shiny, clean, and fully commented measure tool :-) you should be able to directly copy-paste the following parts of code into your own project and use it as you wish ;-) First, some HTML to insert in your <body>: <!--Measure Tool Indicator--><div id="measureToolIndicator" class="hidden"></div>The corresponding CSS: .hidden{ display : none;}#measureToolIndicator{ position : absolute; color : white; // feel absolutely free to change these... background-color : black; // ... I'm not really a designer ;-) z-index : 10; // just make sure it's above your canvas z-index pointer-events : none;}Now, the good part, the JS :-) first of all, the MeasureTool object with its prototype: "use strict";/** * The mighty measure tool the user can use to... measure things. Like distance * between two picked points, or the height of a building... In fact, every distance * between two points picked on pickable material on the scene. * @param scene * @constructor */var MeasureTool = function(scene) { // Determines if the tool is activated/deactivated this.activated = false; // The scene we're working on this._scene = scene; // The first clicked point this.firstPoint = null;};MeasureTool.prototype = { /** * Manage the actions of the measure tool * @param evt * @param pickInfo */ manageMeasureTool : function(evt, pickInfo) { var _this = this; var distanceLine = null; if(pickInfo.hit && this.firstPoint){ // cancel the mousemove event; the last drawn line will be left on the scene, until // you pick an other point $("#renderCanvas").off("mousemove"); // reinitialize the first picked point, so an other measure can be launched // by clicking on the scene this.firstPoint = null; } else if(pickInfo.hit && !this.firstPoint){ // dispose of any already drawn line on the scene if(_this._scene.getMeshByName("distanceLine")){ _this._scene.getMeshByName("distanceLine").dispose(); } // clone the picked point and store it for further purpose this.firstPoint = pickInfo.pickedPoint.clone(); /** * Add a mousemove event listener on the canvas, that will draw and display * the line between your first picked point and your pointer. Also, this event * will trigger the display of the distance next to your pointer. */ $("#renderCanvas").on("mousemove", function(evt){ // dispose of any already drawn line on the scene if(_this._scene.getMeshByName("distanceLine")){ _this._scene.getMeshByName("distanceLine").dispose(); } // pick the position of the pointer on the scene var mousePickInfo = _this._scene.pick(evt.clientX, evt.clientY, null, null, _this._scene.activeCameras[0]); if(mousePickInfo.hit){ // clone the point on the scene on which the pointer is var mousePickedPoint = mousePickInfo.pickedPoint.clone(); /** * The divider will be used for the linear interpolation below. It will determine the precision of the * interpolation, and so the fidelity of the drawn line regarding the different heights of your terrain. * The higher it is, the higher the precision will be. But as the linear interpolation is launched each * time you move the pointer, it is wiser to keep it relatively low (100 is convenient for my purpose) */ var divider = 100; // this array will store every point that will form the drawn line between your first point and the pointer var coordinatesArray = []; // Vector3[] // push the first picked point into this array coordinatesArray.push(_this.firstPoint); // for the purpose of the linear interpolation, clone & store the points into // temporary Vector3 var, which y position will be increased var tempFirstPoint = _this.firstPoint.clone(); var tempSecondPoint = mousePickedPoint.clone(); tempFirstPoint.y += 1000; tempSecondPoint.y += 1000; for(var i = 1; i < divider; i++){ // linear interpolation var tempPoint = BABYLON.Vector3.Lerp(tempFirstPoint, tempSecondPoint, i/divider); /** * Now, we'll launch a ray from our tempPoint, perpendicularly toward the scene. This ray * will pick the first pickable object he will stumble upon (the ground, a building, etc...). * That way, it will determine the height of the next point of our drawn line. */ var minHeight = 0; var ray = new BABYLON.Ray(tempPoint, new BABYLON.Vector3(0,-1,0)); var pickedPointInfo = _this._scene.pickWithRay(ray, null); if(pickedPointInfo.hit){ // retrieve the height of the first obstacle found by the ray minHeight = pickedPointInfo.pickedPoint.y; // push the new point of the line in the coordinates array coordinatesArray.push(new BABYLON.Vector3(tempPoint.x, minHeight, tempPoint.z)); } } // push the last point, that is to say the point your pointer is pointing on the scene coordinatesArray.push(mousePickedPoint); // finally create the line distanceLine = new BABYLON.Mesh.CreateLines("distanceLine", coordinatesArray, _this._scene); // color of the drawn line (here: white) distanceLine.color = new BABYLON.Color3(1, 1, 1); /** MEASURE TOOL INDICATOR **/ // compute the distance var distance = (mousePickedPoint.subtract(_this.firstPoint)).length(); // trim the distance value distance = distance.toFixed(2); // display the distance $("#measureToolIndicator").html(distance + "m"); $("#measureToolIndicator").removeClass("hidden").css("top", evt.clientY + 10).css("left", evt.clientX + 10); /** END MEASURE TOOL INDICATOR **/ } }); } }};Finally, the JS to activate/deactivate and use the measure tool; you'll have to create two controls on your HTML page to activate/deactivate the measure tool (here, I use two buttons with convenient names): // you may have to precise the following line if you have multiple camera on your scene // (the camera I personally use is the first created - don't forget to change the following if// you have something different!)scene.cameraToUseForPointers = scene.activeCameras[0];var measureTool = new MeasureTool(scene);$("#activation_button").on("click", function(){ measureTool.activated = true; scene.onPointerDown = function(evt, pickInfo){ measureTool.manageMeasureTool(evt, pickInfo); };});$("#deactivation_button").on("click", function(){ measureTool.activated = false; scene.onPointerDown = null;});Hope this will help you with your problem :-) tell me if you encounter any problem with the code ;-)
  8. I'm currently working on kind of the same problematic: I also want to draw a line between two points on an irregular plane, and make the line follow the different heights of the plane while displaying the distance between the two points. So far I managed to display the line between the two points (dynamically, meaning it is showed as soon as you picked the first point, and between the first point and the user cursor) and show the distance in the navigator console when the second point is picked. Also, thanks to a linear interpolation, I managed to make the line follow the irregularities of my plane. Here's the code to do so: //!\\ SEE NEW SHINY AND FULLY COMMENTED VERSION IN THE NEXT ANSWER TO THIS POST :-) //!\\ var _this = this; var firstPoint = null; var secondPoint = null; _this._scene.onPointerDown = function(evt, pickInfo){ if(pickInfo.hit){ if(firstPoint){ // meaning: first point already picked secondPoint = pickInfo.pickedPoint; var distance = (secondPoint.subtract(firstPoint)).length(); // compute the distance between the two points console.log(distance); // show the distance in the console $("#renderCanvas").off("mousemove"); // cancel the event handler you'll see in the else statement below // reinitialize the firstPoint firstPoint = null; } else { // meaning: first point hasn't been picked yet firstPoint = pickInfo.pickedPoint; // create new line that will be used to display the distance between the two points var distanceLine = null; // update the line displaying when the user moves his mouse on the canvas $("#renderCanvas").on("mousemove", function(evt){ if(distanceLine){ distanceLine.dispose(); // remove the previous drawn line, if there is any } var mousePickInfo = _this._scene.pick(evt.clientX, evt.clientY, null, null, _this._scene.activeCamera); if(mousePickInfo.hit){ var mousePickedPoint = mousePickInfo.pickedPoint.clone(); // the following var will be used in the linear interpolation; // modify its value for a more precise following of the irregularities of the terrain/plane: // a higher value means a higher precision. var divider = 100; coordinatesArray.push(firstPoint); // temporary var used for commodity var tempFirstPoint = firstPoint.clone(); var tempSecondPoint = mousePickedPoint.clone(); // increase the y position of the temporary points, in order to use them // in the linear interpolation tempFirstPoint.y += 1000; tempSecondPoint.y += 1000; // the following array will contain the points of the white line between the two picked points var coordinatesArray = []; // Vector3[] coordinatesArray.push(firstPoint); // LINEAR INTERPOLATION - see BJS doc for more info on BABYLON.Vector3.Lerp // and Wikipedia for more on discrete values and linear interpolation for(var i = 1; i < divider; i++){ var tempPoint = BABYLON.Vector3.Lerp(tempFirstPoint, tempSecondPoint, i/divider); var minHeight = 0; var ray = new BABYLON.Ray(tempPoint, new BABYLON.Vector3(0,-1,0)); var pickedPointInfo = _this._scene.pickWithRay(ray, null); if(pickedPointInfo.hit){ minHeight = pickedPointInfo.pickedPoint.y; // push the point into the correct array coordinatesArray.push(new BABYLON.Vector3(tempPoint.x, minHeight, tempPoint.z)); } } coordinatesArray.push(mousePickedPoint); distanceLine = new BABYLON.Mesh.CreateLines("distanceLine", coordinatesArray, _this._scene); distanceLine.color = new BABYLON.Color3(1, 1, 1); // colors the line in white } }); } } };
  9. While reading the Elvarion's tutorial for mobile HTML5 games, I stumbled upon the solution: just disable the zoom on mobile view! So, in your HTML code, add the following meta in the <head> of your page: <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />Try to resize the mobile viewport: everything's fine now :-)
  10. Hello folks! I'm developing a project which consists of a canvas and a set of menus and navigation tools to navigate into the scene. The project must be available both on desktop and tablet devices (not mobile phone). I have no problem with the desktop version of the project, but the tablet version causes some weird bugs I couldn't fix for now. I test the mobile rendering of the website on Google Chrome Developer Tools with device mode activated (Google Chrome version: 41.0.2272.101). The problem is that, on viewport resizing, the canvas won't resize properly when the width of the viewport gets below 980 px. As my DOM body has a CSS width set at 100%, its min-width follows the highest width among its element. Every element of my body have a CSS width of 100% (including the render canvas). But the width CSS property of the canvas can't get below 980 px (at pixel ration: 1; 1960 px at pixel ration: 2; etc...). And so, the body CSS width get stuck at 980 px too... Also, as the width of the viewport gets lower than 980 px, the height property of the canvas gets higher. I tried a first workaround in the JS code, like this: // engine: the engine used in the canvas// canvas: the DOM canvas element$(window).on("resize", function(){ var width = window.devicePixelRatio * window.innerWidth; var height = window.devicePixelRatio * window.innerHeight; engine.setSize(width, height); engine.resize(); canvas.width = width; canvas.height = height;});The result is that, even if the canvas in the HTML code gets the corrects width & height, the scene doesn't get the correct size! It looks like the scene is still stuck at 980px wide, and the height continues to rise. I tried a second workaround in the render loop, still in the JS code, like this: _this.engine.runRenderLoop(function(){ _this._scene.render(); var width = window.devicePixelRatio * window.innerWidth; var height = window.devicePixelRatio * window.innerHeight; _this._scene.width = width; _this._scene.height = height;});The result is... still the same situation. Can't set a viewport width below 980 px without getting this problematic situation, and the body doesn't fit into the viewport (you have to horizontally/vertically scroll to see the rest of the DOM body). You can easily reproduce this bug with any BJS playground code, with Google Chrome and device mode activated. Try to reduce the width of the viewport below 980 px and see what happens ;-) if you have any effective solution I'll be glad to see it! :-)