In this code I can't remove all children if I delete half of them?? and I got error child is not dignified while i define it? each node has children spheres (nods) and edges (lines) this method delete only nods, why? could any one help me please?
function onMouseClick( e ) {
mouseVector.x = 2 * (e.clientX / containerWidth) - 1;
mouseVector.y = 1 - 2 * ( e.clientY / containerHeight );
var raycaster = projector.pickingRay( mouseVector.clone(), camera ),
intersects = raycaster.intersectObjects( scene.children );
for( var i = 0; i < intersects.length; i++ ) {
//INTERSECTED = intersects[0].object;
INTERSECTED = intersects[i].object;
//obj = intersection.object;
alert(INTERSECTED.id);
/*1-*/ //this
//scene.remove(INTERSECTED);
/*2-*/ //or this
for ( c = 0, cl = INTERSECTED.children.length; c < cl; c ++ ) {
var child = INTERSECTED.children[ c ];
alert(child.id);
//child.parent.remove(obj);
INTERSECTED.remove(child);
//var lin = scene.children[child.id+1];
//r lin = scene.getObjectById(child.id+1, true );
// alert(child.id+1);
// INTERSECTED.remove(scene.children[child.id+1]);
}
//scene.remove(INTERSECTED);
scene.add(INTERSECTED);
animate();
}
}
I think that the problem lies in the fact that you loop an array of which you are changing the length. This has nothing to do with three.js but is a basic (beginners) error you made in your javascript code.
Maybe you should rewrite your code and use a while loop instead:
while( INTERSECTED.children.length > 0 ){
var child = INTERSECTED.children[ 0 ];
INTERSECTED.remove(child);
}
Related
I'm writing an A* pathing script for a game set on a 7x7 grid of tiles with the player always in the middle (tile 24). Zeros are added as a visual and it's actually one array, not a 7x7 2D array.
[00,01,02,03,04,05,06]
[07,08,09,10,11,12,13]
[14,15,16,17,18,19,20]
[21,22,23,24,25,26,27]
[28,29,30,31,32,33,34]
[35,36,37,38,39,40,41]
[42,43,44,45,46,47,48]
The game is server-driven so the player uses relative coordinates. What that means is, if the player moves, tile[0] changes. The short version of that is the player will always move from tile 24, which is the center tile. The grid is hard coded in, but if I post it publicly I'll change the code a little; no problem.
The function should take a destination and find a good path from tile 24 to that square but what it actually does it return "undefined".
If I input 24 I want the game to output an array like this
[18,12,6]
Here's the code:
z = 0;
function pathTo(goal){
var createPath = function (goal){
var createNode = function(i){
this.id = i;
this.g = Infinity;
this.f = Infinity;
this.parent = null;
this.open = null;
};
this.nodes = Array(49);
for(i=0;i<this.nodes.length;i++){
this.nodes[i] = new createNode(i);
}
this.start = this.nodes[24];
this.start.g = 0;
this.currentNodeId = 24;
this.goal = this.nodes[goal];
this.bestPath = null;
};//end createPath
var getBestNeighbor = function(nodeId){
z++
if(z>50){throw z}debugger;
console.log(nodeId);
var getG = function(parentG){
//here you can check the map for water, sand, and ruins penalties
/*
default = 1
path = .9
water = 3
*/
return (parentG + 1);
};
var closeNode = function (node){
node.open = false;
};//end closeNode
var getF = function(startId,endId,g){
if(g>9){
throw g;
}
var startX = startId % 7;
var startY = (startId - startX) / 7;
var endX = endId % 7;
var endY = (endId - endX) / 7;
var h = Math.sqrt( Math.pow((startX - endX) , 2 ) + Math.pow(( startY - endY ), 2 ) );
console.log("Start.id:"+startId+"H:"+h+" Start.id.g:"+g);
return (h + g);
};//end getF
var tracePath = function(tracedNode){
path.bestPath = [];
while(tracedNode != path.start){
path.bestPath.unshift(tracedNode.id);
tracedNode = tracedNode.parent;
}
return path.bestPath;
};//end tracePath
var getNeighborNodeId = function(x,y,currentId){return currentId + (y*7) + x;};//end getNeighborNodeId
if(path.bestPath === null){
var neighborNode = {};
var bestNode = {f: Infinity};
if(nodeId == path.goal.id){//may need to pass path
return tracePath(path.nodes[nodeId]);
}else{
for(x=-1;x<=1;x++){
for(y=-1;y<=1;y++){
var nnId = getNeighborNodeId(x,y,nodeId);
if(nnId==24){debugger}
if( ( (x!=0) && (y!=0) ) ||( (nnId>=0) && (nnId<=48))){
var neighborNode = path.nodes[nnId];
if(neighborNode.open === null){ neighborNode.open = true; }
if(neighborNode.open === true ){//don't check closed neighbors
if(typeof neighborNode === "object"){
neighborNode.parent = path.nodes[nodeId]
debugger;
neighborNode.g = getG(neighborNode.parent.g);
neighborNode.f = getF(neighborNode.id , path.goal.id , neighborNode.g);
if( neighborNode.f < bestNode.f){
bestNode = neighborNode;
}//endif
}//endif
}//endif Note: if the node isn't null or true, it's false.
}
}//endfor
}//endfor - Note: Here we should have the best neighbor
if(bestNode.f == Infinity){
closeNode(path.nodes[nodeId]);//need escape for no possible path
return;
}else{
//bestNode.parent = path.nodes[nodeId];
path.currentNodeId = bestNode.id;
getBestNeighbor(bestNode.id);
}//endelse
}//endelse
}//endif
};//end getBestNeighbor
var path = new createPath(goal);
while(path.bestPath === null){
getBestNeighbor(path.currentNodeId);
}//end while
return path.bestPath;
}//end pathTo
console.log(pathTo(41)); //testing with 6
and a JSFiddle link: https://jsfiddle.net/jb4xtf3h/
It's my first time not just slapping globals everywhere, so it may have a scope issue I'm not familiar with.
Most likely my issue is in the getNeighborId function; I don't think I have anything declaring a good node's parent.
The problem is that it goes NW three times instead of NE three times. That probably means I have a mistake in the getBestNeighbor function where I'm reading a -1 as a 1.
Also I don't think I'm escaping the recursive function correctly.
For some reason, when I put in 41 it gets really confused. This either has to do with how I set G and H which are classically used in A* to record distance traveled on this path and the estimated distance remaining. Specifically the G number is wrong because it's taking bad steps for some reason.
Here is the working code. I didn't implement walls or anything but I do show where you would do that. All you need to do is close all the nodes that are walls before you begin pathing and you can assign movement penalties if you want the AI to "know" to avoid water or sand.
I actually can't pin down a single problem but a major one was the way the statement:
if( ( (x!=0) && (y!=0) ) ||( (nnId>=0) && (nnId<=48))){
was changed to:
if( ( !(x==0 && y==0) && ( nnId>=0 && nnId<=48))){
The intent of this line was to prevent searching the tile you are standing on x,y = (0,0) and also to make sure that the neighbor you want to look at is on the grid (7x7 grid has 49 squares numbered 0-48)
What I was trying to say is "IF X & Y ARE BOTH NOT ZERO" apparently that actually makes it the same as an or statement so if either square was 0 it skipped it and tiles that needed that space were having problems since there were several directions that weren't working.
I hope that helps somebody if they need a nice simple pathing script I tried really hard to make the code readable and I'm not the strongest coder in the world but a working A* script in 100 lines that I think is fairly easy to follow. If you are reading this and you're not familiar with A* pathing what you might need to know is
H is your heuristic value it's an estimation of the remaining distance form a tile. In this code it's under the path object path.nodes[array#].h
G is the distance you've moved so far to get to that square path.nodes[array#].g.
F just adds h+g for the total value. This pseudocode on Wikipedia helped me write it.
var z = 0;
function pathTo(goal){
var createPath = function (goal){
var createNode = function(i){
this.id = i;
this.g = Infinity;
this.f = Infinity;
this.parent = null;
this.open = null;
};
this.nodes = Array(49);
for(i=0;i<this.nodes.length;i++){
this.nodes[i] = new createNode(i);
}
this.start = this.nodes[24];
this.start.g = 0;
this.currentNodeId = 24;
this.goal = this.nodes[goal];
this.bestPath = null;
};//end createPath
var path = new createPath(goal);
var getBestNeighbor = function(nodeId){
var getG = function(parentG){
//here you can check the map for water, sand, and ruins penalties
/*
default = 1
path = .9
water = 3
*/
return (parentG + 1);
};
var closeNode = function (node){
node.open = false;
};//end closeNode
var getF = function(startId,endId,g){
var startX = startId % 7;
var startY = (startId - startX) / 7;
var endX = endId % 7;
var endY = (endId - endX) / 7;
var h = Math.sqrt( Math.pow((startX - endX) , 2 ) + Math.pow(( startY - endY ), 2 ) );
return (h + g);
};//end getF
var tracePath = function(tracedNode){
path.bestPath = [];
while(tracedNode != path.start){
path.bestPath.unshift(tracedNode.id);
tracedNode = tracedNode.parent;
}
return path.bestPath;
};//end tracePath
var getNeighborNodeId = function(x,y,currentId){return currentId + (y*7) + x;};//end getNeighborNodeId
debugger;
z++
if(z>50){throw z}
if(path.bestPath === null){
var neighborNode = {};
var bestNode = {f: Infinity};
if(nodeId == path.goal.id){//may need to pass path
return tracePath(path.nodes[nodeId]);
}else{
for(y=-1;y<=1;y++){
for(x=-1;x<=1;x++){
var nnId = getNeighborNodeId(x,y,nodeId);
if( ( !(x==0 && y==0) && ( nnId>=0 && nnId<=48))){
var neighborNode = path.nodes[nnId];
if(path.nodes[nodeId].parent!=neighborNode){
if(neighborNode.open === null){ neighborNode.open = true; }
if(neighborNode.open === true ){//don't check closed neighbors
if(typeof neighborNode === "object"){
neighborNode.parent = path.nodes[nodeId]
neighborNode.g = getG(neighborNode.parent.g);
neighborNode.f = getF(neighborNode.id , path.goal.id , neighborNode.g);
if( neighborNode.f < bestNode.f){
bestNode = neighborNode;
}//endif
}//endif
}
}//endif Note: if the node isn't null or true, it's false.
}
}//endfor
}//endfor - Note: Here we should have the best neighbor
if(bestNode.f >= 50){
closeNode(path.nodes[nodeId]);//need escape for no possible path
return;
}else{
path.currentNodeId = bestNode.id;
getBestNeighbor(bestNode.id);
}//endelse
}//endelse
}//endif
};//end getBestNeighbor
while(path.bestPath === null){
getBestNeighbor(path.currentNodeId);
}//end while
return path.bestPath;
}//end pathTo
myPath = pathTo(41); //testing with 6
console.log("path2:"+myPath);
I have try a lot of ways to complete this effect,i want to draw a line of mouse down event,and i have seen many other questions but do not have any idea about it,so far i use the Ray caster method of intersectObjects() and get the position of the click,but i do not how to then,Hope someone give me advice,thanks very much.
Here are part of mine code:
event.preventDefault();
mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = -( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
var raycaster=new THREE.Raycaster();
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(objects,true);
console.log(intersects[0].point);//type of intersects[0] is object,one of attribute is point?
yesterday i write some codes and have complete part of my effect. Here are some code:
var clickCount = 0;//initial value
clickCount = clickCount+1;
if(intersects.length>0)
{
switch(clickCount)
{
case 1:
var startPoint=intersects[0].point;//store the first intersect point when the first click
break;
case 2:
var endPoint =intersects[0].point;//store the second intersect point when the second click
break;
}
}
clickCount=1;
var geometry = new THREE.Geometry();
material = new THREE.LineBasicMaterial({color:0xffffff,linewidth:2});
geometry.vertices.push(startPoint);
geometry.vertices.push(endPoint);
line = new THREE.Line(geometry, material);
scene.add(line);
but this is not the final effect what i wanted.this segment lines are all rays set up from the vector(0,0,0). here is the screenshot:
the red line is the effect what i want to implementate. Could anyone figure out the reason?thanks very much.
It's better to remember the first clicked object, then on the next click you will check, if it's the same object or another one, and if it's another one, then draw a line between them.
var intersected, lineObjects = [],
objects = [];
. . .
and in the event handler:
if (intersects.length > 0) {
var found = intersects[0].object;
if (found != intersected) {
if (lineObjects.length > 0) {
var line = lineObj(lineObjects[0].position, found.position);
scene.add(line);
lineObjects[0].material.color.setHex(lineObjects[0].userData.oldColor);
intersected = null;
lineObjects = [];
} else {
found.userData.oldColor = found.material.color.getHex();
found.material.color.set(0x00FF00);
intersected = found;
lineObjects.push(found);
}
} else {
found.material.color.setHex(found.userData.oldColor);
intersected = null;
lineObjects = [];
}
}
I've made a jsfiddle example. Look at onMouseDown() function. All the things I described above are there.
I create a panorama has a compass in the middle, the compass is pointing towards the top center of the image, initially.
Now I want to move the compass with respect to this point, since it is a 360 panorama, it creates an adjacent duplicate. So what I wanted is to point the compass to the point to whichever point is closer as you move from left to right or right to left.
Here is the what I have done so far, which doesn't behave like what I wanted.
So here is the code for that: https://gist.github.com/joeyhipolito/8678bf35dba7795de4d5
What I did is that I created two points:
points.push({
x: target.offset().left + (windowWidth) / 2,
y: target.offset().top
});
points.push({
x: (target.offset().left + (windowWidth) / 2) + (common.width / 2),
y: target.offset().top
});
And then try to calculate which points is closer to the reference by pythagorean theorem
var closestPoint = points[0];
var closestValue = Math.sqrt(Math.pow(points[0].x, 2) + Math.pow(points[0].y, 2));
for (var i = 1; i >= points.length; i++) {
var z = Math.sqrt(Math.pow(points[i].x, 2) + Math.pow(points[i].y, 2));
if(z < closestValue) {
closestPoint = points[i];
closestValue = z;
}
};
What do you think I am missing out?
You seem to have an issue with the control of your for loop. This loop:
for (var i = 1; i >= points.length; i++) {
};
(note the exit condition) does not run, because 1 (initial value of i) is immediately below the array's length, which is presumably at least 2. On the other hand, if the array length was at most 1, then this loop will never terminate, as i will keep increasing, and the i>=length statement remains true.
You probably want to change that exit condition to i<=length, then the minimum-finding logic should be fine.
Change
// ↓↓
for ( var i = 1; i >= points.length; i++ ) {
// ...
};
to
// ↓
for ( var i = 1; i < points.length; i++ ) {
// ...
};
Another way to do this is using Array.reduce(). It may not be as quick, but it may be more semantic:
function distFromOrigin( point ) {
return Math.sqrt( Math.pow( point, 2 ) + Math.pow( point, 2 ) );
}
var closestPoint = points.reduce(
function( closestPoint, currPoint, index, array ) {
var currDist = distFromOrigin( currPoint ),
closestDist = distFromOrigin( closestDist );
if ( currDist < closestDist ) {
return currPoint;
} else {
return closestPoint;
}
}
);
Is there a reason why server side usage of three.js 's collision detection should be different from the client side usage? We are using the same scene with the same setup client and server side.
The thing which we are trying todo is determine on the server side if there is collision, with the world. To make this simple we only use 2 boxes for our world. The code used is taken from Lee Stemkoski collision detection example (for which we thank him - it is excellent and clear).
The client side code runs smooth and without trouble, but the serverside code, which is initiated exactly the same way does not detect collisions.
In our demo the player uses his arrows to move. this movement is sent to the server, which has exactly the same scene as the client. Then the transformations are applied (rotations, position changes etc) and then these new position are sent back. The server and client are in sync up to here. However the client detects the hits with our objects in the world (2 boxes) and the server does not.
Clientside:
socket.on("update", function(data){
var delta = clock.getDelta(); // seconds.
var moveDistance = 200 * delta; // 200 pixels per second
var rotateAngle = Math.PI / 2 * delta; // pi/2 radians (90 degrees) per second
if( data.type == "rot" ){
MovingCube.rotation.x = data.x;
MovingCube.rotation.y = data.y;
MovingCube.rotation.z = data.z;
}
if( data.type == "pos" ){
MovingCube.position.x = data.x;
MovingCube.position.y = data.y;
MovingCube.position.z = data.z;
}
var originPoint = MovingCube.position.clone();
for (var vertexIndex = 0; vertexIndex < MovingCube.geometry.vertices.length; vertexIndex++){
var localVertex = MovingCube.geometry.vertices[vertexIndex].clone();
var globalVertex = localVertex.applyMatrix4( MovingCube.matrix );
var directionVector = globalVertex.sub( MovingCube.position );
var ray = new THREE.Raycaster( originPoint, directionVector.clone().normalize() );
var collisionResults = ray.intersectObjects( collidableMeshList );
if ( collisionResults.length > 0 && collisionResults[0].distance < directionVector.length() )
console.log(" Hit ");
}
})
serverside code
socket.on("update", function(data){
console.log("updating location");
var delta = 0.1 ;//clock.getDelta(); // seconds.
var moveDistance = 200 * delta; // 200 pixels per second
var rotateAngle = Math.PI / 2 * delta; // pi/2 radians (90 degrees) per second
if( data == "A" ){
MovingCube.rotation.y += rotateAngle;
socket.emit("update",{"type":"rot","x":MovingCube.rotation.x,"y":MovingCube.rotation.y,"z":MovingCube.rotation.z});
}
if( data == "D" ){
MovingCube.rotation.y -= rotateAngle;
socket.emit("update",{"type":"rot","x":MovingCube.rotation.x,"y":MovingCube.rotation.y,"z":MovingCube.rotation.z});
}
if ( data == "left" ){
MovingCube.position.x -= moveDistance;
socket.emit("update",{"type":"pos","x":MovingCube.position.x,"y":MovingCube.position.y,"z":MovingCube.position.z});
}
if ( data == "right" ){
MovingCube.position.x += moveDistance;
socket.emit("update",{"type":"pos","x":MovingCube.position.x,"y":MovingCube.position.y,"z":MovingCube.position.z});
}
if ( data == "up" ){
MovingCube.position.z -= moveDistance;
socket.emit("update",{"type":"pos","x":MovingCube.position.x,"y":MovingCube.position.y,"z":MovingCube.position.z});
}
if ( data == "down" ){
MovingCube.position.z += moveDistance;
socket.emit("update",{"type":"pos","x":MovingCube.position.x,"y":MovingCube.position.y,"z":MovingCube.position.z});
}
var originPoint = MovingCube.position.clone();
for (var vertexIndex = 0; vertexIndex < MovingCube.geometry.vertices.length; vertexIndex++){
var localVertex = MovingCube.geometry.vertices[vertexIndex].clone();
var globalVertex = localVertex.applyMatrix4( MovingCube.matrix );
var directionVector = globalVertex.sub( MovingCube.position );
var ray = new THREE.Raycaster( originPoint, directionVector.clone().normalize() );
var collisionResults = ray.intersectObjects( collidableMeshList );
if ( collisionResults.length > 0 && collisionResults[0].distance < directionVector.length() )
console.log(" Hit ");
}
})
Any help would be great. This has been eating my time for 2 weeks now, there is no error message and i cannot figure out what it is that is going wrong.
Floating point calculations can produce different results on different machines, let me try to find a good article for you.
Here you go, Floating point determinism
Hope it helps
Actually the real problem here is that your server side code probably does not call the render loop from threejs, (which would break of course)
However, the render loop does some additional work for you, it calls the method updateMatrixWorld() on each object -
So serverside, just before doing your raytrace (which uses the world matrix and not the actual position) - just be sure to call
your_objects_you_want_to_raytrace.updateMatrixWorld();
before you do the actual raytrace.
in your case, MovingCube.updateMatrixWorld();
I'm createing a very basic HTML5 game but I can't seem to get the collision detection to work correctly. When a bullet collides with a enemy the bullet is set alive variable is set to false, this means it is not draw and isn't used for collision detection, but it still seems it is. Here is my collision detection method
//Collision detection between bullet and enemy
for (var j = 0; j < enemies.length; j++ )
{
for (var i = 0; i < bullets.length; i++ )
{
if( pointInRect( bullets[i].xPos, bullets[i].yPos, enemies[j].xPos, enemies[j].yPos, 32, 32 ) && ( bullets[i].alive == true ) )
{
bullets[i].alive = false;
enemies[j].xPos = -100;
}
}
}
But when it does collides with an enemy sometimes, and only sometimes the bullet will just continue. can anyone see the problem? I can give some more code if needed.
Canvas
When a bullet was created. It used a recycle system that someone helped me with on stackoverflow. but we forgot to do the check on the first creation, here is the code
for (var i = 0; i < bullets.length; i++ )
{
if ( ! bullets[i].alive && ! bulletDone )
{
bulletDone = true;
bullets[i] = new Bullet( player.xPos + 14, player.yPos);
console.log( "Bullet created" );
}
}
if ( ! bulletDone )
{
bullets[bullets.length] = new Bullet( player.xPos + 14, player.yPos);
console.log( "Bullet created" );
}
Basically the line
if ( ! bullets[i].alive && ! bulletDone )
was
if ( ! bullets[i].alive)
So even if a bullet was not alive, it would still create a new bullet and then spawn two bullets.