Imported mesh falls through the ground in BabylonJS - mesh

I'm trying to use physics (AmmoJS) in BabylonJS for an imported mesh.
For meshes I create on the fly everything works fine, but when I import a mesh it falls through the ground.
const ground = BABYLON.MeshBuilder.CreateBox("ground",
{ width: 10, height: 1, depth: 10}, scene);
ground.receiveShadows = true;
ground.checkCollisions = true;
ground.physicsImpostor = new BABYLON.PhysicsImpostor(ground , BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0, friction: 0.5, restitution: 0.5 }, scene);
BABYLON.SceneLoader.ImportMesh(["car9"], "models/", "Policecar.glb", scene, function (meshes, particleSystems, skeletons) {
for (let i in meshes) {
meshes[i].checkCollisions = true;
}
let policecar = meshes[0];
policecar.physicsImpostor = new BABYLON.PhysicsImpostor(policecar, BABYLON.PhysicsImpostor.MeshImpostor, { mass: 10, friction: 0.5, restitution: 0.5 });
policecar.position = new BABYLON.Vector3(0, 10, 0);
policecar.scaling = new BABYLON.Vector3(scale, scale, scale);
});
When I change the restition of the policecar to 0 or 1, it doesn't fall through the ground, but bounces weirdly a few times and falls on it's side. With a BoxImpostor instead of MeshImpostor it falls straight through.
Any ideas?

You have to consider that .glb-files use right handed system, while BabylonJS uses left handed system. So I would recommend to set BabylonJS to right handed and don't scale by absolute values.
scene.useRightHandedSystem = true;
...
policecar.scaling.scaleInPlace(scale);

Related

[mxGraph]Changing the preview style of the cell dragged from the toolbar as to center my cursor on the preview, but the guild line doesn't fit along

By default, the cursor is at the left-top of the preview cell .
I've changed the relative position of the preview using transform: translate(-50%, -50%),so the cursor can be at the center on the preview while dragging.
But then I find the guide line doesn't fit along with the changed preview, it's still works according to the original position of the preview.
I've tried some 'offset' API on the docs but still can't work it out.
In this pic, I draw the red box, which is the original position of the preview, and the guide line works wrong
functions concerning the question are on below
const draggingPreview = () => {
const elt = document.createElement("div");
elt.style.width = '60px';
elt.style.height = '60px';
elt.style.transform = "translate(-50%,-50%)";
return elt;
};
const dropHandler = (graph, evt, dropCell, x, y) => {
const parent = graph.getDefaultParent();
this.graph.getModel().beginUpdate();
try {
let vertex = this.graph.insertVertex(
parent,
null,
null,
x - 30,
y - 30,
width,
height,
style
);
vertex.value = "xxxx";
} finally {
this.graph.getModel().endUpdate();
}
};
const ds = mxUtils.makeDraggable(
dom,
graph,
dropHandler,
draggingPreview(),
0,
0,
true,
true
);
ds.setGuidesEnabled(true);

How to plot inscribed circle in cytoscape.js nodes

