Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
SphereGeometry
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 chapter, we delved into the , one of the most fundamental geometries in . Today, we’re shifting our focus to another essential geometry: the . Spheres are everywhere in the 3D world—from planets and balls to bubbles and even abstract art. Understanding how to create and manipulate spheres is a crucial skill in your 3D toolkit.
.png)
By the end of this chapter, you’ll know exactly what a is, how to create one, and how to customize it to fit your creative vision. Let’s dive in!
In , a is a geometry class used to create a 3D sphere.
A is essentially a collection of vertices, edges, and faces that form a spherical shape. The more segments you add, the smoother the sphere will appear, but it will also require more processing power.
Creating a in is straightforward. 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, width segments, and height segments. For example, to create a sphere with a radius of 1 unit:
const geometry = new THREE.SphereGeometry(1, 32, 32); // Radius, Width Segments, Height SegmentsThis creates a sphere with 32 segments along its width and height, resulting in a smooth appearance.
Various segments can bring different shapes.
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 sphere = new THREE.Mesh(geometry, material);Finally, add the mesh to your scene:
scene.add(sphere);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 SphereGeometry
const geometry = new THREE.SphereGeometry(1, 32, 32); // Radius, Width Segments, Height Segments
// Create a material
const material = new THREE.MeshBasicMaterial({
color: 0x00ff00,
wireframe: true,
}); // Green color
// Create a mesh
const sphere = new THREE.Mesh(geometry, material);
// Add the mesh to the scene
scene.add(sphere);
// Render the scene
function animate() {
requestAnimationFrame(animate);
sphere.rotation.x += 0.005;
sphere.rotation.y += 0.005;
controls.update(); // Update the controls
renderer.render(scene, camera);
}
animate();The constructor also accepts additional parameters to control the level of detail and the shape of the sphere. Here’s the full constructor signature:
new THREE.SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength);For example, to create a hemisphere:
const geometry = new THREE.SphereGeometry(1, 32, 32, 0, Math.PI * 2, 0, Math.PI / 2);Now, You’ve mastered another useful geometry, . A sphere may seem simple, but mastering unlocks so many creative possibilities. Whether you’re building a planet, a ball, or an abstract art piece, the is your starting point. In the next lesson, let’s explore more built-in geometries of Library.
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.