Skip to content

Latest commit

 

History

History
executable file
·
173 lines (150 loc) · 7.91 KB

README.md

File metadata and controls

executable file
·
173 lines (150 loc) · 7.91 KB

PickEvent3D拣选事件


  • 演示准备

创建一个演示场景,其中我们定义了abc三个不通的cube:
class Main {

    protected _egret3DCanvas: egret3d.Egret3DCanvas;
    protected view1: egret3d.View3D;
    protected cube_A: egret3d.Mesh;
    protected cube_B: egret3d.Mesh;
    protected cube_C: egret3d.Mesh;


    public constructor() {

        ///创建3DCanvas
        this._egret3DCanvas = new egret3d.Egret3DCanvas();
        this._egret3DCanvas.x = 0;
        this._egret3DCanvas.y = 0;
        this._egret3DCanvas.width = window.innerWidth;
        this._egret3DCanvas.height = window.innerHeight;
        this._egret3DCanvas.start();
        ///创建View3D
        this.view1 = new egret3d.View3D(0, 0, window.innerWidth, window.innerHeight);
        this.view1.camera3D.lookAt(new egret3d.Vector3D(0, 1000, -1000), new egret3d.Vector3D(0, 0, 0));
        this.view1.backColor = 0xff888888;
        this._egret3DCanvas.addView3D(this.view1);
        ///启动3DCanvas
        this._egret3DCanvas.start();
        ///创建立方体A,放置于场景内(100,0,0)位置
        var mat_cube_A: egret3d.TextureMaterial = new egret3d.TextureMaterial();
        var geometery_Cube_A: egret3d.CubeGeometry = new egret3d.CubeGeometry();
        this.cube_A = new egret3d.Mesh(geometery_Cube_A, mat_cube_A);
        this.cube_A.x = 100;
        this.cube_A.name = "A";
        this.view1.addChild3D(this.cube_A);
        ///创建立方体B,放置于场景内(0,0,0)位置
        var mat_cube_B: egret3d.TextureMaterial = new egret3d.TextureMaterial();
        var geometery_Cube_B: egret3d.CubeGeometry = new egret3d.CubeGeometry();
        this.cube_B = new egret3d.Mesh(geometery_Cube_B, mat_cube_B);
        this.cube_B.x = 0;
        this.cube_B.name = "B";
        this.view1.addChild3D(this.cube_B);
        ///创建立方体B,放置于场景内(-100,0,0)位置
        var mat_cube_C: egret3d.TextureMaterial = new egret3d.TextureMaterial();
        var geometery_Cube_C: egret3d.CubeGeometry = new egret3d.CubeGeometry();
        this.cube_C = new egret3d.Mesh(geometery_Cube_C, mat_cube_C);
        this.cube_C.x = -100;
        this.cube_C.name = "C";
        this.view1.addChild3D(this.cube_C);
        ///创建面片,放置于场景内(0,0,0)位置
        var mat_Plane: egret3d.TextureMaterial = new egret3d.TextureMaterial();
        var geometery_Plane: egret3d.PlaneGeometry = new egret3d.PlaneGeometry();
        var plane = new egret3d.Mesh(geometery_Plane, mat_Plane);
        this.view1.addChild3D(plane);

    }

}      

1) Pick事件是引擎中可操作物体拣选事件。
2)需要注册对象IRender,开启enablePick后才能监听了PickEvent3D事件,触摸和鼠标点选都是可以触发该事件的。
3) Pick事件可以分为PICK_CLICK(点击拣选事件),PICK_DOWN(按下拣选事件),PICK_UP(弹起拣选事件),PICK_MOVE(光标移动拣选事件)和
	PICK_WHEEL(滚轮滚动拣选事件)。
4) 示例代码:我们这里书写一个测试Pick事件的代码,选中的cube将变为红色。

class Main {

    protected _egret3DCanvas: egret3d.Egret3DCanvas;
    protected view1: egret3d.View3D;
    protected cube_A: egret3d.Mesh;
    protected cube_B: egret3d.Mesh;
    protected cube_C: egret3d.Mesh;
    protected cube_Pick: egret3d.Mesh;

