I am currently developing a game using three.js and despite being new to this field, I have extensively studied collision documentation. To handle collisions between my boat (inside a cube) and the islands (contained in cubes), I implemented raycasting. Here is how I approached solving the issue:
collision2 = false;
var originPoint = MovingCube.position.clone();
clearText();
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() ) {
appendText(" Hit "),
collision2 = true;
}
}
if ( keyboard.pressed("W") ){
obj.translateZ( moveDistance ),
if (collision2==true){
obj.translateZ( -moveDistance*4 ),
}
}
if ( keyboard.pressed("S") ){
obj.translateZ( - moveDistance ),
if (collision2==true){
obj.translateZ( moveDistance*4 ),
}
}
if ( keyboard.pressed("A") ){
obj.rotateOnAxis( new THREE.Vector3(0,1,0), rotateAngle),
if (collision2==true){
obj.rotateOnAxis( new THREE.Vector3(0,1,0), -rotateAngle*3),
}
}
if ( keyboard.pressed("D") ){
obj.rotateOnAxis( new THREE.Vector3(0,1,0), -rotateAngle),
if (collision2==true){
obj.rotateOnAxis( new THREE.Vector3(0,1,0), rotateAngle*3),
}
}
To ensure that my ship does not collide with the rays produced by the raycasting, I decided to multiply "moveDistance" and "rotateAngle" by 3. Although this method is mostly effective, there are situations where the ship either gets stuck or penetrates the island. I am considering adjusting the ship's position slightly when a collision occurs, based on the face of the cube it hits. For instance, if the ship collides with the cube's positive X-axis face, I would subtract pixels from the cube's position to move the boat away. I am unsure how to implement this solution effectively. How can I address collision issues with walls without using a physics engine for now? Thanks in advance for any assistance!
https://i.sstatic.net/akiCm.jpg
EDIT:
I am interested in determining which side of the cube (island) the ship collided with. For each face that the ship collides with, I want to move the boat 40 pixels backwards (obj.position = +40). This approach should prevent the boat from entering the cube. I came across an example that I believe could be helpful, but I have yet to fully grasp its implementation.
Here is the cube containing the boat:
var mats2 = [];
var cubeGeometry = new THREE.CubeGeometry(25,135,121,10,10,10);
for (var i = 0; i < 6; i ++) {
mats2.push(new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe:true } ));
}
MovingCube = new THREE.Mesh( cubeGeometry, mats2 );
scene.add( MovingCube );
collidableMeshList0.push(MovingCube);