Raycaster无法正确识别对象 - Three.js

Question

我有一个3D项目，用户可以在场景中添加模型，并使用选择对象后弹出的移动指示器移动它们。问题是raycaster没有识别对象，而是识别指标本身（或者更具体地说，指标上绘制的白色垂直线）。

是否有人知道问题可能是什么或我如何解决这个问题？

以下是该项目的链接：https://pcforge.tech/3d-viewer/

我怀疑移动指示器正在干扰物体上的光线投射......不确定如何修复它。

＆＃13;

＆＃13;

raycaster = new THREE.Raycaster();

    function raycast(eve, object) {
        var mouseToRaycaster = new THREE.Vector2(((eve.offsetX / renderer.domElement.offsetWidth ) * 2) - 1, -(( eve.offsetY / renderer.domElement.offsetHeight ) * 2) + 1);
        raycaster.setFromCamera(mouseToRaycaster, camera);
        intersects = raycaster.intersectObjects(object.children, true);

        if (selectedComponent && intersects.length == 0) {
            transformControls.detach();
            selectedComponent.material = redefineMaterial({ map: selectedComponent.material.map });
            scene.remove(transformControls);
            scene.remove(lineYHelper);
            selectedComponent = false;
        }
    }

    //scene
    scene = new THREE.Scene();

    renderer = new THREE.WebGLRenderer({
        canvas: canvas,
        alpha: false,
        antialias: false,
        depth: false,
        logarithmicDepthBuffer: true,
        gammaFactor: 1
    });
    renderer.setClearColor(rgb256(255, 255, 255));
    
    transformControls = new THREE.TransformControls(camera, renderer.domElement);


    // SETTINGS FOR KEYBOARD EVENTS
    window.addEventListener('keydown', function (event) {

        switch (event.keyCode) {

            case 81: // Q
                transformControls.setSpace(transformControls.space === "local" ? "world" : "local");
                break;

            case 82: // R
                transformControls.setMode("rotate");
                transformControls.setSpace("local");
                break;

            case 84: // T
                transformControls.setMode("translate");
                transformControls.setSpace("world");
                break;

            case 187:
            case 107: // +, =, num+
                transformControls.setSize(transformControls.size + 0.1);
                break;

            case 189:
            case 109: // -, _, num-
                transformControls.setSize(Math.max(transformControls.size - 0.1, 0.1));
                break;
        }
    });

    var manager = new THREE.LoadingManager();
    load_obj = new THREE.OBJLoader(manager);
    load_tex = new THREE.TextureLoader();

    //lighting
    var ambient = new THREE.AmbientLight(rgb256(41, 57, 90));
    scene.add(ambient);

    var light1 = new THREE.DirectionalLight(rgb256(255, 255, 255), 0.75);
    light1.castShadow = false;
    light1.shadow.camera.near = 0;
    light1.shadow.camera.far = 30;
    light1.shadow.camera.left = -5.5;
    light1.shadow.camera.right = 5.5;
    light1.shadow.camera.top = 5.5;
    light1.shadow.camera.bottom = -5.5;
    light1.shadow.mapSize.width = 1024;
    light1.shadow.mapSize.height = 1024;
    light1.shadow.bias = -0.001;
    light1.position.set(1, 0.7, 0.4);
    light1.position.normalize();
    light1.position.multiplyScalar(20);
    scene.add(light1);

    THREE.Chpok(renderer.domElement, camera, meshes);

    var containerGeometry = new THREE.BoxBufferGeometry( 10, 5, 9.8 );
    var containerMaterial = new THREE.MeshBasicMaterial( {color: 0xf0f0f0, visible: false, wireframe: true} );
    container = new THREE.Mesh( containerGeometry, containerMaterial );
    container.position.set(0, 2.5, 0);
    scene.add( container );

    canvas.addEventListener('click', (e) => {
            raycast(e, container);
    });

    orbitControls = new THREE.OrbitControls( camera, renderer.domElement );
    orbitControls.target.set( 0.1, 1.1, 0 );
    orbitControls.enableZoom = false;
    orbitControls.enablePan = false;

    cubeControls = new THREE.CubeControls;
    cubeControls.init(viewcubeCanvas, {
        'active': true,
        'controls': orbitControls,
        'camera': camera,
        'width': 200,
        'height': 200
    });

    for (var i = 0; i < meshes.length; i++) {
        container.add(meshes[i]);
    }

    //floor
    {
        var floor_w = 0.1;

        var g = new THREE.BoxGeometry(10, 10, floor_w);
        var mat = new THREE.MeshPhongMaterial({
        	wireframe: true,
            color: rgb(0.5,0.5,0.5),
            specular: rgb(0.15, 0.15, 0.15),
            shininess: 20,
            flatShading: false,
            side: THREE.FrontSide
        });
        var mesh = new THREE.Mesh(g, mat);
        mesh.position.y = -floor_w * -5.5;
        mesh.rotation.x = Math.PI * 0.5;
        mesh.receiveShadow = true;

＆＃13;

＆＃13;

＆＃13;