ThreeJS — The simplest scene you can create
There’s some boilerplate code that you need to write in order to get started with ThreeJS.
But first thing first, now that you’ve just created your nice and neat development environment with Vite, you need to install ThreeJS from the command line.
npm install threeNow edit the content of the index.html file in the root folder, adding:
- A link to the style.css file
<link rel="stylesheet" href="./style.css">- A <canvas> element that will be referenced in the main.js file later
<canvas class="webgl">
<p>Your browser doesn't support WebGL</p>
</canvas>Now the index.html should look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.ico" />
<link rel="stylesheet" href="./style.css">
<title>Vite ThreeJS App</title>
</head>
<body>
<canvas class="webgl">
<p>Your browser doesn't support WebGL</p>
</canvas>
<script type="module" src="./main.js"></script>
</body>
</html>Add some rules to the style.css file
* {
margin: 0;
padding: 0;
}
html, body {
background: transparent;
overflow: hidden;
}
.webgl {
position: fixed;
top: 0;
left: 0;
outline: none;
}Finally, open the main.js file, delete all the existing Vite template code, and import ThreeJS.
import * as THREE from 'three'Then get the <canvas> element from the DOM
// Get the canvas
const canvas = document.querySelector('canvas.webgl')Create the ThreeJS Scene
// Scene
const scene = new THREE.Scene()Create the Camera, set its Position, and add it to the scene
// Camera
const camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(-5, 3, 5)
camera.lookAt(new THREE.Vector3(0, 0, 0))scene.add(camera)Now let’s create a Cube and add it to the scene
// Create a Cube
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 })
const cube = new THREE.Mesh(geometry, material)scene.add(cube)Create a Light…
// Add a light
const light = new THREE.DirectionalLight(0xffffff, 1)
light.position.set(-1, 3, 4)scene.add(light)Create Renderer, set its size, and launch the render command
// Create the Renderer
const renderer = new THREE.WebGLRenderer( { canvas : canvas } )
renderer.setSize(window.innerWidth, window.innerHeight)// Render the Scene
renderer.render(scene, camera)Now run npm run dev from your terminal, and you should see a green cube like this, visiting http://localhost:3000/
Yuuuuhhh!! Congratulation! You’ve set up the bare minimum code to run a ThreeJS scene in your browser!
Here’s the link to the next article in which we will create:
- the camera orbit controls
- the animate() function
- the event listener to resize the window and update the scene
https://robesantoro.medium.com/threejs-adding-the-orbit-controls-cdd921218273
Bye!
