Javascript Raycaster没有'；手机处于横向模式时无法工作

我可以在PC上选择对象。 但我在电话上运行它，它不工作

电脑屏幕截图： 手机屏幕截图：

注意：我在手机上通过CSS将画布旋转了90度（我猜这是因为这个操作，但我不知道为什么）：

transform-origin: left top;
transform: rotate(90deg);

---

我想得到

ljj1

，

ljj2

，

ljj3

，

ljj4

，

ljj5

对象，我可以在PC上得到，但我在手机上拿不到。

如果你用CSS旋转画布，那么你计算鼠标/触摸坐标的方法就行不通了

为了处理CSS转换的元素，您需要一些相对复杂的代码

对于鼠标坐标，可以使用

event.offsetX

和

event.offsetY

对于触摸坐标，您需要生成将事件位置传递回浏览器的合成事件，以便它为您生成

event.offsetX

和

event.offsetY

看

---

另请参见和

您是否先在PC上测试了该旋转？如果变换原点位于左上角，您可能会将元素旋转到几乎完全脱离页面。@Andrea我使用css:margin left:100%；移动画布，并按代码交换窗口大小和画布大小：canvas.style.width=

${window.innerHeight}

；canvas.style.height=

${window.innerWidth}

；所以我们可以看到场景这是一个在线演示：

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");

        // 通过摄像机和鼠标位置更新射线
        this.raycaster.setFromCamera(normalizedPosition, this.camera);

        // 计算物体和射线的焦点
        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();

        // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-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));

    }

}