Layabox 3D游戏开发学习笔记---射线检测，鼠标控制物体运动

核心要点：3D物体碰撞是靠射线检测，射线与碰撞器相撞获取对应的碰撞点信息。

class RayPicking03 {
    private ray: Laya.Ray;
    private point: Laya.Vector2 = new Laya.Vector2();
    private _outHitInfo: Laya.RaycastHit;
    private _position: Laya.Vector3;
    private _upVector3: Laya.Vector3;
    private _vector3: Laya.Vector3;
    private _offsetVector3: Laya.Vector3;
    private box: Laya.MeshSprite3D;
    private _rotateV3:Laya.Vector3;
    private camera: Laya.Camera;
    private label: Laya.Label;
    constructor() {
        Laya3D.init(0, 0, true);//初始化3D
        Laya.stage.scaleMode = "full";//屏幕缩放方式
        Laya.stage.screenMode = "none";
        Laya.Stat.show();

        var scene: Laya.Scene = Laya.stage.addChild(new Laya.Scene()) as Laya.Scene;//添加场景

        this.point = new Laya.Vector2();//位置信息
        this.ray = new Laya.Ray(new Laya.Vector3(0, 0, 0), new Laya.Vector3(0, 0, 0));//初始化射线
        this._outHitInfo = new Laya.RaycastHit();//初始化射线信息
        this._position = new Laya.Vector3(0, 0.25, 0);//位置
        this._upVector3 = new Laya.Vector3(0, 1, 0);
        this._rotateV3 = new Laya.Vector3(1, 0, 1);
        this._vector3 = new Laya.Vector3();
        this._offsetVector3 = new Laya.Vector3(0, 0.15, 0)

        //初始化照相机
        this.camera = scene.addChild(new Laya.Camera(0, 0.1, 100)) as Laya.Camera;
        this.camera.transform.translate(new Laya.Vector3(0, 2, 5));
        this.camera.transform.rotate(new Laya.Vector3(-15, 0, 0), true, false);
        this.camera.clearColor = null;

        //方向光
        var directionLight: Laya.DirectionLight = scene.addChild(new Laya.DirectionLight()) as Laya.DirectionLight;
        directionLight.color = new Laya.Vector3(0.6, 0.6, 0.6);
        directionLight.direction = new Laya.Vector3(1, -1, -1);

        var plane: Laya.MeshSprite3D = scene.addChild(new Laya.MeshSprite3D(new Laya.PlaneMesh(6, 6, 10, 10))) as Laya.MeshSprite3D;//创建平面物体
        var planeMat: Laya.StandardMaterial = new Laya.StandardMaterial();//标准材质
        planeMat.diffuseTexture = Laya.Texture2D.load("../bin/res/layabox.png");//添加材质
        planeMat.albedo = new Laya.Vector4(0.9, 0.9, 0.9, 1);
        plane.meshRender.material = planeMat;

        var meshCollider = plane.addComponent(Laya.MeshCollider) as Laya.MeshCollider;//网格碰撞器
        meshCollider.mesh = plane.meshFilter.sharedMesh;//网格过滤器，获取共享网格

        this.box = scene.addChild(new Laya.MeshSprite3D(new Laya.SphereMesh(0.2, 8, 8))) as Laya.MeshSprite3D;//创建立方体
        var mat: Laya.StandardMaterial = new Laya.StandardMaterial();
        mat.diffuseTexture = Laya.Texture2D.load("../bin/res/layabox.png");
        this.box.meshRender.material = mat;

        Laya.timer.frameLoop(1, this, this.checkHit);

        this.loadUI();
    }
    private checkHit(): void {
        this.box.transform.position = this._position;
        //this.box.transform.rotate(this._rotateV3, true, false)
        //从屏幕空间生成射线
        this.point.elements[0] = Laya.MouseManager.instance.mouseX;//鼠标X坐标
        this.point.elements[1] = Laya.MouseManager.instance.mouseY;//鼠标Y坐标
        this.camera.viewportPointToRay(this.point, this.ray);//从摄像机到鼠标点击位置生成射线
        Laya.Physics.rayCast(this.ray, this._outHitInfo, 30, 0);//生成射线
    }

    private loadUI(): void {

        this.label = new Laya.Label();
        this.label.text = "点击移动";
        this.label.pos(Laya.Browser.clientWidth / 2.5, 100);
        this.label.fontSize = 50;
        this.label.color = "#40FF40";
        Laya.stage.addChild(this.label);

        //鼠标事件
        Laya.stage.on(Laya.Event.MOUSE_UP, this, function (): void {
            if (this._outHitInfo.distance !== -1) {
                Laya.Vector3.add(this._outHitInfo.position, this._offsetVector3, this._vector3);
                Laya.Tween.to(this._position, { x: this._vector3.x, y: this._vector3.y, z: this._vector3.z }, 500/**,Ease.circIn*/);
            }
        });
    }
}