Three.js射线对象交集问题无法单击对象

Question

我的项目基于webgl_interactive_draggablecubes three.js示例。 问题是，当我更改渲染器的尺寸时，我无法单击对象。 这是我的代码：

初始化函数

 function init() {
                container = document.getElementById('macchoir3d');

                camera = new THREE.PerspectiveCamera(70, window.innerWidth  /  window.innerHeight  , 1, 10000);

                camera.position.z = 1000;

                scene = new THREE.Scene();

                scene.add(new THREE.AmbientLight(0x505050));

                var light = new THREE.SpotLight(0xffffff, 1.5);
                light.position.set(0, 500, 2000);
                light.castShadow = true;

                light.shadowCameraNear = 200;
                light.shadowCameraFar = camera.far;
                light.shadowCameraFov = 50;

                light.shadowBias = -0.00022;
                light.shadowDarkness = 0.5;

                light.shadowMapWidth = 2048;
                light.shadowMapHeight = 2048;

                scene.add(light);

                var loader = new THREE.OBJMTLLoader();
                //loader.load( 'teeth2.obj', 'teeth2.mtl', function ( object ) {
                loader.load('machoireadulte.obj', 'machoireadulte.mtl', function (object) {
                    console.log(object);
                    obj = object;
                    object.position.y = -80;
                    scene.add(object);

                });

                plane = new THREE.Mesh(new THREE.PlaneGeometry(2000, 2000, 8, 8), new THREE.MeshBasicMaterial({ color: 0x000000, opacity: 0.25, transparent: true, wireframe: true }));
                plane.visible = false;
                scene.add(plane);

                projector = new THREE.Projector();

                renderer = new THREE.WebGLRenderer({ antialias: true });
                renderer.setClearColor("#000000");

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

                renderer.sortObjects = false;

                renderer.shadowMapEnabled = true;
                renderer.shadowMapType = THREE.PCFShadowMap;

                container.appendChild(renderer.domElement);

                renderer.domElement.addEventListener('mousemove', onDocumentMouseMove, false);
                renderer.domElement.addEventListener('mousedown', onDocumentMouseDown, false);
                renderer.domElement.addEventListener('mouseup', onDocumentMouseUp, false);


            }

鼠标移动事件

function onDocumentMouseMove(event) {

            event.preventDefault();

            mouse.x = (( event.clientX / (window.innerWidth / 2)) * 2 - 1);
            mouse.y = -( event.clientY / (window.innerHeight / 2) ) * 2 + 1;

            var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5);
            projector.unprojectVector(vector, camera);

            var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());

            if (SELECTED) {

                var intersects = raycaster.intersectObject(plane);

                return;

            }


            var intersects = raycaster.intersectObjects(obj.children);

            if (intersects.length > 0) {

                if (INTERSECTED != intersects[ 0 ].object) {

                    if (INTERSECTED) INTERSECTED.material.color.setHex(INTERSECTED.currentHex);

                    INTERSECTED = intersects[ 0 ].object;
                    INTERSECTED.currentHex = INTERSECTED.material.color.getHex();


                    plane.lookAt(camera.position);

                }

                container.style.cursor = 'pointer';

            } else {

                if (INTERSECTED) INTERSECTED.material.color.setHex(INTERSECTED.currentHex);

                INTERSECTED = null;

                container.style.cursor = 'auto';

            }

        }

鼠标单击事件

 function onDocumentMouseDown(event) {

            event.preventDefault();

            var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5);
            projector.unprojectVector(vector, camera);

            var raycaster = new THREE.Raycaster(camera.position,             vector.sub(camera.position).normalize());

            var intersects = raycaster.intersectObjects(obj.children);

            if (intersects.length > 0) {

                controls.enabled = false;

                SELECTED = intersects[ 0 ].object;
                console.log("object");
                console.log(SELECTED);

                var intersects = raycaster.intersectObject(plane);

                if ($scope.isTeethDraggable == "YES") {

                    offset.copy(intersects[ 0 ].point).sub(plane.position);

                    container.style.cursor = 'move';
                }
            }
        }

  

我正在使用包含<div id='macchoir3d'></div>的jQuery-ui对话框，其中将加载3d模型