Using the Raycaster Class to Avoid Walking Through the Environment

Create a 3D RPG Game with THREE.js Moving Around Your Environment
5 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$69.99
List Price:  $99.99
You save:  $30
€65.59
List Price:  €93.70
You save:  €28.11
£56.03
List Price:  £80.05
You save:  £24.01
CA$96.39
List Price:  CA$137.71
You save:  CA$41.31
A$107.98
List Price:  A$154.26
You save:  A$46.28
S$95.50
List Price:  S$136.44
You save:  S$40.93
HK$547.57
List Price:  HK$782.28
You save:  HK$234.70
CHF 64.43
List Price:  CHF 92.05
You save:  CHF 27.61
NOK kr776.82
List Price:  NOK kr1,109.79
You save:  NOK kr332.97
DKK kr489.21
List Price:  DKK kr698.91
You save:  DKK kr209.69
NZ$118.81
List Price:  NZ$169.74
You save:  NZ$50.92
د.إ257.06
List Price:  د.إ367.25
You save:  د.إ110.18
৳7,729.18
List Price:  ৳11,042.16
You save:  ৳3,312.97
₹5,842.93
List Price:  ₹8,347.41
You save:  ₹2,504.47
RM333.67
List Price:  RM476.70
You save:  RM143.02
₦92,745.84
List Price:  ₦132,499.74
You save:  ₦39,753.90
₨19,599.98
List Price:  ₨28,001.17
You save:  ₨8,401.19
฿2,600.12
List Price:  ฿3,714.62
You save:  ฿1,114.50
₺2,271.31
List Price:  ₺3,244.87
You save:  ₺973.56
B$363.64
List Price:  B$519.51
You save:  B$155.87
R1,308.28
List Price:  R1,869.05
You save:  R560.77
Лв128.30
List Price:  Лв183.29
You save:  Лв54.99
₩96,996.60
List Price:  ₩138,572.52
You save:  ₩41,575.91
₪261.41
List Price:  ₪373.46
You save:  ₪112.04
₱4,045.59
List Price:  ₱5,779.67
You save:  ₱1,734.07
¥11,052.75
List Price:  ¥15,790.32
You save:  ¥4,737.57
MX$1,197.81
List Price:  MX$1,711.23
You save:  MX$513.42
QR257.31
List Price:  QR367.61
You save:  QR110.29
P1,000.11
List Price:  P1,428.79
You save:  P428.68
KSh9,335.98
List Price:  KSh13,337.69
You save:  KSh4,001.70
E£3,349.95
List Price:  E£4,785.86
You save:  E£1,435.90
ብር4,013.63
List Price:  ብር5,734.01
You save:  ብር1,720.37
Kz58,409.45
List Price:  Kz83,445.65
You save:  Kz25,036.20
CLP$67,298.07
List Price:  CLP$96,144.23
You save:  CLP$28,846.15
CN¥506.79
List Price:  CN¥724.02
You save:  CN¥217.23
RD$4,121.81
List Price:  RD$5,888.55
You save:  RD$1,766.74
DA9,423.87
List Price:  DA13,463.25
You save:  DA4,039.38
FJ$159.96
List Price:  FJ$228.52
You save:  FJ$68.56
Q547.38
List Price:  Q782
You save:  Q234.62
GY$14,742.16
List Price:  GY$21,061.13
You save:  GY$6,318.97
ISK kr9,832.89
List Price:  ISK kr14,047.59
You save:  ISK kr4,214.70
DH712.24
List Price:  DH1,017.53
You save:  DH305.29
L1,243.01
List Price:  L1,775.81
You save:  L532.79
ден4,046.68
List Price:  ден5,781.23
You save:  ден1,734.54
MOP$564.08
List Price:  MOP$805.87
You save:  MOP$241.78
N$1,315.96
List Price:  N$1,880.02
You save:  N$564.06
C$2,592.36
List Price:  C$3,703.54
You save:  C$1,111.17
रु9,349.94
List Price:  रु13,357.63
You save:  रु4,007.69
S/263.70
List Price:  S/376.73
You save:  S/113.03
K271.96
List Price:  K388.53
You save:  K116.57
SAR262.49
List Price:  SAR375.01
You save:  SAR112.51
ZK1,886.12
List Price:  ZK2,694.57
You save:  ZK808.45
L326.39
List Price:  L466.29
You save:  L139.90
Kč1,650.20
List Price:  Kč2,357.53
You save:  Kč707.33
Ft25,629.21
List Price:  Ft36,614.73
You save:  Ft10,985.52
SEK kr770.71
List Price:  SEK kr1,101.06
You save:  SEK kr330.35
ARS$61,698.11
List Price:  ARS$88,143.94
You save:  ARS$26,445.82
Bs486.86
List Price:  Bs695.54
You save:  Bs208.68
COP$271,471.23
List Price:  COP$387,832.67
You save:  COP$116,361.43
₡35,819.54
List Price:  ₡51,172.97
You save:  ₡15,353.42
L1,740.31
List Price:  L2,486.27
You save:  L745.95
₲526,285.13
List Price:  ₲751,868.13
You save:  ₲225,582.99
$U2,699.91
List Price:  $U3,857.19
You save:  $U1,157.27
zł284.80
List Price:  zł406.88
You save:  zł122.07
Already have an account? Log In

