Create a concave halfsphere with Three.js

Question

I'm a web developer with a good JavaScript experience, and I'm currently exploring Three.js possibilities. However, I'm not very familiar with 3D shapes and vocabulary, and I can't figure out how to build the shape I need.

I want to create a halfsphere, and be able to project a video inside this sphere. I have a panoramic spherical video, and I need to distort it to make it look like "plane".

Thanks to Paul's tutorial, I have drawn a sphere and projected my video on it. But the external sphere surface is convex, and I need a concave one! How can I to achieve that? Extruding a smaller sphere out of my initial one?

Answer 1

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

const geometry = new THREE.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;

three.js r.143

Answer 2

You can use SphereBufferGeometry, to create a half sphere (hemisphere). The 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;