Three.js raycaster导致动画无法显示

如何解决Three.js raycaster导致动画无法显示

我已经使用Three.js在webGL中创建了3D动画，并且我试图创建一个球形对象，以便在单击时将其击落。我尝试实现var raycaster = new THREE.Raycaster()，但它不会显示动画。有没有一种方法可以让raycaster在这里工作，或者我必须设置函数getMouse3D()和getMouse2D()。

这是初始化功能以及拍摄功能。球形和时钟的代码块已注释掉。

$(function() {


    var spheres;
    //var raycaster = new THREE.Raycaster();
    var mouse = new THREE.Vector2();
    var intersects;
    var clock = new THREE.Clock();
    var delta = 0;
    
    var $trackingOverlay = $('#tracking-overlay');

    
        projector = new THREE.Projector();
        renderer = new THREE.WebGLRenderer( { alpha: true,antialias: true } );
        scene = new THREE.Scene();
        perspectiveCamera = new THREE.PerspectiveCamera(DEFAULT_VIEW_ANGLE,WIDTH / HEIGHT,PERSPECTIVE_NEAR,PERSPECTIVE_FAR);
        perspectiveCamera.position.set(DEFAULT_CAMERA_X,DEFAULT_CAMERA_Y,DEFAULT_CAMERA_Z);
        orthoCamera = new THREE.OrthographicCamera(DEFAULT_ORTHO_LEFT,DEFAULT_ORTHO_RIGHT,DEFAULT_ORTHO_TOP,DEFAULT_ORTHO_BOTTOM,ORTHO_NEAR,ORTHO_FAR);
        pointLight = new THREE.PointLight(0xFFFFFF);
        pointLight.position.set(10,50,150);
        
        container = model;
        container.rotation.set(0.2,0);
        scene.add(container);
                
        /*spheres = [];
        viewport.addEventListener("click",event => {
            mouse.x = ( event.clientX / WIDTH ) * 2 - 1;
            mouse.y = - ( event.clientY / HEIGHT ) * 2 + 1;
            raycaster.setFromCamera(mouse,perspectiveCamera);
            intersects = raycaster.intersectObjects([plane]);
            if (intersects.length == 0) return;
            shoot(intersects[0].point);
        },false);
        */
        
                
        scene.add(pointLight);
        scene.add(perspectiveCamera);
        scene.add(orthoCamera);
        //scene.background = new THREE.Color( 0xff0000 );
        setActiveCamera(); 
        

        // init controls
        setupControls();
        updateInputValues();
        toggleControls();

        // setup viewport
        viewport = document.getElementById('viewport');
        renderer.setSize(WIDTH,HEIGHT);
        renderer.setClearColor( 0xABCBFB,0.2 );
        viewport.appendChild(renderer.domElement);

        // start the animation loop
        requestAnimationFrame(update);
    
    function update()
    {
        
        /*delta = clock.getDelta();
        spheres.forEach(sphere => {
        sphere.position.addScaledVector(sphere.userData.direction,sphere.userData.speed * delta);
        if (sphere.position.z <= torus.position.z) sphere.userData.speed = 0; // stop,when we reached the plane
        }); 
        */

        renderer.render(scene,activeCamera);
        positionTrackingOverlay();

        requestAnimationFrame(update);
    }

    function shoot(target) {
        let sphere = new THREE.Mesh();
        sphere.material = new THREE.MeshToonMaterial({ color: "#00ff00" });
        sphere.geometry = new THREE.SphereGeometry(0.5);
        sphere.position.copy(road.position);
        sphere.userData.direction = target.sub(road.position).normalize();
        sphere.userData.speed = 20;
        scene.add(sphere);
        spheres.push(sphere);
    }