i need to plot (in cytoscape.js) a circle inscibed to another circle.
I can make the external circle with:
shape:'ellipse',
height: 15,
width: 15,
'background-color': 'white',
'border-width':0.5,
'border-color':'black'
But how can i make the other circle inscribed?
EDIT: In particular, i have to put inside a white circle with black circumference, a smaller white circle with black circumference.
2th EDIT:
I solved by creating a fake node (equal to real one but smaller) that follows the original when dragged or grabbed.
var compAtrr = cy.$('node[type = "originalnode"]');
compAtrr.on('grabon drag',function(evt){
var node = evt.target;
var idnode = node.data('id');
var fakenode = cy.$id(idnode+'fake');
var ix = node.position('x');
var iy = node.position('y');
fakenode.position({
x: ix,
y: iy
});
});
var fakeAtrr = cy.$('node[type = "fakenode"]');
fakeAtrr.on('grabon drag',function(evt){
var node = evt.target;
var idnode = node.data('id');
var l = idnode.length;
idnode = idnode.slice(0,l-4); //remove 'fake' string
var realnode = cy.$id(idnode);
var ix = node.position('x');
var iy = node.position('y');
realnode.position({
x: ix,
y: iy
});
});
Thanks anyway
Have a look at this code pen, you can specify an inner circle by defining the background or a border:
style: [
{
selector: 'node',
css: {
'content': 'data(id)',
'text-valign': 'center',
'text-halign': 'center',
'height': '60px',
'width': '60px',
'border-color': 'black',
'border-opacity': '1',
'border-width': '10px'
}
},
...
I am afraid this is not possible in Cytoscape.js. Your best bet is to use a background image.
You can also try setting border style to double, but this is very limited - you won't be able to change the distance between lines.
You can draw arbitrary content on a node with one or more SVG background images.

TweenJS rect command "grow from center"

new to createjs here:
Created this fiddle: example. I would like the rect to grow from the center and not from the top left corner. I couldn't find any help, I don't know what to search for.
Code:
const PAGE_WIDTH = 150,
PAGE_HEIGHT = 75;
var stage = new createjs.Stage("canvas");
createjs.Ticker.setFPS(60);
createjs.Ticker.on("tick", tick);
var page = new createjs.Shape();
page.regX = PAGE_WIDTH/2;
page.regY = PAGE_HEIGHT/2;
page.x = 50;
page.y = 50;
stage.addChild(page);
var pageCommand = page.graphics
.beginFill('red')
.drawRect(0, 0, 1, 1).command;
createjs.Tween.get(pageCommand)
.to({w:PAGE_WIDTH, h: PAGE_HEIGHT}, 700, createjs.Ease.elasticOut)
function tick() {
stage.update();
}
Thanks.
The best way is to change the registration point of your graphics so it grows from the center.
Your code:
.drawRect(0, 0, 1, 1).command;
.to({w:PAGE_WIDTH, h: PAGE_HEIGHT})
Instead:
.drawRect(-1.-1, 2, 2);
.to({x:-PAGE_WIDTH/2, y:-PAGE_WIDTH/2, w:PAGE_WIDTH, h: PAGE_HEIGHT})
Fiddle: http://jsfiddle.net/1kjkqo2v/
[edit: I said 2 options initially, but the second (using regX and regY) wouldn't work well, since you have to tween that value as well as your size changes.]

KineticJS won't draw a dashed line in Internet Explorer 10

Trying to display a dashed line with KineticJS (v4.7.3). It works fine in Chrome, but in IE (v10), a normal solid line is displayed.
Here's the code:
var element = document.getElementById('target'),
stage = new Kinetic.Stage({
container: element,
width: element.offsetWidth,
height: element.offsetHeight
}),
layer = new Kinetic.Layer();
layer.add(new Kinetic.Line({
points: [10, 10, 190, 190],
stroke: 'black',
strokeWidth: 1,
dashArray: [5, 4]
}));
stage.add(layer);
And you can see the behavior for yourself in here.
Fixed in IE-11 !
Until all "bad" IE's die, you can "do-it-yourself" fairly easily for lines (less easily for curves).
You can use a custom Kinetic.Shape which gives you access to a canvas context (a wrapped context).
Code is taken from this SO post: dotted stroke in <canvas>
var CP = window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype;
if (CP && CP.lineTo){
CP.dashedLine = function(x,y,x2,y2,dashArray){
if (!dashArray) dashArray=[10,5];
if (dashLength==0) dashLength = 0.001; // Hack for Safari
var dashCount = dashArray.length;
this.moveTo(x, y);
var dx = (x2-x), dy = (y2-y);
var slope = dx ? dy/dx : 1e15;
var distRemaining = Math.sqrt( dx*dx + dy*dy );
var dashIndex=0, draw=true;
while (distRemaining>=0.1){
var dashLength = dashArray[dashIndex++%dashCount];
if (dashLength > distRemaining) dashLength = distRemaining;
var xStep = Math.sqrt( dashLength*dashLength / (1 + slope*slope) );
if (dx<0) xStep = -xStep;
x += xStep
y += slope*xStep;
this[draw ? 'lineTo' : 'moveTo'](x,y);
distRemaining -= dashLength;
draw = !draw;
}
}
}
Totally off-topic: Go Wisconsin! I spent many a great summer at my grandmothers house in
Lacrosse.
Short answer: Not supported.
Via a thread here, the creator of KineticJS addresses this issue:
"[T]he dashArray property now uses the browser-implemented dashArray
property of the canvas context, according to the w3c spec. Firefox is
a little behind at the moment."
If you follow the thread, you'll discover that this was an issue for Firefox at one point, too, but that has been resolved. However, support for IE should apparently not be expected any time soon.

How to draw a triangle in a math graph?

How to draw a triangle in a math graph which displays X and Y axis.
To draw shapes using ActionScript2, you can use the moveTo() and lineTo() methods of the MovieClip object. You can specify line colour and thickness with lineStyle(), or make a solid shape using beginFill() and endFill().
So to draw your graph and triangle you could do the following steps:
Make a movieClip named "graph"
Define how big your graph should be (using the flash.geom.Rectangle object)
Draw a grey background using graph.beginFill(grey) and then moveTo() and lineTo()
Draw some blue lines at regular intervals for a grid
Draw the X and Y axes on the side and bottom of your grid
Make a second movieClip named "shape"
Pick 3 random points: moveTo(point1), lineTo(point2), lineTo(point3), lineTo(point1)
Here's how the code might look:
import flash.geom.Point;
import flash.geom.Rectangle;
function drawGraph(mc:MovieClip, rect:Rectangle):Void {
//this is a function to draw the graph
//draw the background
mc.beginFill(0xF8F8F8);
mc.moveTo(rect.left, rect.bottom);
mc.lineTo(rect.left, rect.top);
mc.lineTo(rect.right, rect.top);
mc.lineTo(rect.right, rect.bottom);
mc.lineTo(rect.left, rect.bottom);
mc.endFill();
//draw a grid
var unit:Number = 20;
mc.lineStyle(1, 0x0000FF, 20, true, "none", "round", "round");
var i:Number=rect.x;
do {
i=i+unit;
mc.moveTo(i, rect.bottom);
mc.lineTo(i, rect.top);
} while (i<rect.right);
i=rect.bottom;
do {
i=i-unit;
mc.moveTo(rect.left, i);
mc.lineTo(rect.right,i);
} while (i>rect.top);
//draw the axes
mc.lineStyle(2, 0x808080, 100, true, "none", "round", "round");
mc.moveTo(rect.left, rect.bottom);
mc.lineTo(rect.left, rect.top);
mc.moveTo(rect.left, rect.bottom);
mc.lineTo(rect.right, rect.bottom);
}
function randomPoint(rect:Rectangle):Point {
//this is a function which returns a random point within rect
var p:Point = new Point(rect.x+Math.random()*rect.width, rect.y+Math.random()*rect.height);
return p;
}
function drawTriangle(mc:MovieClip, rect:Rectangle):Void {
//this is a function to draw the triangle
// pick 3 random points within rect
var p1:Point = randomPoint(rect);
var p2:Point = randomPoint(rect);
var p3:Point = randomPoint(rect);
//connect the points to make a triangle
mc.lineStyle(3, 0xFF0000, 100, true, "none", "round", "round");
mc.moveTo(p1.x, p1.y);
mc.lineTo(p2.x, p2.y);
mc.lineTo(p3.x, p3.y);
mc.lineTo(p1.x, p1.y);
}
//make the 'graph' clip:
var myGraph:MovieClip = this.createEmptyMovieClip("myGraph", this.getNextHighestDepth());
//define the graph size:
var myRect:Rectangle = new Rectangle(50,50,300,300);
drawGraph(myGraph,myRect);//draw the graph
var myShape:MovieClip = this.createEmptyMovieClip("myShape", this.getNextHighestDepth());//make the 'shape' clip
drawTriangle(myShape,myRect);//draw a random triangle
//add a function to draw a new triangle when the graph is clicked:
myGraph.onRelease = function() {
myShape.clear();//erase the old triangle
drawTriangle(myShape,myRect);//draw a new one
}
You can click the graph to generate a new random triangle.
(source: webfactional.com)
It sounds like you need to know how the drawing API works in Flash. Your question is kind of vague, but this might help to get you started - google "Flash Drawing API" for more information.
var point1:Point = new Point (0, 0);
var point2:Point = new Point (25, -50);
var point3:Point = new Point (50, 0);
var s:Sprite = new Sprite();
s.graphics.lineStyle(1, 0xff0000);
s.graphics.beginFill(0x000000);
s.graphics.moveTo(point1.x, point1.y);
s.graphics.lineTo(point2.x, point2.y);
s.graphics.lineTo(point3.x, point3.y);
s.graphics.lineTo(point1.x, point1.y);
s.graphics.endFill();
s.graphics.lineStyle(0);
s.x = (stage.stageWidth - s.width) / 2;
s.y = ((stage.stageHeight - s.height) / 2) + 50;
addChild(s);
I hope that helps, let me know if you have any questions.
NOTE: This solution is using ActionScript 3. If you need AS2 this won't work, and off the top of my head I don't know how to help but you might just try googling "AS2 Drawing API" or something to that effect.