Create a concave half sphere with three.js

问题

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't figure out how to build the shape I need.

I want to create a half sphere, 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 ! I can't figure out how to achieve this. Extruding a smaller sphere out of my initial one ?

Please, help !

回答1:

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)

回答2:

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;

来源：https://stackoverflow.com/questions/12425014/create-a-concave-half-sphere-with-three-js