I was coding a simple shape-collision-detector, but I noticed the rectangle which I move using the mouse vanishes in some window's areas.
I can't figure out why.
Here you can see the video and below the code I used.
Any advice?
Rectangle r = new Rectangle();
r.setWidth(150);
r.setHeight(150);
Group root = new Group(r, e, boh);
Scene scene = new Scene(root, 1000, 1000);
scene.setOnMouseDragged(ev -> {
r.setX(ev.getX() - r.getWidth() / 2);
r.setY(ev.getY() - r.getHeight() / 2);
});
I solved by placing another Rectangle as background.
Related
I'm working on a game in Xamarin. I have a plane that I want to fly from one side of an arc to the other while rotating the plane so the plane stays parallel to the arc.
Any suggestions?
Update
I was able to get this to work using a combination of CCBezierTo and CCRotateTo.
As I mentioned in my update I was able to accomplish this by using a combination of CCBezier and CCRotateTo.
var duration = 5.0f;
mysprite.RunActionAsync(new CCBezierTo(duration, new CCBezierConfig()
{
ControlPoint1 = new CCPoint(180, 200),
ControlPoint2 = new CCPoint(650, 600),
EndPosition = new CCPoint(1130, 200)
}));
mysprite.RunActionAsync(new CCRotateTo(duration, 90));
The ControlPoint2 is the top of the arc.
I created a scene with multiple objects in the canvas element with ThreeJS. I now want to change the material color of an object if the user clicks on it.
Excerpt of my Angular 5 component, which holds all the ThreeJS content:
public onMouseDown(event: MouseEvent) {
console.log("onMouseDown");
event.preventDefault();
var rayCaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
mouse.x = (event.clientX / this.renderer.domElement.clientWidth) * 2 - 1;
mouse.y = -(event.clientY / this.renderer.domElement.clientHeight) * 2 + 1;
rayCaster.setFromCamera(mouse, this.camera);
var intersects = rayCaster.intersectObjects(this.scene.children);
console.log("Scene has " + obj.length + " objects");
console.log(intersects.length + " intersected objects found");
intersects.forEach((i) => {
i.object.material =
new THREE.MeshBasicMaterial({color: 0xf1f11f});
});
this.render();
}
The problem is that the mouse coordinates are not correct, due to the distance between canvas element and the document outer edge. Whenever I click in the scene, an object right of the mouse will get the new material color.
Some information:
this.renderer.domElement.clientWidth holds the width of the canvas element
How to calculate the correct mouse coordinates if the canvas element isn't full screen?
If your flow is broken (your container is floated or manually positioned), then clientX/clientY will report "bad" values (relative to the page, rather than to the container like you might expect). The properties offsetX/offsetY account for this by reporting values relative to the container on which the event was fired.
According to MDN, support is limited, but my testing just now (01/22/2018) showed the latest versions of Chrome, Firefox, Edge, and IE all reported the correct values*. Just note that some browsers report integer values, while others may report double values.
*This may not hold true for Safari or mobile browsers. YMMV.
I am trying to animate a figure and adding a health bar over it. I created the figure from a sprite (new PIXI.sprite()) and the health bar from a graphics object (new PIXI.Graphics()).
I am able to move the sprite by setting its X,Y coordinates, but when I do the same with the Graphics object it is always displaced, it looks like its origin is the current position of the sprite. See the following picture. The health bar should be above the figure.
var app = new PIXI.Application(windowWidth, windowHeight, {backgroundColor: 0x1099bb});
var prey = new PIXI.Sprite(texturePath);
var healthBar = new PIXI.Graphics();
healthBar.beginFill(0x00BB00);
healthBar.lineStyle(1, 0x000000);
healthBar.drawRect(prey.x - spriteLength, prey.y - spriteLength, spriteLength, 5);
prey.energyBar = healthBar;
app.stage.addChild(prey);
app.stage.addChild(healthBar);
prey.energyBar.position.set(prey.x,prey.y);
How can I set the position of the health bar to be right above the figure?
A better way to do this would be to have the healthbar as a child of the prey Sprite itself. As an example (bits you've already solved missed out)
var prey = new PIXI.Sprite( texturePath );
var heathbar = new PIXI.Graphics();
healthbar.y = -100;
prey.addChild( healthbar );
app.stage.addChild( prey );
Now, that the health bar is a child of your prey Sprite, when you move the prey Sprite around, the healthbar will move with it (which I presume is what you would want in your situation).
Setting the initial coords of the health bar to (0,0) fixed the issue.
healthBar.drawRect(0, 0, spriteLength, 5);
I'm new in THREE.js.
I'm trying to get 3D coordinates of point on mouse click on the object (not simple objects: Box, Sphere,..) in Canvas.
In detail, I'm working with 3D objects viewer - I have camera (THREE.PerspectiveCamera), mouse controls (rotate, zoom, move), add/remove objects (my own object, loaded using loaders for THREE.js) in scene,.. And I want to add a function, which gets 3D coordinates for clicked point in 3D.
Exactly, I want coordinates of the end point of a ray - begining from mouse click on the camera_near_window and ending to the object's point, I've clicked on..
I tried a lot of ways to do it:
Getting coordinates of point on z=0 plane -- It works fine, but it is on z=0 plane and it is not that I need, cause I have OrbitControls..
THREE.js example - clickable objects -- It uses CanvasRenderer (not WebGLRenderer) and works for a little objects (but works for my project): browser crashes when I load many objects (CanvasRenderer needs 5x more memory then WebGLRenderer).
"How to get object in WebGL 3d space from a mouse click coordinate" - I tried this one too, but raycaster.intersectObjects found nothing, intersects was an empty array (maybe it works for only simple objects like box, sphere,..).
Can anyone show me the demo code which gets 3D point coords for clicked point of clicking object in 3D, please..?
So, as I think this question is useful for someone, I'll answer it myself (I'll write my resolve):
var renderer, canvas, canvasPosition, camera, scene, rayCaster, mousePosition;
function init() {
renderer = new THREE.WebGLRenderer({ antialias: false });
canvas = renderer.domElement;
canvasPosition = $(canvas).position();
camera = new THREE.PerspectiveCamera(20, $(canvas).width() / $(canvas).height(), 0.01, 1e10);
scene = new THREE.Scene();
rayCaster = new THREE.Raycaster();
mousePosition = new THREE.Vector2();
scene.add(camera);
var myObjects = new THREE.Object3D();
// myObjects.add( your object );
// myObjects.add( your object );
// myObjects.add( your object );
myObjects.name = 'MyObj_s';
scene.add(myObjects);
};
function getClicked3DPoint(evt) {
evt.preventDefault();
mousePosition.x = ((evt.clientX - canvasPosition.left) / canvas.width) * 2 - 1;
mousePosition.y = -((evt.clientY - canvasPosition.top) / canvas.height) * 2 + 1;
rayCaster.setFromCamera(mousePosition, camera);
var intersects = rayCaster.intersectObjects(scene.getObjectByName('MyObj_s').children, true);
if (intersects.length > 0)
return intersects[0].point;
};
I have a simple rectangular wall and I like to place multiple window holes on it. It always works great for the first hole, but as soon as I add additional holes the polygon becomes messed up. See the images below to see what I'm talking about.
How can I draw holes properly in Three.js?
The right hole is not drawn properly.
After increasing the height of the right hole the entire wall mesh becomes halfcut.
Here is a sample code that causes above problem:
var shape = new THREE.Shape();
shape.moveTo(0, 0);
shape.lineTo(1, 0);
shape.lineTo(1, 1);
shape.lineTo(0, 1);
var windowHole = new THREE.Path();
windowHole.moveTo(0.14999999888241292, 0.7758620689655171)
windowHole.lineTo(0.4999999962747097, 0.7758620689655171)
windowHole.lineTo(0.4999999962747097, 0.3448275862068965)
windowHole.lineTo(0.14999999888241292, 0.3448275862068965)
shape.holes.push(windowHole);
windowHole = new THREE.Path();
windowHole.moveTo(0.5999999955296517, 0.7758620689655171)
windowHole.lineTo(0.7499999944120646, 0.7758620689655171)
windowHole.lineTo(0.7499999944120646, 0.6034482758620688)
windowHole.lineTo(0.5999999955296517, 0.6034482758620688)
shape.holes.push(windowHole);
var mesh = new THREE.Mesh(new THREE.ShapeGeometry(shape), this.material);
root.add(mesh);
The above code results in a warning:
Warning, unable to triangulate polygon!
at public_html/libs/three.js:27785
It turned out that this was a bug that is now fixed in version 66dev.
The bug was reported and discussed here:
https://github.com/mrdoob/three.js/issues/3386
The fixed version that I'm using now is developer built version 66dev committed at Jan 27th, 2014 here:
https://github.com/mrdoob/three.js/tree/dev/build
I assume this fix will be merged with the main three.js soon, but until then you can use the link above.
Some code might help. if possible link your code in jsfiddle...
just you need to change the order of the path creation... refer the link... http://jsfiddle.net/ebeit303/BuNb2/
var shape = new THREE.Shape();
shape.moveTo(-5, -5);
shape.lineTo(-5, 5);
shape.lineTo(5, 5);
shape.lineTo(5, -5);
shape.lineTo(-5, -5);
var windowHole = new THREE.Path();
windowHole.moveTo(-2,-2);
windowHole.lineTo(0,-2);
windowHole.lineTo(0,0);
windowHole.lineTo(-2,0);
windowHole.lineTo(-2,-2);
shape.holes.push(windowHole);
windowHole1 = new THREE.Path();
windowHole1.moveTo(3,3);
windowHole1.lineTo(4,3);
windowHole1.lineTo(4,4);
windowHole1.lineTo(3,4);
windowHole1.lineTo(3,3);
shape.holes.push(windowHole1);
var geometry = new THREE.ShapeGeometry( shape );
var material = new THREE.MeshBasicMaterial({color:0xffccff, side:2, overdraw:true} );
var mesh = new THREE.Mesh(geometry, material );
group.add(mesh);
Have a look on http://learningthreejs.com/data/constructive-solid-geometry-with-csg-js/. Whatever your codes are it will help you in doing it better. Substraction, addition, union, intersection everything is possible.