Blog - Raycast on Phaser Camera3D Plugin

Page / - last modified by Victor Zhang on 00:21, 22/07/2020

Raycast on Phaser Camera3D Plugin

last modified by Victor Zhang

on 00:21, 22/07/2020

Table of Contents

The problem is actually discovered by a student when trying to implement a forward running game (They need to click the enemy)

The camera3d class provides a ray function: https://photonstorm.github.io/phaser3-docs/Phaser.Cameras.Sprite3D.PerspectiveCamera.html#getPickRay__anchor

In that way, calculating the x,y on the target plane and then do some hit-test manually would do the job

Used example: http://labs.phaser.io/edit.html?src=src\camera\3D%20camera\floor.js

Modify line 33 to : var balls = camera.createRect({ x: 8, y: 1, z: 8 }, 32, 'ball');

Add following block to create():
balls.forEach( function(ball){
ball.setData('tag', 'ball'+ball.x+':'+ball.y+':'+ball.z);
} )
this.input.on('pointerdown', function (pointer) {
ray = camera.getPickRay(pointer.x, pointer.y);
balls.forEach( function(ball){
// r is hardcoded here
let r = 4;
// calculate x y @ z of the object
let tx, ty;
let tz = ball.z;
tx = ray.origin.x + ray.direction.x * (tz - ray.origin.z ) / ray.direction.z;
ty = ray.origin.y + ray.direction.y * (ray.origin.z - tz) / ray.direction.z;
let tl = Math.sqrt( Math.pow(tx - ball.x, 2) + Math.pow(ty - ball.y, 2) );
if( tl < r ){
console.log(ball.getData('tag')+' isHit');
ball.gameObject.alpha = 0;
}
} );
}, this);

Explanation:

the radius is hard coded here (5)

more complex hit testing will need to be implemented for complex shapes

manually enumerated through all object, inefficient (may need to implement some obvious exclusion for optimization)

Extra problem

Why is y axis reversed here?

To study:

Math of https://codepen.io/samme/pen/PBMaLJ ray blocking ,will be useful for next project

Posted by Victor Zhang · Permalink