OnPickDownTrigger : mesh를 클릭했을때 발생하는 이벤트
Mesh.actionManager = new BABYLON.ActionManager(scene);
mesh.actionManager.registerAction(action);
onPickTriggerHandler: (scene, mesh, cb) => {
if (!mesh.actionManager) {
mesh.isPickable = true;
mesh.actionManager = Event.setActionManager(scene);
}
mesh.actionManager.registerAction(
Event.setExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, cb)
);
},
onPointerOverHandler: (scene, mesh, cb) => {
if (!mesh.actionManager) {
mesh.isPickable = true;
mesh.actionManager = Event.setActionManager(scene);
}
mesh.actionManager.registerAction(
Event.setExecuteCodeAction(BABYLON.ActionManager.OnPointerOverTrigger, cb)
);
},
onPointerOutHandler: (scene, mesh, cb) => {
if (!mesh.actionManager) {
mesh.isPickable = true;
mesh.actionManager = Event.setActionManager(scene);
}
mesh.actionManager.registerAction(
Event.setExecuteCodeAction(BABYLON.ActionManager.OnPointerOutTrigger, cb)
);
},
onPickDownHandler: (scene, mesh, cb) => {
if (!mesh.actionManager) {
mesh.isPickable = true;
mesh.actionManager = Event.setActionManager(scene);
}
mesh.actionManager.registerAction(
Event.setExecuteCodeAction(BABYLON.ActionManager.OnPickDownTrigger, cb)
);
},
// mesh클릭시 pointer가 위치한 mesh의 정보를 가져온다.
scene.onPointerObservable.add((e) => {
if (e.type == BABYLON.PointerEventTypes.POINTERDOWN) {
console.log(e.pickInfo.pickedMesh.getAbsolutePosition());
console.log(e.pickInfo.pickedMesh.name);
console.log(e.pickInfo.pickedMesh);
}
});
// 클릭을 했을 때만 작동
scene.onPointerPick = (evt, pickInfo) => {
console.log(evt);
console.log(pickInfo);
};
// name props를 받아 와서 해당하는 객체를 선택하는 함수 생성
const pickCam = (name) => {
for (let i = 1; i < 8; i++) {
if (name === `CAM_0${i}_BG` || name === `CAM_0${i}_Button`) {
const mesh = scene.getMeshByName(name);
WebGLUtil.Event.onPickDownHandler(scene, mesh, () => {
scene.activeCamera = cams[i - 1];
cams[i - 1].attachControl(true);
});
}
}
};
const pickPromotion = (name) => {
for (let i = 1; i < 17; i++) {
if (i < 10) {
if (name === `Promotion_0${i}`) {
const mesh = scene.getMeshByName(name);
WebGLUtil.Event.onPickDownHandler(scene, mesh, () => {
setModalManager((prev) => ({
...prev,
promotion: {
open: true,
name: name,
},
}));
});
}
} else {
if (name === `Promotion_${i}`) {
const mesh = scene.getMeshByName(name);
WebGLUtil.Event.onPickDownHandler(scene, mesh, () => {
setModalManager((prev) => ({
...prev,
promotion: {
open: true,
name: name,
},
}));
});
}
}
}
};
위에서 생성한 함수 적용 예시
scene.onPointerPick = (evt, pickInfo) => {
const name = pickInfo.pickedMesh.name;
if (pickInfo.hit) {
if (pickInfo.pickedMesh != null) {
console.log(name);
pickCam(name);
pickPromotion(name);
}
}
};
scene.onPointerObservable.add((e) => {
if (e.type == BABYLON.PointerEventTypes.POINTERDOWN) {
const name = e.pickInfo.pickedMesh.name;
if (e.pickInfo.hit) {
if (e.pickInfo.pickedMesh != null) {
console.log(name);
pickCam(name);
pickPromotion(name);
}
}
}
});
프리카메라 회전율 제한 하는 코드
scene.registerBeforeRender(() => {
const camera = scene.activeCamera
// console.log(camera.rotation)
const cameraRotXLImit = 0.18508726920982385
if (-cameraRotXLImit > camera.rotation.x) {
camera.rotation.x = -cameraRotXLImit;
} else if (camera.rotation.x > cameraRotXLImit) {
camera.rotation.x = cameraRotXLImit;
}
});
X 값을 제한하면 위아래 회전이 제한되고 y값을 제한하면 좌우 회전 값이 제한된다.
// 이 부분 값을 조절하면 된다
const cameraRotXLImit = 0.18508726920982385
// 현재 접속한 디바이스의 종류를 알 수 있다.
console.log(navigator.userAgent.indexOf("Mobile"))
https://developer.mozilla.org/ko/docs/Web/API/Navigator => navigator MDN공식문서