3

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?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Fabien Quatravaux
  • 3,737
  • 2
  • 27
  • 33
  • Paul who? What tutorial? [Paul Lewis](https://www.html5rocks.com/en/tutorials/three/intro/)? [Paul King](https://12devsofxmas.co.uk/2012/01/webgl-and-three-js/)? [Paul Irish](https://www.paulirish.com/2011/requestanimationframe-for-smart-animating/)? – Peter Mortensen Jan 08 '22 at 12:25

2 Answers2

13

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

WestLangley
  • 102,557
  • 10
  • 276
  • 276
  • 5
    Great ! This is exactly what I was looking for ! Here is the final code : `SphereGeometry(5000,16,16, Math.PI/2, Math.PI*2, 0, Math.PI)` with `material.side = THREE.BackSide` – Fabien Quatravaux Sep 14 '12 at 13:51
5

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;
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Artyom Trityak
  • 647
  • 6
  • 17