Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
Vanilla Three.js Course
Loading...
Loading...
0 Comments
"Please login to view comments"
Upgrade your account
"Please login to view comments"
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
Welcome Back! Hey everyone! In this lesson, we’re going to create our first 3D scene together. By the end of this lesson, you’ll have a with a spinning . Sounds fun, right? Let’s jump in!
We’re going to create a simple 3D scene with a rotating cube. This might sound fancy, but trust me, it’s not as complicated as it seems. We’ll break it down step by step.
A cube is one of the simplest 3D shapes, and it’s a great way to understand the basics of Three.js. Once you get this, you can create anything—, , even entire !
Understanding the Three.js Building Blocks Every project has three main parts:
The scene is where all our 3D objects will live. Let’s create one and give it a pink background!
const scene = new THREE.Scene();
scene.background = new THREE.Color("pink");Why Do We Need a Camera ? --- Without a camera, we can’t see anything in our scene. It’s like having a movie set but no camera to film it. Let’s add one!
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.position.z = 5;
scene.add(camera);What’s a Renderer ? --- The renderer is like the projector in a movie theater. It takes the and the and draws everything on the screen.
const renderer = new THREE.WebGLRenderer({
canvas: canvas,
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);Creating the Cube --- Now for the fun part—let’s add a cube! Every 3D object in Three.js has two parts :
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);A static cube is cool, but a spinning cube is even cooler! Let’s make it rotate.
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();The Coordinate System In Three.js, the 3D space works like this:
The center of the screen is (0, 0, 0). This is where our cube is by default.
Why Does This Matter? Understanding this helps you position objects, move the camera, and create cool effects. For example, moving the camera back along the lets us see the cube.
Let’s quickly recap:
And that’s it! You’ve just created your first 3D scene with . 🎉
Great job! You’ve just built your first 3D scene with a spinning cube. This is the foundation of everything you’ll do with Three.js. Play around with the code—try changing the cube’s , or . The more you experiment, the more you’ll learn!
If you have any questions or want to share what you’ve created, drop a comment below or join our Discord community. See you in the next lesson! 🚀
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.