Three JS Creating 3D block start position end position - javascript

Im trying to simulate laser shooting from moving object to another moving object.
If I have two Vector3 coordinates (x,y) in move and i need to render 3D Object start from X Finnish in Y (laser).
Something like this.
I have fixed height and depth of object, i dont know a length, i can get it by x.distanceTo(y). Length will be variable (objects are moving).
It is possible to draw object form X to Y?
What is the best practice?

You can just use a cube and compute it's position, rotation and scale like this:
cube.position.addVectors( x, y ).divideScalar( 2 ); // place cube in the middle
cube.lookAt( y ); // rotate cube so it faces the end position
cube.scale.z = x.distanceTo( y ); // stretch cube

Related

Send object backwards down its -z axis [duplicate]

I'm trying to move a cube in three.js based on its rotation but not sure on how to go about it.
As of now I can rotate the cube's z-rotation with the A & D keys. And with the W key I would like it to move forward relative to its rotation.
From 2D I would so something along the lines of:
float angle = GradToRad(obj.rotation);
obj.x = obj.x + cos(angle) * velocity;
obj.y = obj.y + sin(angle) * velocity;
Here's an image of the current implementation.
How can I apply something similar in three.js?
Objects can be considered to be facing their positive-Z axis. So to move an object forward, relative to it's own coordinate system, you can use
Object3D.translateZ( distance );
three.js r.57
It might be easiest to express both rotation and translation in a single (homogenous projective) 4×4 matrix. The Object3D.matrix member in three.js already does that, although you might have to set matrixAutoUpdate to false to use that directly. Then you can move use the translate method to move the object in its own reference frame.
Your 2D method is exactly how I did it in three.js. For the Y position I'm using a terrain collision technique (which still needs work);

Three.js - rotating an Object3D around an axis

I'm trying to rotate a mesh loaded into an Object3D using OBJMTLLoader.
var obj = new THREE.Object3D();
// loading and stuff
obj.rotation.y += 0.1; //inside the update function
This works as it should, but only for y and z axes. Using the same code, but for the x axis yields the same result as rotating it around the z axis, but clockwise instead of counterclockwise.
Unfortunately, I need to rotate it around the x axis.
var xAxis = new THREE.Vector3(1,0,0);
obj.rotateOnAxis( xAxis, 0.1 );
This does rotate the object around the x axis.
However, I want to tween the rotation of the object, so I need a way to explicitly change the angle an object is rotated by, instead of rotating it for a specific amount.
Any ideas why obj.rotation.y and obj.rotation.z work properly, but obj.rotation.x doesn't?
Upon loading the mesh (before trying to rotate it around the x axis), I rotated it by 90 degrees around the y axis. Because of the default Euler order (which is XYZ), the local axes no longer corresponded to the world axes.
obj.eulerOrder = 'YXZ';
Using the above line of code before rotating the mesh around the y axis solved the problem.
A pretty good explanation of Euler order can be found here.

Raycasting direction relative to global coordinate system , not local

I have used raycasting method to detect different colored strips on either side of the track and keeping my car object in position by calculating the distance. But the problem is the ray always points in the constant direction in the global coordinate system and doesnt change with the movement(rotation) of car object. It could have if the ray direction were in the reference frame of car which I am not able to figure out how to do. Currently I am doing this
var ray = new THREE.RayCaster(car.position, new THREE.Vector3(-1,0,0),0,50);
The movement of car is in the X-Z plane
Can someone point out a solution ?
Your ray-casting is being done in world-space, so you need the correct world-space vector.
I am assuming the car is a child of the scene, and not some other rotated object.
To construct a unit vector that points in the direction the car is heading in the world coordinate system, first construct a unit vector that points in the direction the car is heading in it's local coordinate system -- whatever that happens to be in your case:
var vector = new THREE.Vector3( -1, 0, 0 );
Then apply the same rotation to that vector as is applied to the car.
vector.applyQuaternion( car.quaternion );
EDIT: Updated to three.js r.66

Three.js lookat seems to be flipped

I have a demo of what I mean here: Test Site or (Backup)
For some reason, even though the mouse vector is correct my object is rotated by 90 degrees always in favor of the positive Y axis. The only call that this could be going wrong, as far as I can tell, in is the call: ship.mesh.lookAt(mouse);, I call this every time the screen is animated.
Can anyone tell me what to do to fix this and why it is doing it?
object.lookAt( position ) orients the object so that the object's local positive z-axis points toward the desired position.
Your "ship's" front points in the direction of the local positive y-axis.
EDIT:
To re-orient your geometry, apply a matrix right after the geometry is created, like so:
geometry.applyMatrix( new THREE.Matrix4().makeRotationX( Math.PI / 2 ) );

How do I calculate the rotation along the y-axis given a 2D direction vector?

I'm making a 3D game, and I need the player mesh always facing the back of the camera. I already figured out how to get a 2D speed vector (direction along the x-z plane), but now I need to rotate the mesh in the speed vector's direction...
Basically, every mesh has a .rotation property, and that property is a 3D vector. I am only interested in rotation over the y-axis, that's the one that is perpendicular to the surface (x-z) plane.
The rotation doesn't use degrees, but radians, so I thought it would be something like this:
mesh.rotation.y = (mesh.direction.x - mesh.direction.z)*Math.PI*2;
But this doesn't seem to cut it...
The direction/speed is a, as a said, 2D vector, and it consist of real numbers between -1 and 1. At all times sqrt(x*x + y*y) == 1, so it forms a "circle", this is because speed needs to be equal in all directions, obviously.
The speed vector changes only when I drag the mouse over the screen, and so should the rotation, and it is calculated like this:
var c = Math.sqrt(cameraPos.x*cameraPos.x + cameraPos.z*cameraPos.z); //This is the distance from the camera to the mesh, which is at (0, 0) for simplicity of this presentation.
var rat = 1/c;
mesh.direction.x = cameraPos.x*rat; //Direction vector = the speed vector
mesh.direction.z = cameraPos.z*rat;
If I understand correctly, atan2 will do the trick:
mesh.rotation.y = Math.atan2(mesh.direction.z, mesh.direction.x)
Result is in radians. It basically calculates the angle between the vector and X axis. You might need to switch parameters or use minus operator here or there.

Categories