... | @@ -30,7 +30,25 @@ The first thing you need to use three.js is a simple HTML page. you can start wi |
... | @@ -30,7 +30,25 @@ The first thing you need to use three.js is a simple HTML page. you can start wi |
|
</html>
|
|
</html>
|
|
```
|
|
```
|
|
## Initialize three.js
|
|
## Initialize three.js
|
|
|
|
|
|
|
|
In order to use the three.js library, first you need to add it as a script to your HTML page. you can add the flowing code to the head section.
|
|
```
|
|
```
|
|
<!-- three.js -->
|
|
<!-- three.js -->
|
|
<script src="https://unpkg.com/three@0.126.0/build/three.js"></script>
|
|
<script src="https://unpkg.com/three@0.126.0/build/three.js"></script>
|
|
``` |
|
```
|
|
\ No newline at end of file |
|
|
|
|
|
## WebGlRenderer, Scene and Camera
|
|
|
|
This is the first common pattern we are going to see in every Three.js app.
|
|
|
|
|
|
|
|
- Create a Renderer.
|
|
|
|
- Create a Scene.
|
|
|
|
- Create a Camera.
|
|
|
|
The renderer is the place where we are going to put the result of our scene. In Three.js we can have multiple scenes and each one can have different objects.
|
|
|
|
|
|
|
|
![image](uploads/d21895e6a5457bebfc3ded3e5b5b652c/image.png)
|
|
|
|
|
|
|
|
Here we create our WebGLRenderer, we pass it the size of the window as a parameter and then append it to the DOM.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|