When I try to select objects on my PC, it works perfectly fine. However, when I attempt to run the same process on my phone, it doesn't seem to work!
PC screenshots: https://i.sstatic.net/S0goX.jpg Phone screenshots: https://i.sstatic.net/NzvrT.jpg
NOTE: On the phone, I rotated the canvas 90 degrees using CSS (I suspect this operation might be causing the issue, but I'm not entirely sure why):
transform-origin: left top;
transform: rotate(90deg);
import * as THREE from 'three';
export class PickupManager {
raycaster: THREE.Raycaster;
camera: THREE.Camera;
scene: THREE.Scene;
canvas: HTMLCanvasElement;
constructor(camera: THREE.Camera, scene: THREE.Scene, canvas: HTMLCanvasElement) {
this.raycaster = new THREE.Raycaster();
this.camera = camera;
this.scene = scene;
this.canvas = canvas;
this.addEventListener();
}
pickedObject: THREE.Object3D | any;
ljj1: THREE.Object3D = null;
ljj2: THREE.Object3D = null;
ljj3: THREE.Object3D = null;
ljj4: THREE.Object3D = null;
ljj5: THREE.Object3D = null;
pick = (normalizedPosition: THREE.Vector2) => {
this.ljj1 = this.ljj1 || this.scene.getObjectByName("LJJ1");
this.ljj2 = this.ljj2 || this.scene.getObjectByName("LJJ2");
this.ljj3 = this.ljj3 || this.scene.getObjectByName("LJJ3");
this.ljj4 = this.ljj4 || this.scene.getObjectByName("LJJ4");
this.ljj5 = this.ljj5 || this.scene.getObjectByName("64mmB016");
// Update the ray with camera and mouse position
this.raycaster.setFromCamera(normalizedPosition, this.camera);
// Calculate intersection of objects and ray
const objects = [this.ljj1, this.ljj2, this.ljj3,this.ljj4, this.ljj5];
const intersectedObjects = this.raycaster.intersectObjects(objects,true);
if (intersectedObjects.length > 0) {
this.pickedObject = intersectedObjects[0];
const obj:THREE.Object3D = this.pickedObject.object;
// Output name of selected object
console.log(obj.name );
} else {
console.log("Not found!")
}
}
getCanvasRelativePosition = (event: MouseEvent | TouchEvent) => {
const rect: DOMRect = this.canvas.getBoundingClientRect();
const position: THREE.Vector2 = new THREE.Vector2();
if (event instanceof MouseEvent) {
position.x = event.clientX ;
position.y = event.clientY;
}
else if (event instanceof TouchEvent) {
const touch: Touch = event.changedTouches[0];
position.x = touch.clientX - rect.left;
position.y = touch.clientY - rect.top;
}
else {
throw "Incorrect event, needs MouseEvent or TouchEvent";
}
return position;
}
getPickPoint = (event: MouseEvent | TouchEvent) => {
const canvasPosition = this.getCanvasRelativePosition(event);
const pickPoint:THREE.Vector2 = new THREE.Vector2();
// Normalize mouse position to device coordinates. x and y values range (-1 to +1)
pickPoint.x = (canvasPosition.x / window.innerWidth ) * 2 - 1;
pickPoint.y = (canvasPosition.y / window.innerHeight) * -2 + 1;
return pickPoint;
}
addEventListener = () => {
this.canvas.addEventListener('mousedown', this.onMouseDown, false);
this.canvas.addEventListener('touchstart', this.onTouchStart, false);
}
onMouseDown = (event: MouseEvent) => {
event.preventDefault();
this.pick(this.getPickPoint(event));
}
onTouchStart = (event: TouchEvent) => {
event.preventDefault();
this.pick(this.getPickPoint(event));
}
}
I am trying to obtain the ljj1,ljj2,ljj3,ljj4,ljj5 objects. While I can successfully do so on a PC, I encounter difficulties when attempting on a phone.