threejs如何在三维场景中添加点击事件
threejs触发点击事件一般通过THREE.Raycaster射线来实现,当射线与物体相交,触发事件
this.$refs.loadDiv.addEventListener(
"click",
this.onDocumentMouseDown,
false
);
onDocumentMouseDown: function(event) {
event.preventDefault();
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
mouse.x =((event.clientX - 200) / this.renderer.domElement.clientWidth) * 2 - 1;
mouse.y =-((event.clientY - 60) / this.renderer.domElement.clientHeight) * 2 + 1;
raycaster.setFromCamera(mouse, this.camera);
var intersects = raycaster.intersectObjects(this.scene.children, true);
//当intersects.length > 0说明碰撞到物体,获取最近的物体名称进行判断
if (intersects.length > 0) {
if (intersects[0].object.name == "Video1") {
// alert("摄像头1");
this.$router.push({
path: "/Noisehome3",
query: {
Dname: ""
}
});
}
},