Translations: Japanese
How To Detect Click
A common process can be implemented for all actions of the mouse, screen taps, and VR controllers.
const box = new THREE.Mesh(...);
// Receive click event
box.onSelectDown = () => {
if (box.material.color.getHex() === 0x668cff) {
box.material.setValues({ color: 0xff6347 });
} else {
box.material.setValues({ color: 0x668cff });
}
};
// Clickable object list
const interactableObjects = [box];
...
const adapter = new VerseThree.DefaultEnvAdapter(
renderer,
scene,
camera,
cameraContainer,
player,
() => collisionBoxes,
() => collisionObjects,
() => teleportTargetObjects,
{
getInteractableObjects: () => interactableObjects,
// Receive click event
onSelectDown: (el, point) => {
if (el.onSelectDown) {
// Propagate click events to the target object
el.onSelectDown(point);
}
},
}
);
...
document.addEventListener("DOMContentLoaded", () => {
const scene = document.querySelector("a-scene");
// Receive click event
scene.addEventListener("click", (e) => {
const el = e.detail?.intersectedEl;
if (el?.classList?.contains("box")) {
if (el.getAttribute("color") === "#668CFF") {
el.setAttribute("color", "#FF6347");
} else {
el.setAttribute("color", "#668CFF");
}
}
});
});
...
let collisionObjects:THREE.Object3D[] = [];
let teleportTargetObjects:THREE.Object3D[] = [];
let interactableObjects:THREE.Object3D[] = [];
let collisionBoxes:THREE.Box3[] = [];
const queryObjects = (q) => [...scene.querySelectorAll(q)].map((v) => v.object3D).filter((v) => v.visible);
const updateCollisionObjects = () => {
collisionObjects = queryObjects(".collider,.wall");
teleportTargetObjects = queryObjects(".ground,.environmentGround");
// Clickable object list
interactableObjects = queryObjects(".clickable");
updateCollisionBoxes();
};
...
const adapter = new VerseThree.AFrameEnvAdapter(
scene,
document.getElementById("headOffset").object3D,
document.getElementById("player").object3D,
() => collisionBoxes,
() => collisionObjects,
() => teleportTargetObjects,
{
getInteractableObjects: () => interactableObjects,
// Receive click event
onSelectDown: (o, _point) => {
if (!o.el || !o.el.classList.contains("clickable")) {
return;
}
// Publish A-FRAME click event
o.el.emit("click", {
intersectedEl: o.el,
});
},
}
...