Create a sphere in Three.js

- Andrés Cruz

En español

Create a sphere in Three.js

We will know the class that allows us to create a sphere in Three.js and what are its basic parameters.

In Three.js we have different shapes that we can create, from rectangles or boxes as we saw in the first scene with Three.js, to spheres; to draw a sphere, we have the SphereGeometry function that receives, in a mandatory way, the radius, and the number of segments for the width and height:

THREE.SphereGeometry(20, 20, 20);

For the rest, it follows the same structure as any other geometric figure that you want to establish; that is, pass the mesh to it and add it to the scene:

var sphereGeometry = new THREE.SphereGeometry(20, 20, 20);
var sphereMaterial = new THREE.MeshBasicMaterial({
    color: 0x7777FF,
    wireframe: true
});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(20, 4, 2);
scene.add(sphere);

 

Andrés Cruz

Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz In Udemy

I agree to receive announcements of interest about this Blog.

!Courses from!

10$

On Udemy

There are 4d 22:23!


Udemy

!Courses from!

4$

In Academy

View courses

!Books from!

1$

View books
¡Become an affiliate on Gumroad!