    public constructor() {

        ///创建3DCanvas
        this._egret3DCanvas = new egret3d.Egret3DCanvas();
        this._egret3DCanvas.x = 0;
        this._egret3DCanvas.y = 0;
        this._egret3DCanvas.width = window.innerWidth;
        this._egret3DCanvas.height = window.innerHeight;
        this._egret3DCanvas.start();
        ///创建View3D
        this.view1 = new egret3d.View3D(0, 0, window.innerWidth, window.innerHeight);
        this.view1.camera3D.lookAt(new egret3d.Vector3D(0, 1000, -1000), new egret3d.Vector3D(0, 0, 0));
        this.view1.backColor = 0xff888888;
        this._egret3DCanvas.addView3D(this.view1);
        ///启动3DCanvas
        this._egret3DCanvas.start();
        ///创建立方体A,放置于场景内(100,0,0)位置
        var mat_cube_A: egret3d.TextureMaterial = new egret3d.TextureMaterial();
        var geometery_Cube_A: egret3d.CubeGeometry = new egret3d.CubeGeometry();
        this.cube_A = new egret3d.Mesh(geometery_Cube_A, mat_cube_A);
        this.cube_A.x = 100;
        this.cube_A.name = "A";
        this.view1.addChild3D(this.cube_A);
        ///创建立方体B,放置于场景内(0,0,0)位置
        var mat_cube_B: egret3d.TextureMaterial = new egret3d.TextureMaterial();
        var geometery_Cube_B: egret3d.CubeGeometry = new egret3d.CubeGeometry();
        this.cube_B = new egret3d.Mesh(geometery_Cube_B, mat_cube_B);
        this.cube_B.x = 0;
        this.cube_B.name = "B";
        this.view1.addChild3D(this.cube_B);
        ///创建立方体B,放置于场景内(-100,0,0)位置
        var mat_cube_C: egret3d.TextureMaterial = new egret3d.TextureMaterial();
        var geometery_Cube_C: egret3d.CubeGeometry = new egret3d.CubeGeometry();
        this.cube_C = new egret3d.Mesh(geometery_Cube_C, mat_cube_C);
        this.cube_C.x = -100;
        this.cube_C.name = "C";
        this.view1.addChild3D(this.cube_C);
        ///创建面片,放置于场景内(0,0,0)位置
        var mat_Plane: egret3d.TextureMaterial = new egret3d.TextureMaterial();
        var geometery_Plane: egret3d.PlaneGeometry = new egret3d.PlaneGeometry();
        var plane = new egret3d.Mesh(geometery_Plane, mat_Plane);
        this.view1.addChild3D(plane);

        ///开启拣选功能
        this.cube_A.enablePick = true;
        this.cube_B.enablePick = true;
        this.cube_C.enablePick = true;

        ///给Cube注册事件。
        this.cube_A.addEventListener(egret3d.PickEvent3D.PICK_CLICK, this.OnPickClick, this);
        this.cube_A.addEventListener(egret3d.PickEvent3D.PICK_DOWN, this.OnPickDown, this);
        this.cube_A.addEventListener(egret3d.PickEvent3D.PICK_UP, this.OnPickUp, this);
        this.cube_B.addEventListener(egret3d.PickEvent3D.PICK_CLICK, this.OnPickClick, this);
        this.cube_B.addEventListener(egret3d.PickEvent3D.PICK_DOWN, this.OnPickDown, this);
        this.cube_B.addEventListener(egret3d.PickEvent3D.PICK_UP, this.OnPickUp, this);
        this.cube_C.addEventListener(egret3d.PickEvent3D.PICK_CLICK, this.OnPickClick, this);
        this.cube_C.addEventListener(egret3d.PickEvent3D.PICK_DOWN, this.OnPickDown, this);
        this.cube_C.addEventListener(egret3d.PickEvent3D.PICK_UP, this.OnPickUp, this);
    }
    ///pick点击事件,这里我们只输出点选日志信息。
    public OnPickClick(e: egret3d.PickEvent3D) {
        var mesh: egret3d.Mesh = e.target;
        ///相交面索引
        var faceIndex = e.pickResult.faceIndex;
        ///pick的世界坐标
        var pos = e.pickResult.globalPosition;
        ///这里我们将信息输出
        console.log("OnPickClick:" + " Name:" + mesh.name + " faceIndex:" + faceIndex + " pos:" + pos.x + "," + pos.y + "," + pos.z);
    }
    ///pick按下事件,这里我们只输出点选日志信息
    public OnPickDown(e: egret3d.PickEvent3D) {
        console.log("OnPickDown");
        if (this.cube_Pick != null) {
            ///将上次pick对象设置为白色
            this.cube_Pick.material.diffuseColor = 0xffffff;
        }
        ///设置选中对象为红色
        this.cube_Pick = e.target;
        this.cube_Pick.material.diffuseColor = 0xff0000;
    }
    ///pick回弹事件,这里我们只输出点选日志信息
    public OnPickUp(e: egret3d.PickEvent3D) {
        console.log("OnPickUp");
    }

}