Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
BoxGeometry
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.
In the previous lesson, we explored the concept of and how they form the backbone of any in Three.js. Today, we’re zooming in on one of the most fundamental and widely used geometries: .
Whether you’re creating a simple cube, a rectangular prism, or even a complex structure made up of multiple boxes, the is your go-to tool. By the end of this chapter, you’ll know exactly what a BoxGeometry is, how to create one, and how to customize it to fit your needs.
Let’s dive in! 🚀
In , a BoxGeometry is a geometry class used to create a (or rectangular prism). It’s defined by its , , and , which determine the size of the box along the , , and axes, respectively.
A BoxGeometry is essentially a collection of , , and that form a six-sided . Each side of the box is a rectangle, and together they create a . If all three dimensions are equal, you get a perfect .
Three.js DocsCreating a BoxGeometry in is straightforward. You simply instantiate the class and pass in the desired dimensions.
import * as THREE from 'three';To create a cube with equal dimensions: we've to give the same width, height and depth
const geometry = new THREE.BoxGeometry(1, 1, 1); // Width, Height, DepthThis creates a cube where each side is 1 unit long. If you want to create a rectangular box, you can adjust the dimensions:
const geometry = new THREE.BoxGeometry(2, 1, 3); // Width = 2, Height = 1, Depth = 3A geometry alone isn’t enough to render an object. You need to pair it with a material. For now, let’s use a basic material: later on we will dive into the different materials world.
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // Green colorCombine the geometry and material into a mesh, which is the actual that can be added to your scene:
const cube = new THREE.Mesh(geometry, material);scene.add(cube);The constructor also accepts additional parameters to control the number of segments along each dimension. These segments determine how many subdivisions the box has, which can be useful for creating more complex shapes or applying detailed textures (later in a future lesson).
Here’s the full constructor signature:
new THREE.BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments);For example, to create a box with more subdivisions:
const geometry = new THREE.BoxGeometry(1, 1, 1, 3, 3, 3); // More segments for smoother deformation or texturesNow that you’ve mastered the , you’re ready to create more complex 3D objects! The BoxGeometry is the most fundamental building block in Three.js, and understanding how to use it is essential for creating 3D scenes. Whether you’re building a simple cube or a complex structure, the is your starting point.
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.