想在一个 three.js 的源码钟添加一段点击事件,但是依照网上的写法添加后无法成功获取元素
下图为打印的 scene 结果,可以看到存在 children 数组对象
但是 var intersects = raycaster.intersectObjects(scene.children, true);
后结果缺位一个空数组,我的代码如下:
// --------- 点击事件 start ---------
//声明raycaster和mouse变量
var raycaster = new THREE.Raycaster();
var pointer = new THREE.Vector2();
function onMouseClick (event) {
// console.log( 'event', event, 'scene', scene , scene.children)
console.log("event.clientX:" + event.clientX)
console.log("event.clientY:" + event.clientY)
//通过鼠标点击的位置计算出raycaster所需要的点的位置,以屏幕中心为原点,值的范围为-1到1.
pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
pointer.y = - (event.clientY / window.innerHeight) * 2 + 1;
// 通过鼠标点的位置和当前相机的矩阵计算出raycaster
raycaster.setFromCamera(pointer, camera);
// 获取raycaster直线和所有模型相交的数组集合
console.log('scene', scene)
// var intersects = raycaster.intersectObjects(scene.children, true);
var intersects = raycaster.intersectObjects(scene.children, true);
console.log('intersects', intersects);
//将所有的相交的模型的颜色设置为红色,如果只需要将第一个触发事件,那就数组的第一个模型改变颜色即可
for (var i = 0; i < intersects.length; i++) {
intersects[i].object.material.color.set(0xff0000);
}
}
// function render () {
// // update the picking ray with the camera and pointer position
// raycaster.setFromCamera(pointer, camera);
// // calculate objects intersecting the picking ray
// const intersects = raycaster.intersectObjects(scene.children);
// console.log('intersects', intersects)
// for (let i = 0; i < intersects.length; i++) {
// intersects[i].object.material.color.set(0xff0000);
// }
// renderer.render(scene, camera);
// }
window.addEventListener('click', onMouseClick, false);
// window.requestAnimationFrame(render);
// --------- 点击事件 end ---------
我想修改的源码预览链接为:https://demosc.chinaz.net/Files/DownLoad/webjs1/202102/jiaobe...
是想将点击事件添加到灯笼上
由于之前没有接触过 three.js ,所以还望指点,万分感谢!
今天偶然发现,并非获取不到点击事件,而是需要点击视图中心位置才可以触发,如图:
找到了一个成功的事例:
https://blog.csdn.net/qq_30100043/article/details/79054862
但尝试仍然成功,我在继续努力!