ThreeJS 光线投射在 R81 中与 R71 不同答案

【问题标题】：ThreeJS raycasting is different in R81 than R71ThreeJS 光线投射在 R81 中与 R71 不同
【发布时间】：2017-02-21 16:50:03
【问题描述】：

我有一架上面有网格的飞机。当用户双击网格时，我的代码会绘制一个球。这在 R71 中工作得很好，但是一旦我切换到 R81 raycaster 就不会返回相交。代码如下：

在init()中：

// Plane
plane = new THREE.Mesh(
    new THREE.PlaneBufferGeometry( 1000, 1000, 3, 3 ),
    new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: .5, transparent: true } )
);

plane.visible = false;
scene.add( plane ); 
planes.push(plane);

在 doubleClickEvent() 中：

event.preventDefault();

var mouse = new THREE.Vector2((event.clientX  / window.innerWidth ) * 2 - 1, -(((event.clientY / window.innerHeight ) * 2 - 1)));
var directionVector = new THREE.Vector3();
directionVector.set(mouse.x, mouse.y, 0.1);
directionVector.unproject(camera);
directionVector.sub(camera.position);           
directionVector.normalize();
raycaster.set(camera.position, directionVector);
intersects = raycaster.intersectObjects(planes);
if (intersects.length) {
    var sphereParent = new THREE.Object3D();
    var sphereGeometry = new THREE.SphereGeometry(.1, 16, 8);
    var sphereMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
    var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
    sphereParent.add(sphere);
    sphereParent.position.set(intersects[0].point.x, intersects[0].point.y, 0.0);
    scene.add(sphereParent);
    objects.push(sphereParent);
}

如果我改变了

intersects = raycaster.intersectObjects(planes);

到

intersects = raycaster.intersectObjects(scene.children);

球被拉出，但被拉到了错误的位置。

有什么想法吗？

【问题讨论】：

标签： three.js raycasting

【解决方案1】：

我找到了答案。光线投射不起作用的原因是飞机的能见度是错误的。解决方案是更改材质可见性而不是平面的可见性。

【讨论】：