Javascript 从儿童摄影机到场景的3.js光线投射

Javascript 从儿童摄影机到场景的3.js光线投射,javascript,camera,three.js,raycasting,Javascript,Camera,Three.js,Raycasting,我正在尝试从我的相机光线投射鼠标,以便在场景中的网格上执行一些悬停和单击事件 我的问题是,我的相机当前是另一个网格的子对象(为了更方便相机移动/旋转),而现在我的光线投射不起作用(我假设相机是网格的子对象,而不是场景) 这是我代码的一部分: //camera setup var camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 1000); var cameraTargetGe

我正在尝试从我的相机光线投射鼠标,以便在场景中的网格上执行一些悬停和单击事件

我的问题是,我的相机当前是另一个网格的子对象(为了更方便相机移动/旋转),而现在我的光线投射不起作用(我假设相机是网格的子对象,而不是场景)

这是我代码的一部分:

//camera setup
var camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 1000);

var cameraTargetGeom = new THREE.SphereGeometry(0.5);
var cameraTargetMaterial = new THREE.MeshLambertMaterial({color: 0xff0000, ambient: 0xff0000});
var cameraTarget = new THREE.Mesh(cameraTargetGeom, cameraTargetMaterial);
cameraTarget.position.set(0.15, 0, 5);
scene.add(cameraTarget);
cameraTarget.add(camera);

camera.position.y = 18;
camera.rotation.x = Math.PI * -90 / 180;



// click event
renderer.domElement.addEventListener('click', clickedCanvas);

function clickedCanvas(e) {
    e.preventDefault();

    mouse.x = (e.clientX / renderer.domElement.width) * 2 - 1;
    mouse.y = -(e.clientY / renderer.domElement.height) * 2 + 1;

    raycaster.setFromCamera(mouse, camera);

    var intersects = raycaster.intersectObjects(scene.children, true);
    console.log(intersects);

    if (intersects.length > 0) {
        >... (redacted code)
    }
}

在我将相机添加到cameraTarget对象之前,它工作正常。既然相机是cameraTarget的子对象,如何从相机进行光线投射?

您可以使用以下模式进行光线投射,即使相机是另一个对象的子对象,它也可以正常工作。它适用于透视相机和正交相机

var raycaster = new THREE.Raycaster(); // create once and reuse
var mouse = new THREE.Vector2(); // create once and reuse

...

mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;

raycaster.setFromCamera( mouse, camera );

var intersects = raycaster.intersectObjects( objects, recursiveFlag );

three.js r.84

嗯,这一天我一直在努力解决这个问题,但在r71中仍然不适用于我,但在运行时将库更新为r73(目前最新版本)。@Starwave谁知道呢?我更改了版本号以防万一。:-)@WestLangley这个例子也适用于我的鼠标。用相机能达到这种效果吗?我想找到与谷歌硬纸板相同的效果,在屏幕中央有一个十字线,当通过观察一个物体与光线投射器相交时,你可以点击一个键来做其他事情。