Create a concave half sphere with three.js

Question

I\'m a web developer with a good js experience, and I\'m currently exploring three.js possibilities. However, I\'m not very familiar with 3D shapes and vocabulary, and I can

Answer 1

You can use SphereBufferGeometry, to create half sphere (Hemisphere). Last argument does it: 0.5 * Math.PI. Also to be able to see something you need to use THREE.DoubleSide for material.

var geometry = new THREE.SphereBufferGeometry(5, 8, 6, 0, 2*Math.PI, 0, 0.5 * Math.PI);
...
material.side = THREE.DoubleSide;

Answer 2

You can create a half-sphere by setting the additional SphereGeometry parameters:

SphereGeometry( radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength )

Experiment until you get exactly what you want.

You will also have to set the side property of the material you use for the sphere to either be THREE.BackSide or THREE.DoubleSide.

material.side = THREE.DoubleSide;

EDIT - SphereBufferGeometry, which is more efficient memory-wise, is now also available. Its constructor has the same arguments.

(Three.js r.82)