swat0284

Members
  • Content Count

    60
  • Joined

  • Last visited

About swat0284

  • Rank
    Advanced Member

Recent Profile Visitors

804 profile views
  1. Hello can i Detect Unhandled expression at line on obj loader and show alert to user that obj file is wrong?
  2. Hello, is there any way to slowdown time in babylon to get slowmontion effect? In unity3d we have got full control of game time.
  3. So how can i generate ultiple animation for multiple objects
  4. Hello i try to run 5 animations on 5 diffrent models but i have an error: Uncaught TypeError: Cannot read property 'frame' of undefined at i._interpolate (babylon.js:18) at i.animate (babylon.js:19) at e._animate (babylon.js:19) at i._animate (babylon.js:12) at i.render (babylon.js:12) at main.js:33 at n._renderLoop (babylon.js:4) My code is very silmpy function CreateAnimation(index) { var moveAnimation = new BABYLON.Animation("moveAnimation", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE); //tworzenie animacji przemieszczania sie var moveKeys = []; var moveLenght = 0; console.log(checkpointsPositions[index].length +"checkpoints lenght"); for(var i = 0 ; i < checkpointsPositions[index].length ; i++) { //.toFixed(0) moveKeys.push({ frame: (jsonObjectResults.points[licznik].time)*30, value: (checkpointsPositions[index][i].position) }); console.log(checkpointsPositions[index][i].position + " +++ " + (jsonObjectResults.points[licznik].time).toFixed(0)*30); console.log("Licznik " + licznik); moveLenght++; licznik++; } licznik++; moveAnimation.setKeys(moveKeys); players[index].animations.push(moveAnimation); scene.beginAnimation(players[index], 0, jsonObjectResults.points[licznik-2].time*30, true); } I start the code by createAnimation(index of mesh) and when i run it once it works but when i run it more than one it doesnt work
  5. http://www.babylonjs-playground.com/#O3RBC#5 sample, rotation doesnt work and i dont know why
  6. Hello, when i want to rotate my mesh by using animations it gone, i can get object, see it position but mesh is gone checkpointsPositions re objects so they have got quarention HERE - i add "rotation" "QUATERNION" just everything connected with rotation function CreateAnimation(index = 0) { var rotationAnimation = new BABYLON.Animation("rotationAnimation", "HERE", 30, BABYLON.Animation.ANIMATIONTYPE_QUATERNION, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE); var rotationKeys = []; var rotationLenght = 0; for(var i = 0 ; i < checkpointsPositions[index].length-1 ; i++) { rotationKeys.push({ frame: i*60, value: (checkpointsPositions[index][i].rotation) }); rotationLenght++; } rotationAnimation.setKeys(rotationKeys); var bezierEase = new BABYLON.BezierCurveEase(0,0,0,0); rotationAnimation.setEasingFunction(bezierEase); players[index].animations.push(rotationAnimation); scene.beginAnimation(players[index], 0, rotationLenght*60, true); }
  7. Hello i try to move mesh by this code: var players = []; function Temp(){ for(var i = 0 ; playersCount > i ; i++){ players[i] = new BABYLON.AbstractMesh("s"+i,scene); players[i] = LoadModel(i);//assign loaded mesh to element of array players[i].position = new BABYLON.Vector3(10,1,-10); // i have got Cannot set property 'position' of undefined } } function LoadModel(i){ var model; BABYLON.SceneLoader.ImportMesh("","models/","scene.babylon",scene, function(newMeshes) { model = newMeshes[newMeshes.length-1]; console.log(newMeshes.length); console.log(newMeshes[newMeshes.length-1].name); model.position.x = 50 * i; //i can set position }); return model; }
  8. Hello, i try to move mesh along 2 points using: BezierCurveEase(.6,.11,1,.53) and animationBezierTorus.setEasingFunction(bezierEase); but my app work like this: http://www.babylonjs-playground.com/#F9Z7K#0 i try to make that mesh move along this curve: http://cubic-bezier.com/#.6,.11,1,.53
  9. Hello, can i load a model from local disc? Let user to drag it from local disc and show model in a webpage babylon canvas? How can i calculate volume and surface area?
  10. I have solution but it is very very slow <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Babylon.js sample code</title> <!-- Babylon.js --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://www.babylonjs.com/hand.minified-1.2.js"></script> <script src="http://www.babylonjs.com/cannon.js"></script> <script src="http://www.babylonjs.com/oimo.js"></script> <script src="http://www.babylonjs.com/babylon.js"></script> <style> html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; } #renderCanvas { width: 100%; height: 100%; touch-action: none; } </style> </head> <body> <button type="button" onclick="javascript:test()">Click Me!</button> <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg"> <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ --> <g> <title>Layer 1</title> <path d="m329,204c1,0 4.07843,0.21014 7,-1c2.06586,-0.85571 5.07843,-2.78986 8,-4c2.06586,-0.85571 4.186,-1.69255 6,-3c1.14728,-0.8269 2,-1 2,-2c0,0 1.93414,-2.14429 4,-3c2.92157,-1.21014 4.4588,-0.69344 5,-2c0.38269,-0.92387 3.22885,-2.72961 8,-7c3.16132,-2.82951 7,-6 8,-7c1,-1 2.19073,-2.42215 6,-4c5.38708,-2.23141 11.74673,-7.37134 16,-10c3.80423,-2.35114 4.69345,-3.4588 6,-4c1.84775,-0.76537 5,-3 7,-4c4,-2 5.69345,-3.4588 7,-4c0.92389,-0.38269 2.02676,-0.77025 3,-1c4.35251,-1.02748 5.82376,-4.48625 8,-5c0.97324,-0.22975 1.15225,-0.23463 3,-1c2.61313,-1.0824 6,-6 9,-9c3,-3 4.29291,-3.29289 5,-4c0.70709,-0.70711 0,-3 0,-6c0,-2 -1,-5 -3,-9c-2,-4 -3.34619,-6.70546 -5,-9c-1.30746,-1.814 -3.22272,-3.72399 -7,-7c-7.47861,-6.48617 -13.21991,-13.97507 -23,-21c-6.54813,-4.70343 -13.3956,-7.10476 -21,-11c-6.41809,-3.28756 -14.80243,-11.43288 -21,-14c-2.92157,-1.21015 -4.87857,-2.49346 -8,-3c-0.98709,-0.16018 -4,0 -6,0c-1,0 -3,0 -7,0c-3,0 -7,0 -10,0c-3,0 -6,0 -8,0c-3,0 -5,0 -8,0c-2,0 -3,0 -4,0c-3,0 -5.08026,0.31074 -8,1c-2.17624,0.51374 -4.82376,1.48626 -7,2c-1.9465,0.45951 -5.80566,1.44841 -10,3c-3.867,1.4305 -6.88153,2.19028 -10,4c-3.86798,2.24469 -7.7265,4.29362 -12,8c-3.77728,3.27601 -6.32367,5.52016 -8,7c-2.703,2.38616 -3.61731,5.07612 -4,6c-1.0824,2.61313 -6.98283,6.01434 -12,12c-5.17905,6.17879 -9.6806,14.65426 -14,24c-3.58452,7.75572 -4.66069,16.53091 -8,23c-2.93704,5.68979 -6,10 -8,16c-2,6 -5.28473,13.92485 -7,21c-1.20139,4.95547 -2.95517,9.54915 -4,13c-1.15913,3.82837 -2.59308,7.85713 -4,15c-1.75,8.88467 -2.06143,17.9915 -3,25c-1.07013,7.99092 -1,12 -1,15c0,6 1.30649,13.04834 2,18c1.00977,7.20975 3.42215,12.19073 5,16c2.23141,5.38708 5,9 6,12c2,6 3.7464,10.16119 7,15c2.78995,4.14923 5.53165,9.51703 11,14c8.36497,6.85764 19,11 30,16c11,5 13.12601,4.82281 16,7c7.34894,5.56717 15.04294,9.92578 22,14c5.03162,2.94666 11.90436,7.25803 17,9c6.8887,2.35495 14,4 25,5c11,1 27,1 41,1c14,0 16,0 21,0c4,0 12.95847,-0.49924 22,-1c7.98776,-0.44241 18.10059,-1.38779 26,-3c7.13306,-1.45581 17.85739,-4.46765 27,-7c8.88501,-2.461 15.69363,-3.73038 22,-8c1.17105,-0.79285 2,-3 5,-6c4,-4 6.64886,-9.19577 9,-13c2.62866,-4.25327 4.71411,-8.21167 7,-11c2.68976,-3.28101 4.78986,-6.07843 6,-9c1.71143,-4.13171 4.49829,-7.93796 5,-14c0.41241,-4.98297 0,-14 0,-27c0,-7 -1.37537,-8.94003 -7,-12c-5.5556,-3.0224 -11.58707,-7.73125 -20,-12c-9.60468,-4.87344 -17.08743,-8.79393 -22,-11c-6.11951,-2.74806 -11.96329,-4.16042 -16,-5c-5.95532,-1.23863 -11.05798,-1.16779 -17,-2c-7.20975,-1.00977 -11.01691,-1.9034 -17,-3c-5.01547,-0.91925 -11.10059,-1.38779 -19,-3c-7.13306,-1.45581 -15.88138,-4.2935 -23,-7c-5.91171,-2.24762 -9.93796,-3.49829 -16,-4c-4.98297,-0.4124 -8,-1 -12,-1c-3,0 -5.31,0.66251 -8,-1c-2.40601,-1.487 -3.15225,-2.23463 -5,-3c-1.30655,-0.5412 -2,-1 -4,-1c-1,0 -2,0 -3,0c-1,0 -2,0 -3,0c-1,0 -2,0 -3,0l-1,-1l0,0" id="svg_3" stroke-width="5" stroke="#000000" fill="none"/> </g> </svg> <canvas id="renderCanvas"></canvas> <script> //$("#points").html("Loading...").load("infinity.svg"); var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, true); var createScene = function() { var scene = new BABYLON.Scene(engine); scene.clearColor = new BABYLON.Color3( .5, .5, .5); // camera var camera = new BABYLON.ArcRotateCamera("camera1", 0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene); camera.setPosition(new BABYLON.Vector3(-5, -5, -1000)); camera.attachControl(canvas, true); // lights var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene); light.intensity = 0.7; var spot = new BABYLON.SpotLight("spot", new BABYLON.Vector3(25, 15, -10), new BABYLON.Vector3(-1, -0.8, 1), 15, 1, scene); spot.diffuse = new BABYLON.Color3(1, 1, 1); spot.specular = new BABYLON.Color3(0, 0, 0); spot.intensity = 0.8; // material var mat = new BABYLON.StandardMaterial("mat1", scene); mat.alpha = 1.0; mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1.0); mat.backFaceCulling = false; //mat.wireframe = true; // show axis var showAxis = function(size) { var makeTextPlane = function(text, color, size) { var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true); dynamicTexture.hasAlpha = true; dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color , "transparent", true); var plane = new BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true); plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene); plane.material.backFaceCulling = false; plane.material.specularColor = new BABYLON.Color3(0, 0, 0); plane.material.diffuseTexture = dynamicTexture; return plane; }; var axisX = BABYLON.Mesh.CreateLines("axisX", [ new BABYLON.Vector3.Zero(), new BABYLON.Vector3(size, 0, 0), new BABYLON.Vector3(size * 0.95, 0.05 * size, 0), new BABYLON.Vector3(size, 0, 0), new BABYLON.Vector3(size * 0.95, -0.05 * size, 0) ], scene); axisX.color = new BABYLON.Color3(1, 0, 0); var xChar = makeTextPlane("X", "red", size / 10); xChar.position = new BABYLON.Vector3(0.9 * size, -0.05 * size, 0); var axisY = BABYLON.Mesh.CreateLines("axisY", [ new BABYLON.Vector3.Zero(), new BABYLON.Vector3(0, size, 0), new BABYLON.Vector3( -0.05 * size, size * 0.95, 0), new BABYLON.Vector3(0, size, 0), new BABYLON.Vector3( 0.05 * size, size * 0.95, 0) ], scene); axisY.color = new BABYLON.Color3(0, 1, 0); var yChar = makeTextPlane("Y", "green", size / 10); yChar.position = new BABYLON.Vector3(0, 0.9 * size, -0.05 * size); var axisZ = BABYLON.Mesh.CreateLines("axisZ", [ new BABYLON.Vector3.Zero(), new BABYLON.Vector3(0, 0, size), new BABYLON.Vector3( 0 , -0.05 * size, size * 0.95), new BABYLON.Vector3(0, 0, size), new BABYLON.Vector3( 0, 0.05 * size, size * 0.95) ], scene); axisZ.color = new BABYLON.Color3(0, 0, 1); var zChar = makeTextPlane("Z", "blue", size / 10); zChar.position = new BABYLON.Vector3(0, 0.05 * size, 0.9 * size); }; // shape showAxis(5); return scene; }; var scene = createScene(); engine.runRenderLoop(function () { scene.render(); }); // Resize window.addEventListener("resize", function () { engine.resize(); }); function PathToPoints(path, resolution, onDone) { console.log("1" + path); var ctx = {}; ctx.resolution = resolution; ctx.onDone = onDone; ctx.points = []; ctx.interval = null; console.log("tak"); // Walk up nodes until we find the root svg node var svg = path; console.log("tak"); while (!(svg instanceof SVGSVGElement)) { console.log("tak"); svg = svg.parentElement; } // Create a rect, which will be used to trace the path var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); ctx.rect = rect; svg.appendChild(rect); var motion = document.createElementNS("http://www.w3.org/2000/svg", "animateMotion"); motion.setAttribute("path", path.getAttribute("d")); motion.setAttribute("begin", "0"); motion.setAttribute("dur", "10"); // TODO: set this to some larger value, e.g. 10 seconds? motion.setAttribute("repeatCount", "1"); motion.onbegin = PathToPoints.beginRecording.bind(this, ctx); console.log("tak"); motion.onend = PathToPoints.stopRecording.bind(this, ctx); console.log("tak"); // Add rect rect.appendChild(motion); console.log("tak"); } PathToPoints.beginRecording = function(ctx) { console.log("1"); var m = ctx.rect.getScreenCTM(); ctx.points.push({x: m.e, y: m.f}); ctx.interval = setInterval(PathToPoints.recordPosition.bind(this, ctx), 1000*3/ctx.resolution); } PathToPoints.stopRecording = function(ctx) { console.log("1"); clearInterval(ctx.interval); // Remove the rect ctx.rect.remove(); ctx.onDone(ctx.points); } var chuj = ""; var stulej; PathToPoints.recordPosition = function(ctx) { console.log("1"); var m = ctx.rect.getScreenCTM(); ctx.points.push({x: m.e, y: m.f}); console.log(ctx.points.length); } function test(){ console.log("tak"); var aInputs = document.getElementsByTagName('path'); for (var i=0;i<aInputs.length;i++) { console.log("tak" + aInputs.length); PathToPoints(aInputs, 100, function(p){ var shape = []; chuj = JSON.stringify(p); //points.textContent =chuj; var s = "" for(var i = 0 ; i<p.length; i++) { s = s + "new BABYLON.Vector3("+JSON.stringify(p.x)+","+ JSON.stringify(p.y)+", 0),"; console.log("zaczynam"+ i); shape = new BABYLON.Vector3(p.x - p[0].x,p.y-p[0].y, 0); } console.log(s); shape.push(shape[0]); var path = [ BABYLON.Vector3.Zero(), new BABYLON.Vector3(0, 0, -0.1) ]; var extruded = BABYLON.Mesh.ExtrudeShape("extruded", shape, path, 1, 0, 3, scene); var material = new BABYLON.StandardMaterial("material01", scene); extruded.material = material; //material.diffuseTexture = new BABYLON.Texture("12281590_163625937325378_2125629366_o.jpg", scene); //material.diffuseColor = new BABYLON.Color3(p.fill); }); } } </script> </body> </html>
  11. Ok great, Do you know how i can fast create and extrude mesh from svg file path?
  12. I create shape by createlines and then extrude it to make mesh. Surface is stg like surface=a*b for cube wall where a is height of cube wall and b is width of wall
  13. Hello how to calculate surface of mesh? I create mesh by BABYLON.Mesh.CreateLines("sl", shape, scene); var extruded = BABYLON.Mesh.ExtrudeShape("extruded", shape, path, 2, 0, 3, scene);
  14. I have a task to create falt mesh from svg/corel/vector file, at this point i find http://jsfiddle.net/mqmkc7xz/ and it ll work i think