SPACE
to play / pauseARROW RIGHT
orL
to go forwardARROW LEFT
orJ
to go backwardARROW UP
to increase volumeARROW DOWN
to decrease volumeF
to toggle fullscreenM
to toggle mute0 to 9
to go to the corresponding part of the videoSHIFT
+,
to decrease playback speedSHIFT
+.
or;
to increase playback speed
Shortcuts ⌨️
⚠️ Update
The latest versions of Safari support the fullscreen
API without prefixes.
Yet, it’s considered good practice to use the prefixes for two reasons:
- Some users use old versions of Safari
- The
fullscreen
API is not supported on iPhone, but it’s supported on iPad, only with prefixes
Unlock content 🔓
To get access to 93 hours of video, a members-only Discord server, subtitles, lesson resources, future updates and much more join us for only $95!
Want to learn more? 🖖
That's the end of the free part 😔
To get access to 93 hours of video, a members-only Discord server and future updates, join us for only $95!
Introduction 00:00
Our canvas currently has a fixed resolution of 800x600
. You don't necessarily need your WebGL to fit the whole screen, but if you want an immersive experience, it might be better.
First, we would like to have the canvas take all available space. Then, we need to make sure that it still fits if the user resizes their window. Finally, we need to give the user a way to experiment with the experience in fullscreen.
Setup 00:35
The starter contains what we finished within the previous lesson. We have our cube in the center, and we can drag and drop to move the camera.
Fit in the viewport 00:54
To make the canvas fit perfectly in the viewport, instead of using fixed numbers in the sizes
variable, use the window.innerWidth
and window.innerHeight
:
// ...
// Sizes
const sizes = {
width: window.innerWidth,
height: window.innerHeight
}
// ...
You can see that the canvas now has the width and height of the viewport. Unfortunately, there is a white margin and a scroll bar (try to scroll if you don't see any scrollbar).
The problem is that browsers all have default stylings like more significant titles, underlined links, space between paragraphs, and paddings on the page. There are many ways of fixing that, and it might depend on the rest of your website. If you have other content, try not to break any of those while doing this.
We will keep things simple and fix the position of the canvas using CSS.
Our HTML is already loading the src/style.css
file:
<link rel="stylesheet" href="./style.css">
You can write standard CSS just like you're used to, and the page will automatically reload.
A good thing to do first would be to remove any type of margin
or padding
on all elements by using a wildcard *
:
*
{
margin: 0;
padding: 0;
}
Then, we can fix the canvas on the top left using its webgl
class to select it:
.webgl
{
position: fixed;
top: 0;
left: 0;
}
You don't need to specify width
or height
on the canvas because Three.js is already taking care of that when you call the renderer.setSize(...)
method.
This is a good opportunity to fix a small problem on our canvas. Maybe you've noticed a blue outline on it when drag and dropping. This mostly happens on latest versions of Chrome. To fix that, we can simply add an outline: none;
on the .webgl
:
.webgl
{
position: fixed;
top: 0;
left: 0;
outline: none;
}
If you want to remove any type of scrolling even on touch screens, you can add an overflow: hidden
on both html
and body
:
html,
body
{
overflow: hidden;
}
You can now enjoy your WebGL in all its glory. Unfortunately, if you resize the window, the canvas won't follow.
We need to deal with the resize.
How to use it 🤔
- Download the Starter pack or Final project
- Unzip it
- Open your terminal and go to the unzip folder
-
Run
npm install
to install dependencies
(if your terminal warns you about vulnerabilities, ignore it) -
Run
npm run dev
to launch the local server
(project should open on your default browser automatically) - Start coding
- The JS is located in src/script.js
- The HTML is located in src/index.html
- The CSS is located in src/style.css