Draw A Stripe on Sphere


I’m trying to create a sphere object whose surface is made up of multiple colors – basically a stripe running around the sphere.

I think this SO post is what I need – with this particular example showing a sphere with a red top and black bottom:

var sphereGeom = new THREE.SphereGeometry(5, 32, 24);
sphereGeom.faces.forEach(function(face){ // loop through faces
    if (face.normal.y > 0) // check y-coordinate of a face's normal
    face.color.setHex(0xFF0000); // set the color of the face (red)
    face.color.setHex(0x000000); // set the color of the face (black)

var sphere = new THREE.Mesh(sphereGeom, new THREE.MeshStandardMaterial({
    vertexColors: THREE.FaceColors // use face colors

…But when I try to use this code in my own project I get this error:

(!) Missing exports
FaceColors is not exported by node_modules/three/build/three.module.js
326:     var nodeMaterial = new THREE.MeshLambertMaterial({
327:                         // color: this.setSkin(node),
328:                         vertexColors: THREE.FaceColors,
329:                         transparent: true,
330:                         opacity: 0.75

But import * as THREE from 'three'; is at the top of my js file. Was FaceColors removed from three.js? How are multiple colors on sphere objects supposed to be defined?


It seems this got updated so instead of using vertexColors: THREE.FaceColors you just set vertexColors: true.

Ok, what is the best way to draw a band on a sphere object (without using textures or loading models from elsewhere)?

Trying to create sphere with a stripe – a 3D version of this:

Screen Shot 2022-07-03 at 8.23.06 PM

If extra geometry is not a big concern you can also make strips by overlaying two spheres with slightly different size or number of segments: