Hi guy!... If You're one of the few people that come to this blog, you know for sure that it's been quite some time since the last post. I had a lot to do in the past couple of years. Almost 2 years already. Time flies by so fast! I got my Bachelor's degree. Currently, i'm pursing a Master's degree in Information System Management. But since i wanted to come back, i wanted to relearn myself all that i had forgotten. This Tutorial i'm about to give to you is how i relearned things step by step after so long. With AI these days, people sometimes think that they can do work more faster, but they don't work at all. They AI is making the work for them. And while trying to relearn things, i was tempted to use AI to go faster. But getting code from AI makes you dumber than you think when you are a beginner and don't have solid foundation. So this blog is dedicated to the creation of games using JavaScript. One of the best tools you could use in JavaScript to m...
Hi guy!... If You're one of the few people that come to this blog, you know for sure that it's been quite some time since the last post. I had a lot to do in the past couple of years. Almost 2 years already. Time flies by so fast! I got my Bachelor's degree. Currently, i'm pursing a Master's degree in Information System Management. But since i wanted to come back, i wanted to relearn myself all that i had forgotten. This Tutorial i'm about to give to you is how i relearned things step by step after so long. With AI these days, people sometimes think that they can do work more faster, but they don't work at all. They AI is making the work for them. And while trying to relearn things, i was tempted to use AI to go faster. But getting code from AI makes you dumber than you think when you are a beginner and don't have solid foundation. So this blog is dedicated to the creation of games using JavaScript. One of the best tools you could use in JavaScript to make 3d games is Three.js. I came across this wonderful framework while wondering on the internet and i saw a site dedicated to games in JavaScript, but they were 3d games. And they were so much fun and beautifully made. So i was like...How the heck did this happen to be possible? That's how everything started.
So we want to create games in 3d. But first we must learn some fundamentals in 2d.
For this purpose, i want you to create 3 files in a folder. I am using Vscode for this, so i just open the folder i created. In the folder, you create
index.html
style.css
main.js
These are quite essential. you could also just use index.html and main.js, but because we think ahead, and may want to expand this code later, it's better to keep things separated.
The index.html will only contain basic html code. you can generate the basic code in Vscode by clicking on "html : 5". To do that, you just have to write "html" and you will see the snippets appear. not "<html"
You should have something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
add the "<link>" tag and the "<script>" tag for your two files.
Something like this for the css:
<link rel="stylesheet" href="style.css">
And for the js:
<script src="/main.js"></script>
GREAT!
If you've done everything well, you now have linked your html file with your css and js file.
Now we will do something quite simple. We will add a div in the body of our html code.
something like this:
<div class="background"> </div>
But sure enough, nothing will pop up on your browser. Also, i use live server so if you want an extension that can really help you for these kind of projects in vscode, it's a must have. You don't have to reload every time you make a modification with this. when you save, it immediately refreshes the page.
Okay, back to to the div. We can't see the div, so we will go on our css to make sure that we see it well. First we set the size of the div, then it's color. Something like this:
.background{
width: 500px;
height: 500px;
background-color: black;
}
Now i'm sure you see a black Cube in your page.
Time to get into our cute main.js
First, ensure that everything works.
Just doing this to see if your js is linked perfectly
console.log("JS is running");
In your web browser, just open the inspector.
In Edge, inspect is at the bottom of the list when you make a Right click.
Now what we are going to do is to createa canvas. Those who have seen the other posts, they know what i am talking about. If you're new, or want to remember, a canvas is just an element that is used to visualize what you need. Think of Js as an artist. And artist needs paper where he can draw. The canvas is like the paper. We just draw things on it to make it appear to the human eye.
so we're going to create one just like this:
canvas = document.createElement("canvas");
so now "canvas" is our canvas.
we're going to put the canvas on our background we created before.
we first get the background
background = document.querySelector(".background");
so this code here select the element in our code that has the class background, which is our div we created earlier.
We need to do that so that we know what to put where.
Now we just have to put the canvas on the background:
background.appendChild(canvas);
we set the scale of our canvas and color too:
canvas.width = 500;
canvas.height = 500;
canvas.style.background = "gray";
Now you should see the canvas on the background. Since it's 500, it should cover the entire background.
We are going to get the context of our canvas. The context defines what we want to display on the canvas. There is "2d", and there is webgl. webgl is for "3d" that's the one that Three.js uses.
so we get the 2d context first because we have to learn about positionning. It's better to see for yourself first than me explaining.
ctx = canvas.getContext("2d");
ctx.fillStyle = "white";
ctx.fillRect(225, 225, 50, 50);
ctx takes the context, we use white color to draw. then we draw a shape. Right here i drew a square of 50x50 and this is really important. The positionning. You see the first two digits are x, and y values. the second two are for the width and height.
225 is the middle of our screen.
WHUT!??
I know it must sound really silly. But i'm pretty sure that's what is being displayed on your screen. So why is it in the middle? The canvas is 500, so normally 250 should be the middle. I started playing with placing the cube around in the background and i found something really fun. You see, here the position x= 0, y= 0 is the first pixel, at the top-left of the canvas. But why when you put it at 500, 500 you don't see anything? Well, there is something on the canvas, it's just that it's not visible. You see, we create a cube of 50, in a canvas of 500. so the canvas is already taking 50 pixels for itself. And things are being rendered from the left to the right. So by moving the cube at the bottom, we move the first line of pixels at that position. The rest is out of bound. That line is exactly at the limit. so then 250 should be the middle? No. since we have 500 for the canvas and 50 for the cube, we have to take in account that we have 550. so 225 is the place to be the middle. You can test it yourself to understand. It's better to see and experience it yourself than for me to always explain.
Now...
We're setting for THREE.JS
You can just comment all that code we just made for now. You don't want to lose that do you?
First change should be made in the index.html
add this:
<script src="https://unpkg.com/three@0.160.0/build/three.min.js"></script>
This is the public library server for three, the library we are going to use for 3d.
Right now, we are going to do something simple. We're going to make a 3d cube and make it move in the scene.
Did you notice? I said SCENE not CANVAS. with THREE, we use a scene, because a 3d environment needs more than just a flat piece of paper to draw on. It needs a scene, a camera and a renderer. Those are really most important.
So now how do we do that?
Going back to our not empty main.js
we are going to create the scene:
let scene = new THREE.Scene();
Really not that hard.
we create the camera too:
let camera = new THREE.PerspectiveCamera(
75,
1,
0.1,
1000
);
PerspectiveCamera takes four parameters:
The First one is the field of view. It's how far wide can i see in the space. A little number makes the field just as little, and a big number makes a bigger field of view.
The Second is the aspect ratio. In short is how is the camera seeing things. For example, a little aspect ration make things stretch vertically.
The Third is called the near clipping. Basically, it's how far near can we go. Pas that point, the camera can't display what you want to show
The Fourth is the far clipping pane. It's the third one but how far can you go until the camera can't see you anymore, thus not render.
Now we set the camera position:
camera.position.z = 5;
You can put it where you think it would look better. It's just testing things to see what is best position for you.
We do the same thing we did with the canvas. We're going to put the renderer on the background. It's what's drawing everything on the camera:
let background = document.querySelector(".background");
background.appendChild(renderer.domElement);
now we're going to create a 3d cube:
let geometry = new THREE.BoxGeometry(1, 1, 1);
let material = new THREE.MeshBasicMaterial({color: 0xfff0ff});
let cube = new THREE.Mesh(geometry, material);
What the hell is this?
I know it's totally different from the first one. But it's not that far from the same. Those who are used to things like the UNITY Editor will understand just the names, like material and geometry. The geometry is just our cube. we're drawing it in 3 positions, x, y and now z. z is the depth. In french it's called "Profondeur". The depth helps to know how thick an object is, but not like thickness itself. thickness is from a surface and depth is from faces. From the top face to the bottom face or from the left face to the right face. That distance is the depth.
Now we just add the cube to the scene and we render:
scene.add(cube);
renderer.render(scene, camera);
You should see a cube on the page. Well...not a cube really, more like a square, because you can't see it moving to know it's a cube. That's what we're going to do now. We're going to animate this cube. And really, it's quite easy. Animating with Three just is fun and simple.
We're going to create a function called animate, and there we will move the cube:
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
renderer.render(scene, camera);
}
We're rotating the cube on the x axis. This is called a recursive function. requestAnimationFrame calls animate, which is the function itself. we rotate the cube, and then we display that on the stage.
Animation is just a lot of iteration from the renderer to make it look like it's moving when in fact it's just many frames being displayed so fast you think it actually moves.
now we just call the function animte at the end.
animate();
Here, you just animated your first ever object in Three.js. How does it feel? You can look for more explanations on what you didn't understand. The blog is for that. And the internet too I know it's so frustrating to have to login just to put a comment but if it can help you, just see it like a must do.
Thanks again for those who followed along the way. Hope to see you in the next one.
Comments
Post a Comment