Transcript

Sticking with the v2 folder, if we use the game from there, you'll see that we've got the yellow blocks. But if we try and walk through one, we prevented two from doing so. So how's that working? Well, it's going to use ray casting someone look at the code, you'll see that there's now a move player method of the game. It gets passed in a Delta time, that's how much time is elapsed in seconds. Since we last called move plan.

First thing we do is clone the position of a player object. And we ramp up the y value by 60. So that positions it roughly around a thigh, we get the direction which is directly For words of the character, if we've orientated our character correctly, we can use the method of our object 3d, which is get world direction. And in this instance, you'll be the transform Zed axis, and then we use a ray caster. Ray caster allows us to projector Ray forwards from a particular position in a particular direction. So the position is going to be directly from the character and the direction initially is down.

Her is that access, which will rotate round as she rotates around. We then define blocked as being false. So by default, you will be able to move alone through our environment. And we'll look at the environment proxy in a minute. Through our environment children, which effectively is just all the yellow blocks, we call the ray caster intersect object method pass in this particular object. So each one of the yellow boxes in turn, if there is an intersect, then the length of our intersect array is going to be greater than zero, there might be multiple intersects, we're interested in the closest one to us.

These intersects are ordered by distance. So the first one is going to be the closest if the first one is less than 50 units. And that's going to be described as blocked. And we no need to look any further because our character is already blocked. So we can break out of this loop. So only if it's not blocked, and the move forwards value is greater than zero.

That's, that's defined by our joystick Then we actually translate our object along its Zed axis, we also need to know whether or not it's too close to the sides as well. So we cast in the left direction, doing exactly the same thing, but this time, we've got minus one in the x. So it's going along that way. And then we apply the matrix of our objects, so that that particular vector is rotated into world coordinates. And then we create a new Ray caster, do exactly the same thing. It is within the parameters, then we translate the objects to be further out.

If we walk along. A slight angle that will just position is that we moved, slightly skewing along the obstruction We do the same thing in the right direction, we just have a quick look at the creating our dummy environment. First of all, we create a group to put all the blocks in. We give it a name, and we add it to our scene, we create a box geometry, which is 150 units. And then we give it a basic material, which is a yellow color. And then we position many, many of these blocks starting at minus 1000 in the X and incremented in values of 300.

So the 150 wide, a gap of 150 and then another block will appear. We do that in the X and Zed directions. And then we assign environment proxy is a property of our game. And it's the entire group. So That particular group will have lots of children. That's something that we can then use in our ray casting, a diagram might be useful, and it shows how the ray goes forwards.

That's the limit of 50. Once we move forwards, and we get to the point where the length of this ray is less than 50, that is going to be intersecting with this object. And so we don't want to allow it to move forwards anymore. When we cast into the left. That's the effect is going to happen. Casting over in this direction.

And we make our limit slightly wider, shows the method of ray casting. stopping us walking through the blocks

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.