I have TWEEN
rotate = new TWEEN.Tween({ vertical:min }).to({ vertical:max },3000000).easing(TWEEN.Easing.Linear.None).start()
And I want to start from half, or another part. Is it possible?
Related
Essentially in my scene I have an entity with laser controls and a raycaster in the following structure:
<a-scene>
<a-entity laser-controls raycaster ...>
<!--<a-entity id="inventory" ...> Could be inserted here-->
</a-entity>
<!--<a-entity id="inventory" ...> Could be inserted here-->
</a-scene>
My objective is to summon the inventory at the current x,y position of the laser line, I already have access to the point corresponding to the end of the laser line. I don't want the inventory to move from that position again. If I set the inventory to be the child of the raycaster it always moves with the line. If I set the inventory to be the child of the scene whilst setting it's position to the world coordinates of the point where it's supposed to be, it just does not work.
Approaches I've tried and failed:
Starting the inventory as raycaster child and changing parent to the scene and applying the world matrix of the raycaster
Keeping inventory as raycaster child, capturing it's initial world matrix and setting that same world matrix on every tick
And finally, my current approach (with code) that still fails
1.Convering the local coordinates of the line end to world coordinates
2.Appending inventory to scene
3.Converting the world coordinates from line end into local coordinates of the scene
4.Applying the position in 3 to the inventory
let v = this.emptyVec
v.copy(this.raycaster.components.line.data.end)
this.raycaster.object3D.localToWorld(v);
this.el.appendChild(inventoryNode) //this.el is the scene
this.el.object3D.worldToLocal(v);
const {x,y} = v
inventoryNode.object3D.position.set(x,y,inventoryZDistance)
TLDR: How do I set an entity to the position of the raycaster line end at the point in time I add it to the scene and have it remain in that position forever
Ended up finding a solution. This is running on the event listener for a controller click event (point being it doesn't need to run on every tick, it's run only once)
Created a dummy node that is a child of the raycaster and set it's position to the x,y coordinates of the line end and whatever z coordinate I want
Appended the proper inventory node to the scene
Set the position of the inventory from the world matrix of the dummy node with the setFromMatrixPosition() method
let dummyNode = document.createElement("a-entity")
dummyNode.setAttribute("id", "dummyinventory")
dummyNode.setAttribute("visible", false) //maybe unnecessary
const {x,y} = this.raycaster.components.line.data.end
dummyNode.object3D.position.set(x,y,inventoryZDistance)
this.raycaster.appendChild(dummyNode)
inventoryNode.setAttribute('look-at', "[camera]") //if you want inventory to face the camera
this.el.appendChild(inventoryNode)
setTimeout(()=>{
let newMatrix = dummyNode.object3D.matrixWorld
inventoryNode.object3D.position.setFromMatrixPosition(newMatrix)
},50) //give the world matrix of dummyNode some time to update, with no timeout sometimes fails
The same thought process could be applied if one wanted to spawn some entity where the user is looking by having the dummy node be a child of the camera instead of the raycaster
I'm fairly new to three.js and trying to get a better understanding of ray casting. I have used it so far in a game to show when an object collides with another on the page which works perfectly. In the game I'm building this is to take health from the hero as it crashes into walls.
I am now trying to implement a target which when hovered over some objects it will auto shoot. However the target only registers a target hit once the object passes through the target mesh rather than when its ray is cast through it.
to further detail this, the ray is cast from the camera through the target, if the target is on a mesh (stored as an object array) then I want it to trigger a function.
within my update function I have this:
var ray = new THREE.Raycaster();
var crossHairClone = crossHair.position.clone();
var coards = {};
coards.x = crossHairClone.x
coards.y = crossHairClone.y
ray.setFromCamera(coards, camera);
var collisionResults = ray.intersectObjects( collidableMeshList );
if ( collisionResults.length > 0 ) {
console.log('Target Hit!', collisionResults)
}
The console log is only triggered when the collidableMeshList actually touches the target mesh rather than when it is aiming at it.
How do I extend the ray to pass through the target (which I thought it was already doing) so that if anything hits the ray then it triggers my console log.
Edit
I've added a URL to the game in progress. There are other wider issues with the game, my current focus is just the target ray casting.
Game Link
Many thanks to everyone who helped me along the way on this one but I finally solved it, only not through the means that I had expected to. Upon reading into the setFromCamera() function it looks like it is mainly used around mouse coards which in my instance was not what I wanted. I wanted a target on the page and the ray to pass through this. For some reason my Ray was shooting vertically up from the centre of the whole scene.
In the end I tried a different approach and set the Rays position and direction directly rather rely on setting it from the cameras position.
var vector = new THREE.Vector3(crossHair.position.x, crossHair.position.y, crossHair.position.z);
var targetRay = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
var enemyHit = targetRay.intersectObject( enemy );
if ( enemyHit.length > 0 ) {
console.log('Target Hit!', targetRay)
}
I'll leave this up for a while before accepting this answer in case anyone has a better approach than this or has any corrections over what I have said in regards to setFromCamera().
I have a face detection app, and I want a character's head to rotate according to the detected face's pose.
I've managed to get the rotation of the detected face in the form of a quaternion, but I'm unsure about how I'm supposed to translate the data from the quaternion into 3D points for the reference points of the rigged character which I believe will decide the rotation.
Let's say I have this character: http://i.imgur.com/3pcRoYx.png
One solution could be to just cut off the head and make it an own object and then set the rotation of that object according to the quaternion, but I don't want that. I want an intact character.
Is it possible to move the reference points in the head with the data from a quaternion? Or have I gotten it wrong how rigged characters turn their heads? I haven't animated before.
You can apply rotation to a single bone. Get that bone in your script. Keep a var in your class to store the last quaternion in and every update, compare it to that and rotate by the different. I don't have the actual editor here but try this psuedocode.
class NeckRotator {
public GameObject Neck;
private Quaternion LastFace;
void Start(){
LastFace = Neck.transform.Rotation;
}
void Update(){
var DetectedFace = ... // Whatever you do to get this
var Change = Quaternion.Inverse(DetectedFace) * LastFace; // Found this online real quick
Neck.Rotate(Change);
LastFace = Neck.transform.Rotation;
}
}
I've done something like that before to rotate a neck of an NPC to look at a player. It should work for your deal as well.
I want to get the exact intersection point of a ray and a sprite. But when I do this:
var ray = new THREE.Raycaster( camera.position, vector.sub(camera.position ).normalize());
var sprite = new THREE.Sprite(spriteMaterial);
var intersect = ray.intersectObject(sprite);
then intersect.point is just the position of the sprite, instead of the exact point that I need.
I need this so I can check if the part of the texture that has been clicked is visible or not. (Alpha value)
Is there a way to get the exact intersection, or is there a better way to achieve my goal?
This is not currently supported. See Raycaster.js if you want to try to hack your own solution. Sprites can be rotated (turned on their side), so the solution is not trivial.
A reasonable work-around is to create a Mesh from a PlaneGeometry and set
mesh.quaternion = camera.quaternion.
three.js r.64
I've just started learning THREE and have been messing about with the three.js example of controllable MD2 characters to try and fashion it into a 3rd person shooter kind of game. I've been trying to write a simple algorithm for the enemy characters and I'm pretty sure that ray-casting would be ideal.The whole idea is that the enemies should stop rotating once they're facing the player. But Here's the problem that's giving me sleepless nights! :
Let's say, the enemy object is the origin for the ray caster ray. No matter what direction I set for the direction of that ray ( even, for example (1,0,0) - the positive x-axis), the ray's direction is always pointing towards the center of the scene!!!
Please help! haven't been able to find any Example online for this kind of use for the ray caster (apart from collision detection which I really don't need at the moment).
If all you want is for enemies to stop rotating when they are looking at the player, I would consider just checking the direction between them, as it's a lot faster than casting a ray to see if it intersects:
// Assuming `enemy` is a THREE.Mesh
var targetDir = enemy.position.clone().sub(player.position).normalize();
var currentDir = (new THREE.Vector3()).applyMatrix4(enemy.matrixWorld).sub(enemy.position).normalize();
var amountToRotate = currentDir.sub(targetDir);
var offset = amountToRotate.length();
Then rotate each axis no more than the value for that axis in amountToRotate if offset is greater than some threshold.
That said, here is how you use a Raycaster, given the variables above:
var raycaster = new THREE.Raycaster(enemy.position, targetDir);
var intersections = raycaster.intersectObject(player);
Note that if you are running any of the above code in an animation loop, it will create a lot of garbage collection churn because you are constantly creating a bunch of new objects and then immediately throwing them away. A better pattern, which is used a lot in the library itself, is to initialize objects once, copy values to them if you need to, and then use those copies for computation. For example, you could create a function to do your raycasting for you like this:
var isEnemyLookingAtPlayer = (function() {
var raycaster = new THREE.Raycaster();
var pos = new THREE.Vector3();
return function(enemy) {
raycaster.ray.origin.copy(enemy.position);
raycaster.ray.direction.copy(pos.copy(enemy.position).sub(player.position).normalize());
return !!raycaster.intersectObject(player).length;
};
})();