Is there a Move towards function in three.js - javascript

I am new to three.js. I was wondering if there is a function like move towards from unity in it? A function that we can use to move our object from it's current position to some Vector3.
Thanks.

I actually managed to solve this.
Here it is for anyone else stuck on this.
But you have to make sure that the object is a child of a THREE.Group and you move the THREE.Group instead of the object because the function doesn't behave right if the object's rotation is changed.
var targetPosition = new THREE.Vector3(x,y,z);
var objectToMove;
var group = new THREE.Group();
group.add(objectToMove);
var targetNormalizedVector = new THREE.Vector3(0,0,0);
targetNormalizedVector.x = targetPosition.x - group.position.x;
targetNormalizedVector.y = targetPosition.y - group.position.y;
targetNormalizedVector.z = targetPosition.z - group.position.z;
targetNormalizedVector.normalize()
Then you can use this line anywhere to move the object towards the target position.
group.translateOnAxis(targetNormalizedVector,speed);
This will work similar to the Vector3.MoveTowards function in unity. Just make sure the rotation of the THREE.Group is always set to 0 on x,y and z.

Related

Three.js model, joint not responding to rotation/posiiton command line

//snippet of code below, obviously i'm missing something, but struggling to find any guidance on what. attempting to rotate a parent joint, so that its children (eg. leg, foot) rotates with it. adding the code to the hip appears to do nothing.
//I can only rotate the leg itself, which I don't believe is the correct way to go about it.
Hip = new THREE.Object3D();
Hip.name = "Hip";
scene.add(Hip);
Hip.rotation.x = Math.PI / 2; //this doesnt rotate the joint?
Hip.add(Leg); //adds child (leg) to parent (hip)
// Leg
Leg = createLeg(); //called from a function that returns a custom shape
Leg.name = "Leg";
scene.add(Leg);

Pixi.js how do you use moveTo with an OOP object?

I create a rectangle and a square object with an OOP method.
Next, i would to move my rectangle in an another position. I use the function moveTo.
My rectangle move but from its creation position and not from an absolute position.
What do I have to specify to move this rectangle to x=100,y=100 ?
var container = new PIXI.Container();
var renderer = PIXI.autoDetectRenderer(320, 480,{backgroundColor : 0x1099bb});
document.body.appendChild(renderer.view);
requestAnimationFrame( animate );
var blue= 0x00c3ff
var red = 0xFF0040
var SHAPE={}
SHAPE.geom = function(posx,posy,width,height,color) {
PIXI.Graphics.call(this,posx,posy,width,height,color);
this.beginFill(color);
this.drawRect(posx,posy,width,height)
}
SHAPE.geom.prototype = Object.create(PIXI.Graphics.prototype);
SHAPE.geom.prototype.constructor = SHAPE.geom;
var square=new SHAPE.geom(10,10,10,10,red)
var rect=new SHAPE.geom(200,400,80,30,blue)
rect.moveTo(100,100)
container.addChild(square,rect);
function animate() {
requestAnimationFrame( animate );
renderer.render(container);
}
Check the PIXI docs for moveTo: https://pixijs.github.io/docs/PIXI.Graphics.html#moveTo
It moves the DRAWING position to some coordinates, not the actual already existing object. So if you would use moveTo and after that draw with the graphics object, it should draw starting from that position. At least in theory (I have not used moveTo ever).
You should use the objects .x, .y or .position properties for setting where you want the display object to reside inside parent container. So something like:
rect.x = 100;
rect.y = 100;
or
rect.position = new PIXI.Point(100, 100);
If there are any issues, please let me know and I will make a plunkr for you to give you a working example. I do not have the time for that now unfortunately.
Also in general it is a good idea to make simple examples like this in plunkr, jsfiddle or something equivalent. Then the person answering you can easily modify your code and show you a surely working example. It will be better for both.

Rotating object with Matrix.rotate in snap.svg morphs the object

I'm trying to use snap.svg library to rotate and move my object but I am getting this weird behavior where the object gets morphed.
http://codepen.io/anon/pen/vOwRga
var s = Snap.select("#svg");
var rect1 = s.select("#rect1");
var rect2 = s.select("#rect2");
var rotateMatrix = new Snap.Matrix();
rotateMatrix.rotate(180,302,495);
this.spin = function() {
rect1.animate({transform:'r180,302,160'},5000,function(){
rect1.animate({transform:'r0,302,160'},5000);
});
rect2.animate({transform: rotateMatrix},5000,function(){
rect2.animate({transform: rotateMatrix.invert},5000);
});
}
So here I'm rotating two different rectangles. First one works fine and the second one is where i try to use matrix.
What am I doing wrong? Why is this happening? what is the meaning of life?
In the first one, you are animating a rotation. Snap knows it is a rotation because of the way you have defined it with Snap's special 'r' initialiser.
In the second one you are just passing a matrix that describes a transform from one orientation to another. Snap, and the browser, have no idea that it represents a rotation. So all it is doing is interpolating the values in the matrix.

2D screen position from 3D position using three.js

I have some 3D objects within a rotating parent object.
I'm adding a set of 2D "hotspots" which follow these object's screen position. I got this to successfully convert the child object's position to 2D:
// HOTSPOTS //
var v1,m1,p,hotspotX,hotspotY;
v1 = new THREE.Vector3();
m1 = new THREE.Matrix4();
m1 = childObject.matrixWorld;
v1.setFromMatrixPosition(m1);
p = projector.projectVector(v1, camera1);
hotspotX = (p.x + 1) / 2;
hotspotY = (-p.y + 1) / 2;
The problem is that rather than using the child object's origin as the hotspot location, I'd like to set it relative of it, i.e the hotspot's y might be childObject.y-10. I think this needs to happen prior to converting to matrix. Is there a way to do the same as matrixWorld, but from a vector instead of an object?
I could just create extra empty objects for each hotspot and set their positions exactly where I want them, however seeing as the childObjects are already there I'd rather use those if I can. All previous examples I've found use functions which are now deprecated. Hope this makes sense, I'm new to matrices.
Thanks!

Update an object with the scroll value as the page scrolls?

So I thought this would be easy but thinking about it, I can't figure out a way to pass the changing scroll value into an object?
Here is an example of what I am trying to achieve https://www.fbf8.com/ notice when you scroll the polygonal objects are manipulated based on the scroll value. Yes I am assuming they are using three.js or maybe the plugin I am using FSS.js (might be custom) I'll inspect the source later but thats unrelated it's just an example.
Like I said I am using FSS.js and here is an instance of the FSS.plane
var geometry = new FSS.Plane(1600, 835, 6, 15);
I am trying to figure a way to pass into the constructor a changing value (scrollPos).
So I hope I am making sense now, here is a useless example but should provoke what my angle is.
var pos = 0;
$(document).scroll(function() {
pos = $(document).scrollTop();
});
var geometry = new FSS.Plane(1600, 835, pos, 15);
Try putting the initiation function in your on scroll function
$(document).scroll(function() {
var pos = $(document).scrollTop();
var geometry = new FSS.Plane(1600, 835, pos, 15);
});
I think the code produced by Michael is right. The only thing that need to be done is updating the geometry when you scroll (instead of recreating the object like Ronnel said).
Look into your FSS.Plane object and search for an updatePosition method and call it after pos = $(document).scrollTop();
If this doesn't work, then maybe the scrollTop method always return the same thing. Depends on what you point with document

Categories