three.js 实现点击事件
1.加载模型(通过点击模型触发事件)
2.通过射线获取到事件源 (new THREE.Raycaster()和new THREE.Vector2())
3.通过点击到该模型使用名字匹配 clickedObject.name==“xx”
简单示例:
addEventListener监听事件触发
window.addEventListener("click", this.onClick, false);
创建 Raycaster和Vector2
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
计算鼠标或触摸点的位置 (这里的event是通过事件监听获取)
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
更新射线
raycaster.setFromCamera( mouse, this.camera );
计算与所有对象的交点 得到一个数组
const intersects = raycaster.intersectObjects( this.scene.children, true );
判断交点数组的长度 (如果事件触发了会把监听到的数据放到该数组中)
if ( intersects.length > 0 ) {
const clickedObject = intersects[0].object;
if(clickedObject.name===clickedObject.name){
this.constructor(false)
console.log("获取的当前模型信息:", clickedObject);
alert(clickedObject.name)
}
}
下面是完整代码:
window.addEventListener("click", this.onClick, false);
methods: {
onClick(event) {
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, this.camera);
const intersects = raycaster.intersectObjects(this.scene.children, true);
if (intersects.length > 0) {
const clickedObject = intersects[0].object;
if (clickedObject.name === clickedObject.name) {
console.log("获取的当前模型信息:", clickedObject);
alert(clickedObject.name);
}
}
}
}
下面是运行效果:
以上是three.js的点击事件实现