三.js Raycaster intersectObjects [英] three.js Raycaster intersectObjects
问题描述
我正在尝试从三个修改这个示例.js 通过鼠标点击控制字符.首先,当我单击画布时,我需要鼠标坐标并使用 THREE.Raycaster.intersectObjects 将其转换为 3D 空间坐标.在修改后的代码中,鼠标左键向上,我有以下内容:
I'm trying to modify this example from three.js to control the character(s) with mouse clicks. First, when I click on the canvas, I need the mouse coordinates and convert that into 3D space coordinates using THREE.Raycaster.intersectObjects. In the modified code, on left mouse up, I have the following:
var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
var projector = new THREE.Projector();
projector.unprojectVector(vector, camera);
var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
var intersects = raycaster.intersectObjects(objects);
if (intersects.length > 0) {
console.log('intersect: ' + intersects[0].point.x.toFixed(2) + ', ' + intersects[0].point.y.toFixed(2) + ', ' + intersects[0].point.z.toFixed(2) + ')');
}
else {
console.log('no intersect');
}
我已将地面网格添加到 objects
数组,但是当我单击地面网格时 raycaster.intersectObjects
仍然返回空数组.我也尝试传入 scene.children
而不是 objects
,但没有成功.
I have added the ground mesh to the objects
array, but raycaster.intersectObjects
still returns empty array when I click on the ground mesh. I also tried passing in scene.children
instead of objects
, but no luck.
这是完整的修改源.
推荐答案
显然,陀螺仪是问题所在.取出这些线,我得到相交工作.不确定这是错误还是功能.
Apparently, Gyroscope is the problem. Taking out these lines, and I get intersects working. Not sure if this is a bug or feature.
var gyro = new THREE.Gyroscope();
gyro.add( camera );
characters[ Math.floor( nSkins/2 ) ].root.add( gyro );
这篇关于三.js Raycaster intersectObjects的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!