... | ... | @@ -48,7 +48,33 @@ The renderer is the place where we are going to put the result of our scene. In |
|
|
![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.
|
|
|
```
|
|
|
// BASIC SETUP
|
|
|
// ------------------------------------------------
|
|
|
|
|
|
// Create an empty scene
|
|
|
var scene = new THREE.Scene();
|
|
|
|
|
|
// Create a basic perspective camera
|
|
|
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
|
|
|
camera.position.z = 4;
|
|
|
|
|
|
// Create a renderer with Antialiasing
|
|
|
var renderer = new THREE.WebGLRenderer({antialias:true});
|
|
|
|
|
|
// Configure renderer clear color
|
|
|
renderer.setClearColor("#ff0000");
|
|
|
|
|
|
// Configure renderer size
|
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
|
|
// Append Renderer to DOM
|
|
|
document.body.appendChild( renderer.domElement );
|
|
|
```
|
|
|
|
|
|
Here we create our WebGLRenderer, we pass it the size of the window as a parameter and then append it to the DOM. The **empty scene** is where we are going to add our objects. And by last we create a camera, passing as parameters the FOV, the Aspect ratio and the near plane and far plan.
|
|
|
|
|
|
Once this is done we have the 3 fundamental elements of a Three.js application.
|
|
|
|
|
|
|
|
|
|