How do I make the object to stop if collision detected?

Questions
, ,
1

I do have the animation function here

function animateTheeBox() {
    if (!isDragging && !orbitControls.enabled) {
        rayCasters.setFromCamera(mousePos, camera);
        const intersect = rayCasters.intersectObjects([theeBox]);

        if (intersect.length === 0) {
            const moveSpeed = 0.1;
            camera.position.x += (mousePos.x - 0.5) * moveSpeed;
            camera.position.y += (mousePos.y - 0.5) * moveSpeed;
            camera.lookAt(0, 0, 0);
        }
    }

    // Check for collision between metalBox and theeBox
    let boundsMetalBox = new THREE.Box3().setFromObject(metalBox);
    let boundstheeBox = new THREE.Box3().setFromObject(theeBox);
    if (boundsMetalBox.intersectsBox(boundstheeBox)) {
        console.log("collided");
        // Calculate the separation vector
        // const separationVector = new THREE.Vector3();
        // boundsMetalBox.getCenter(separationVector).sub(boundstheeBox.getCenter(separationVector)).normalize();

        // Calculate the minimum separation distance required
        // const separationDistance = boundsMetalBox.getCenter(separationVector).distanceTo(boundstheeBox.getCenter(separationVector)) - 0.5;

        // Move the metalBox away from the theeBox to prevent intersection
        // const translation = separationVector.multiplyScalar(separationDistance);
        // metalBox.position.add(translation);
        // boundsMetalBox.setFromObject(metalBox); // Update the metalBox's bounding box
    }

    renderer.setClearColor(0xffffff);
    renderer.render(scene, camera);
}

and I want to implement a collision detection. As you guys can see it works when the object collides it detects it but the object would go through…

image
image943×326 4.62 KB

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';
import metalTextureURL from '../images/dirty-metal-texture.jpg';
import woodTextureURL from '../images/wood-text.jpg';
const boxGeometry = new THREE.BoxGeometry(5, 5, 5);

const woodTexture = new THREE.TextureLoader().load(woodTextureURL);
const metalTexture = new THREE.TextureLoader().load(metalTextureURL);

const theeBoxMaterial = new THREE.MeshBasicMaterial({ map: woodTexture });
const theeBox = new THREE.Mesh(boxGeometry, theeBoxMaterial);

const metalMaterial = new THREE.MeshBasicMaterial({ map: metalTexture });
const metalBox = new THREE.Mesh(boxGeometry, metalMaterial);

const renderer = new THREE.WebGLRenderer();
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);

theeBox.position.set(0, 2.6, 0)
metalBox.position.set(8, 2.6, 0);

scene.add(theeBox);
scene.add(metalBox);

// ------------------------------------------------------------------------------
const transformControls = new TransformControls(camera, renderer.domElement);
transformControls.traverse(e => {
    if (e.material) {
        e.material.depthTest = true;
    }
});

let transformAnchor = new THREE.Object3D();
let bounds = new THREE.Box3().setFromObject(theeBox);


transformAnchor.position.copy(bounds.min);
transformAnchor.attach(theeBox);

transformControls.attach(transformAnchor);
transformControls.setMode('translate');

const gizmo = transformControls._gizmo.gizmo;
[83, 86, 89, 91, 92, 93, 94].forEach(axis => {
    const obj = gizmo.translate.getObjectById(axis);
    obj.visible = false;
    obj.layers.disable(0);
});
scene.add(transformAnchor);
scene.add(transformControls);
// ------------------------------------------------------------------------------

// TransformControls for metalBox
const transformControlsMetal = new TransformControls(camera, renderer.domElement);
transformControlsMetal.traverse(e => {
    if (e.material) {
        e.material.depthTest = true;
    }
});


let transformAnchorMetal = new THREE.Object3D();

let boundsMetal = new THREE.Box3().setFromObject(metalBox);
transformAnchorMetal.position.copy(boundsMetal.min);
transformAnchorMetal.attach(metalBox);

transformControlsMetal.attach(transformAnchorMetal);
transformControlsMetal.setMode('translate');

const gizmoMetal = transformControlsMetal._gizmo.gizmo;
[228, 231, 234, 236, 237, 238, 239].forEach(axisMetal => {
    const objM = gizmoMetal.translate.getObjectById(axisMetal);
    objM.visible = false;
    objM.layers.disable(0);
});
scene.add(transformAnchorMetal);
scene.add(transformControlsMetal);
// -------------------------------------------------------------------------------
// console.log(gizmoMetal);
//---------------

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

camera.position.set(50, 30, 20);
camera.lookAt(0, 0, 0);

let isDragging = false;

const orbitControls = new OrbitControls(camera, renderer.domElement);

transformControls.addEventListener('dragging-changed', function (event) {
    orbitControls.enabled = !event.value;
    isDragging = event.value;
});

transformControlsMetal.addEventListener('dragging-changed', function (event) {
    orbitControls.enabled = !event.value;
    isDragging = event.value;
});

const gridHelper = new THREE.GridHelper(30);
scene.add(gridHelper);

function animateTheeBox() {
    if (!isDragging && !orbitControls.enabled) {
        rayCasters.setFromCamera(mousePos, camera);
        const intersect = rayCasters.intersectObjects([theeBox]);

        if (intersect.length === 0) {
            const moveSpeed = 0.1;
            camera.position.x += (mousePos.x - 0.5) * moveSpeed;
            camera.position.y += (mousePos.y - 0.5) * moveSpeed;
            camera.lookAt(0, 0, 0);
        }
    }

    // Check for collision between metalBox and theeBox
    let boundsMetalBox = new THREE.Box3().setFromObject(metalBox);
    let boundstheeBox = new THREE.Box3().setFromObject(theeBox);
    if (boundsMetalBox.intersectsBox(boundstheeBox)) {
        console.log("collided");
        // Calculate the separation vector
        // const separationVector = new THREE.Vector3();
        // boundsMetalBox.getCenter(separationVector).sub(boundstheeBox.getCenter(separationVector)).normalize();

        // Calculate the minimum separation distance required
        // const separationDistance = boundsMetalBox.getCenter(separationVector).distanceTo(boundstheeBox.getCenter(separationVector)) - 0.5;

        // Move the metalBox away from the theeBox to prevent intersection
        // const translation = separationVector.multiplyScalar(separationDistance);
        // metalBox.position.add(translation);
        // boundsMetalBox.setFromObject(metalBox); // Update the metalBox's bounding box
    }

    renderer.setClearColor(0xffffff);
    renderer.render(scene, camera);
}

renderer.setAnimationLoop(animateTheeBox);

This is the minimal reproducing code, it has many lines but is very basic since I have only two objects and just a gridHelper.