In this post, we are going to take the first steps with Three.js, creating a simple scene, in which we are going to draw a cube.
The cube that is the favorite element that appears in software like Blender as the first geometric figure; for this, we need to fulfill 3 steps.
Fundamental elements in Three.js
In order to render an object in Three.js we need 3 elements:
- The first element has been the camera, the camera is the eye or the means by which we can visualize our geometric figures, which can have various configurations according to needs, but usually a perspective type camera is added which allows us to visualize as if it were the human eye, that is, we can see depth.
- Another element that cannot be missing is the scene, the scene is the space where we place our figures, in this example, a cube; therefore, you can see it as if it were the universe, which is nothing more than an empty space in which there are stars, planets...
- Finally we have our geometric figures, which is what we want to visualize; we can animate them, apply geometric operations such as translation, rotation, scaling, apply colors, materials, among others.
There is a fourth element that has been the render, which is nothing more than the rendering engine that supports everything else.
Class code, with this we have the minimal example of creating a Three.js scene that consists of a scene, camera, render process and a figure:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ffff } );
const cube = new THREE.Mesh( geometry, material );
cube.position.y = 1
scene.add( cube );
camera.position.z = 2;
renderer.render(scene, camera);
</script>
</body>
</html>Explanation of the above code
We create the render process with:
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );In which we specify the size of the screen.
And we add it to the DOM:
document.body.appendChild( renderer.domElement );We also create the camera and the scene:
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 0.1, 1000 );We create a 3D figure; for that we have to create the geometry:
const geometry = new THREE.BoxGeometry();And the material, which can be various types, but the simplest is this, that we can indicate a color:
const material = new THREE.MeshBasicMaterial( { color: 0x00ffff } );We position it where we want with:
cube.position.y = 1 We add the scene:
scene.add( cube );We reposition the camera:
camera.position.z = 2;And finally, we fire the render:
renderer.render(scene, camera);With this, we have a simple scene like the one shown on the cover of this post.
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter