Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
TorusGeometry
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 chapters, we’ve explored the and , two of the most fundamental shapes in . Today, we’re venturing into a more unique and fascinating geometry: the . If you’ve ever wanted to create donuts, rings, or any other torus-shaped objects, this is the chapter for you!
By the end of this lesson, you’ll understand what a TorusGeometry is, how to create one, and how to customize it to fit your creative needs. Let’s dive in.
In , a TorusGeometry is a geometry class used to create a 3D torus—a donut-shaped object.
A is a collection of vertices, edges, and faces that form a ring-like shape. The more segments you add, the smoother and more detailed the torus will appear, but it will also require more processing power.
Creating a in is simple. You simply instantiate the class and pass in the desired parameters. Here’s a step-by-step guide: Three.js Docs
First, make sure you have installed and imported into your project. If you’re using a module bundler like Webpack or a CDN, you can import it like this:
import * as THREE from 'three';Next, create the by specifying its radius, tube radius, radial segments, and tubular segments. For example, to create a torus with a radius of 1 unit and a tube radius of 0.4 units:
const geometry = new THREE.TorusGeometry(1, 0.4, 16, 100); // Radius, Tube Radius, Radial Segments, Tubular SegmentsThis creates a torus with 16 radial segments (around the tube) and 100 tubular segments (around the ring).
A 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:
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // Green colorCombine the geometry and material into a mesh, which is the actual 3D object that can be added to your scene:
const torus = new THREE.Mesh(geometry, material);Finally, add the mesh to your scene:
scene.add(torus);Here’s the complete code to create and display a green sphere:
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// Canvas
const canvas = document.querySelector("canvas.world");
// Create a scene
const scene = new THREE.Scene();
// Create a camera
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.position.z = 5;
// Create a renderer
const renderer = new THREE.WebGLRenderer({
canvas: canvas,
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.render(scene, camera);
document.body.appendChild(renderer.domElement);
// Add OrbitControls to the camera
const controls = new OrbitControls(camera, renderer.domElement);
// Create a TorusGeometry
const geometry = new THREE.TorusGeometry(1, 0.4, 16, 100); // Radius, Tube Radius, Radial Segments, Tubular Segments
// Create a material
const material = new THREE.MeshBasicMaterial({
color: 0x00ff00,
wireframe: true,
}); // Green color
// Create a mesh
const torus = new THREE.Mesh(geometry, material);
// Add the mesh to the scene
scene.add(torus);
// Render the scene
function animate() {
requestAnimationFrame(animate);
torus.rotation.x += 0.005;
torus.rotation.y += 0.005;
controls.update(); // Update the controls
renderer.render(scene, camera);
}
animate();The constructor also accepts additional parameters to control the shape and detail of the torus. Here’s the full constructor signature:
new THREE.TorusGeometry(radius, tubeRadius, radialSegments, tubularSegments, arc);For example, to create a partial torus (a ring segment):
const geometry = new THREE.TorusGeometry(1, 0.4, 16, 100, Math.PI); // Half a torusThe is more than just a donut-shaped object—it’s a gateway to creativity. Whether you’re crafting a futuristic ring, a celestial orbit, or an abstract sculpture, the torus offers endless possibilities. Its elegant curves and customizable parameters make it a favorite among 3D artists and developers alike.
So, what will you create with the ? Will it be a glowing ring in a sci-fi scene, a playful donut in a game, or something entirely unexpected? The choice is yours, and the possibilities are limitless.
Keep experimenting, keep creating, and most importantly, have fun! 🚀
Happy coding! 🎉
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.