174 lines
7.7 KiB
Markdown
174 lines
7.7 KiB
Markdown
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");
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
|