THREE.js raycaster找不到任何相交

Question

我有一个带平面的简单场景，我试图使用光线施法者找到平面与下方矢量相交的位置。无论我尝试什么，都没有任何交叉点。关于这有什么问题的任何想法？

以下是相关代码和a plunker。下面的箭头射穿了飞机，所以那里应该有一些交叉点......

var geom = new THREE.PlaneGeometry(SCREEN_WIDTH, SCREEN_HEIGHT, 200, 200 );
var material = new THREE.MeshPhongMaterial({color: 0x2194ce, side: THREE.DoubleSide});
var mesh = new THREE.Mesh(geom, material);
geom.computeFaceNormals();
mesh.rotation.x = -Math.PI / 2;
scene.add(mesh)

var p1 = new THREE.Vector3(100, -20, 100);
var p2 = new THREE.Vector3(100, 10000, 100);
var arrow = new THREE.ArrowHelper(p2.clone().normalize(), p1, 150, 0xFFFFFF);
scene.add(arrow)

var direction = new THREE.Vector3 (0, 1, 0);
raycaster = new THREE.Raycaster(p1, direction);
var intersects = raycaster.intersectObject(mesh);
console.log(intersects) //nada