Oh dear? Why did I set the node click callback to fail to respond?

I remember that there was a problem when I was writing chicken patting. To capture the click event of volleyball, I added node event to 3d node according to 2d writing method, but it didn't respond. The code looks like this.

this.node_volleyball.on(Node.EventType.TOUCH_START, () => {
    console.log('It's impossible to see me')
}, this);

Later in the forum to find a way, muddleheaded to write on the end.

However, after I recently upgraded to v1.0.1, I found that the previous method didn't work. Fortunately, a solution has been found in the latest official documents. That's - Radiographic testing.

What is radiography? Check it online. This is the way of radiographic testing.

It doesn't seem to be what I want. So, I made up the logic of X-ray.

First of all, this is the perspective we see. Suppose we click on one of the screens (red dots in the picture).

Because this angle of view is provided by the camera, we combine this point with the camera to form a ray.

Next, check that the ray passes through the objects, which may contain the objects we clicked on.

You can also understand this by looking at an area with your eyes and extending your fingers. You can see that the fingers block a little line of sight, and draw a ray from your line of sight through the fingers. The object that the ray passes through is exactly the object you want to click on.

Let's see how to use it.

Since it's radiography, of course, you need to create a ray first.

private _ray: geometry.ray = new geometry.ray();

Touch to detect global system events.

systemEvent.on(SystemEventType.TOUCH_START, this.onTouchStart, this);
//onTouchStart(touch: Touch, event: EventTouch)

When you start to draw rays, you need a camera! Remember that it's decided by the point of click and the camera.

this.camera_3d.screenPointToRay(touch._point.x, touch._point.y, this._ray);

The next step is to detect what the line goes through.

creator 3d provides three detection schemes, which can be used together.

Ray detection based on physical Collider:

We first add colliders to the objects to be detected.

In the code, you can call the physical collider detection method.

//Ray detection based on physical Collider
if (PhysicsSystem.instance.raycast(this._ray)) {
    const r = PhysicsSystem.instance.raycastResults;
    for (let i = 0; i < r.length; i++) {
        const item = r[i];
        if (item.collider.node.uuid == this.node_volleyball.uuid) {
            this.label_info.string = 'Volleyball.'
        }
    }
}

Model based radiography:

Roughly the same as physical model checking, using model components.

The test code is as follows.

//Model based radiography
const rs = director.getScene().renderScene;
if (rs.raycastSingleModel(this._ray, this.model_basketball.model)) {
    const r = rs.rayResultSingleModel;
    for (let i = 0; i < r.length; i++) {
        const item = r[i];
        if (item.node.uuid == this.model_basketball.node.uuid) {
            this.label_info.string = 'Point the basketball.'
        }
    }
}

Radiography based on UITransform components:

Because canvas has its own camera entity, we need to switch the camera, the code is as follows.

//Ray detection based on UITransform component
const uiCamera = this.canvas_2d.camera;
uiCamera.screenPointToRay(this._ray, touch._point.x, touch._point.y);
if (rs.raycastAllCanvas(this._ray)) {
    const result = rs.rayResultCanvas;
    for (let i = result.length; i--;) {
        const item = result[i];
        if (item.node.uuid == this.label_info.node.uuid) {
            this.label_info.string = 'Click the text';
        }
    }
}

Let's see the final effect together!

Official documents Write very detailed, here is just a little collation, if there are errors, welcome to point out! I hope it can help my friends who are learning Cocos Creator 3D.

Complete code
Original link