As a newcomer to three.js, I am currently exploring raycasting and encountering some confusion regarding its functionality with imported 3D models. Specifically, when I import an obj model and attempt to determine if there is contact with the imported 3D model, the function does not behave as expected. However, when I switch to detecting a box object created within three.js, everything works as anticipated. Can anyone provide assistance in resolving this issue?

import * as THREE from 'https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8efae6fcebebcebea0bfbcb8a0bf">[email protected]</a>/build/three.module.js';

import { OrbitControls } from 'https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="43372b31262603736d7271756d72">[email protected]</a>/examples/jsm/controls/OrbitControls.js';

import {OBJLoader} from "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4a0bca6b1b194e4fae5e6e2fae5">[email protected]</a>/examples/jsm/loaders/OBJLoader.js";

import {MTLLoader} from "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="42362a30272702726c7370746c73">[email protected]</a>/examples/jsm/loaders/MTLLoader.js";

import * as GUI from "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="385c594c165f4d517808160f160f">[email protected]</a>/build/dat.gui.module.js";

//Setting Up the 3D Model Environment
const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth,window.innerHeight);

document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();



//Configuring Lighting
var keyLight = new THREE.DirectionalLight(new THREE.Color('hsl(30,100%,75%)'),1.0);
var fillLight = new THREE.DirectionalLight(new THREE.Color('hsl(240,100%,75%)'),0.75);
var backLight = new THREE.DirectionalLight(0xffffff,1.0);

keyLight.position.set(-100,0,100);
fillLight.position.set(100,0,100);
backLight.position.set(100,0,-100).normalize();

scene.add(keyLight);
scene.add(fillLight);
scene.add(backLight);



//Configuring Camera
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth/window.innerHeight,
    0.1,
    1000
);

const orbit = new OrbitControls(camera,renderer.domElement);
camera.position.set(0,2,7.5);
orbit.update();



//Creating the Base
const planeGeometry = new THREE.PlaneGeometry(100,100);
const planeMaterial = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    wireframe: false,
    side: THREE.DoubleSide
});

var plane = new THREE.Mesh(planeGeometry,planeMaterial);
scene.add(plane);
plane.rotation.x = -0.5 * Math.PI;



//Model for Testing
const boxGeometry = new THREE.BoxGeometry(10,10,10);
const boxMaterial = new THREE.MeshBasicMaterial({color: 0x0000ff})

var box = new THREE.Mesh(boxGeometry,boxMaterial);
scene.add(box);
box.position.x += 20;


//GUI Setup for Controlling the Base 
const gridHelper = new THREE.GridHelper(100);
scene.add(gridHelper);

const gui = new GUI.GUI();
const options = {
    planeColor: '#ffea00',
    wireframe: false 
};

gui.addColor(options,'planeColor').onChange(function(e){
    plane.material.color.set(e);
});

gui.add(options,'wireframe').onChange(function(e){
    plane.material.wireframe = e;
});


//Background Image Setup
const textureLoader = new THREE.TextureLoader();

textureLoader.load(
    '../img/doge.jpg',
    function ( texture ) {
        scene.background = texture;
    },
    undefined,
    function ( err ) {
        console.error( 'An error happened.' );
    }
);


//Importing obj and mtl files to build the 3D model
var building;

const mtlLoader = new MTLLoader();
mtlLoader.load(
    '../source/building_04.mtl',
    (materials)=>{
        materials.preload();
        console.log(materials);

        const objLoader = new OBJLoader()
        objLoader.setMaterials(materials)
        objLoader.load(
            '../source/building_04.obj',
            (object)=>{
                scene.add(object)
                building = object;
                object.position.y +=1;
            },
            (xhr) => {
                console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
            },
            (error) => {
                console.log("Object error")
            }
        )
    },
    (xhr) => {
        console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
    },
    (error) => {
        console.log("Material Error")
    }
)



//Setting up Raycasting Environment
const raycaster = new THREE.Raycaster();
const mousePosition = new THREE.Vector2();

window.addEventListener('mousemove', function(e){
    mousePosition.x = (e.clientX/window.innerWidth)*2 - 1;
    mousePosition.y = -(e.clientY/window.innerHeight)*2 + 1;
});

//Function to Ensure Everything is Up-to-Date
function animate(){
    //Raycasting
    raycaster.setFromCamera( mousePosition, camera );

    const intersects = raycaster.intersectObjects( scene.children,true);

    if(intersects.length > 0){
        for ( let i = 0; i < intersects.length; i ++ ) {
            if(building != undefined){
                if(intersects[0].object.id === building.id){
                    console.log("Touched!");
                }
                else{
                    console.log("Did not touch!");
                }
            }
            else{
                console.log("Not ready!");
            }
            console.log(intersects[i].object.id);
        }
    }
    else{
        console.log("Did not touch")
    }
    console.log("Finished")


    renderer.render(scene,camera);
}
renderer.setAnimationLoop(animate);



//Resize Screen Based on Browser Size
window.addEventListener('resize',function(){
    camera.aspect = window.innerWidth/this.window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth,window.innerHeight);
});