Changing Camera Angle

Create a 3D RPG Game with THREE.js Moving Around Your Environment
6 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
€67.18
List Price:  €95.97
You save:  €28.79
£55.86
List Price:  £79.80
You save:  £23.94
CA$97.87
List Price:  CA$139.82
You save:  CA$41.95
A$107.62
List Price:  A$153.75
You save:  A$46.13
S$94.24
List Price:  S$134.64
You save:  S$40.39
HK$544.83
List Price:  HK$778.36
You save:  HK$233.53
CHF 62.54
List Price:  CHF 89.34
You save:  CHF 26.80
NOK kr774.97
List Price:  NOK kr1,107.14
You save:  NOK kr332.17
DKK kr501
List Price:  DKK kr715.75
You save:  DKK kr214.74
NZ$119.95
List Price:  NZ$171.37
You save:  NZ$51.41
د.إ257.07
List Price:  د.إ367.26
You save:  د.إ110.19
৳8,361.58
List Price:  ৳11,945.63
You save:  ৳3,584.04
₹5,909.84
List Price:  ₹8,442.99
You save:  ₹2,533.15
RM312.71
List Price:  RM446.75
You save:  RM134.04
₦118,484.88
List Price:  ₦169,271.38
You save:  ₦50,786.49
₨19,443.22
List Price:  ₨27,777.22
You save:  ₨8,334
฿2,412.28
List Price:  ฿3,446.26
You save:  ฿1,033.98
₺2,418.32
List Price:  ₺3,454.90
You save:  ₺1,036.57
B$406.01
List Price:  B$580.04
You save:  B$174.03
R1,267.89
List Price:  R1,811.35
You save:  R543.45
Лв131.37
List Price:  Лв187.69
You save:  Лв56.31
₩98,301.65
List Price:  ₩140,436.95
You save:  ₩42,135.30
₪259.10
List Price:  ₪370.16
You save:  ₪111.06
₱4,125.14
List Price:  ₱5,893.31
You save:  ₱1,768.17
¥10,832.35
List Price:  ¥15,475.45
You save:  ¥4,643.10
MX$1,429.79
List Price:  MX$2,042.64
You save:  MX$612.85
QR255.18
List Price:  QR364.56
You save:  QR109.38
P956.90
List Price:  P1,367.06
You save:  P410.16
KSh9,061.51
List Price:  KSh12,945.58
You save:  KSh3,884.06
E£3,475.01
List Price:  E£4,964.52
You save:  E£1,489.50
ብር8,566
List Price:  ብር12,237.67
You save:  ብር3,671.66
Kz63,900.87
List Price:  Kz91,290.87
You save:  Kz27,390
CLP$69,057.73
List Price:  CLP$98,658.13
You save:  CLP$29,600.40
CN¥506.93
List Price:  CN¥724.22
You save:  CN¥217.29
RD$4,217.06
List Price:  RD$6,024.63
You save:  RD$1,807.57
DA9,397.90
List Price:  DA13,426.15
You save:  DA4,028.25
FJ$159.29
List Price:  FJ$227.57
You save:  FJ$68.27
Q540.13
List Price:  Q771.64
You save:  Q231.51
GY$14,638.82
List Price:  GY$20,913.50
You save:  GY$6,274.67
ISK kr9,776.20
List Price:  ISK kr13,966.60
You save:  ISK kr4,190.40
DH703.91
List Price:  DH1,005.63
You save:  DH301.72
L1,275.33
List Price:  L1,821.98
You save:  L546.64
ден4,132.76
List Price:  ден5,904.20
You save:  ден1,771.43
MOP$561.01
List Price:  MOP$801.48
You save:  MOP$240.46
N$1,268.91
List Price:  N$1,812.81
You save:  N$543.90
C$2,574.70
List Price:  C$3,678.31
You save:  C$1,103.60
रु9,449.77
List Price:  रु13,500.25
You save:  रु4,050.48
S/265.32
List Price:  S/379.05
You save:  S/113.72
K281.71
List Price:  K402.47
You save:  K120.75
SAR262.77
List Price:  SAR375.40
You save:  SAR112.63
ZK1,934.92
List Price:  ZK2,764.29
You save:  ZK829.37
L334.42
List Price:  L477.77
You save:  L143.34
Kč1,702.59
List Price:  Kč2,432.37
You save:  Kč729.78
Ft27,646.05
List Price:  Ft39,496.05
You save:  Ft11,850
SEK kr772.42
List Price:  SEK kr1,103.50
You save:  SEK kr331.08
ARS$70,259.44
List Price:  ARS$100,374.93
You save:  ARS$30,115.49
Bs483.50
List Price:  Bs690.75
You save:  Bs207.24
COP$307,238.59
List Price:  COP$438,931.09
You save:  COP$131,692.49
₡35,641.51
List Price:  ₡50,918.63
You save:  ₡15,277.11
L1,768.23
List Price:  L2,526.16
You save:  L757.92
₲546,248.87
List Price:  ₲780,388.98
You save:  ₲234,140.10
$U2,983.14
List Price:  $U4,261.82
You save:  $U1,278.67
zł291.40
List Price:  zł416.31
You save:  zł124.90
Already have an account? Log In

Transcript

Most video games allow you to switch the camera angle. I've added a button here to allow us to do just that. So we've got 12345 different camera angles. So let's have a look at how we do that in code. We know dealing with the v two folder, so have a look at the v two folder, game dot j s to follow along with the description in the init function in the loader for the girl walk SPX, towards the end of that, there's now a method of the game called called create cameras. That's where we create the cameras.

There's also a create dummy environment method which creates the yellow blocks You've just seen. So let's have a look at the Create cameras. Here's the Create cameras method of the game. What it's doing is it's creating a bunch of an object 3d. Object 3d has got a matrix, a position and a rotation. And we're setting the position.

And then we're setting this particular object to have the parent of our Character. The Character has been stored in the property of the game called this top player object. So we've got a front, we've got a back, we've got a wide, we've got an overhead, and we've got to collect. That's a close up of the character. Once she's crouching down, we store them In a objects from back wide overhead and collect, we then set our active camera to be the wide one. Set the camera fade value to be point one.

And then we do a set timeout, which changes the active camera to the back one. After two seconds, the active camera is actually a setter. And we take the object and apply that to cameras dot active. We've made a small change to the animate method of the game. We check whether or not cameras active is defined. And if it is, we're going to use a method of the vector three class that's part of the three library to blend between two different vectors.

This is going to move towards this position, this amount. So since this is set to point one, as we saw earlier, it's going to be, it's going to move towards that position by 10%. Get world position finds the world position of an object. And it's a particular point on the object. In this instance, we want we want the root of it, which a three dot back to three, without any parameters will give a zero vector, so it'll be 000. So in other words, what's the world position of 000 in this object, and then we find the position of our character.

We clone it and then we move up the y value by 60 units. And then we get our camera to look at that position. So what's happened there is it's moved its actual position of the camera to be moving from where it currently is to towards where the active camera is positioned. And then it looks at the player every time so he does that every time. Anything up to 60 times a second. And that's gonna allow the camera to boot to blend between different positions.

And how do we choose those positions? Well, if we go to the to the game, first of all, we'll open the console. Then we need to delete game player, cameras, active otherwise that's going to override when to store the game player object position we need to stick to that position and then we can set the camera position to say that and then we need to look at position it too far either So, come back down to 500 There we go, sadly, but it allows you to get the angle of a camera and then you clock these numbers and use that as your value. And for your, your camera that's attached attached to the player. And using that method, I selected the values to give those results

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.