Draw A Stripe on Sphere

[lostinspace]

Hello,

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)
    else
    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
}));
scene.add(sphere);

…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?

Thanks.

[lostinspace]

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:

[tfoller]

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:

Edit fiddle - JSFiddle - Code Playground

[lostinspace]

Thanks! That is definitely one way to do this.

I ended up going with a TorusGeometry to create a single ring alongside the SphereGeometry.

Sorry for the delayed response – didn’t upload for some reason…

[tfoller]

Welcome back