How to create a 180-degree/semisphere/segment/partial video sphere in A-Frame?

Question

<a-videosphere src="myvideo.mp4"> displays a video on an entire 360-degree sphere, but I want to display a video or image, but only on a portion of a sphere like a hemisphere. Something like:

_{(from MathWorld - A Wolfram Web Resource: wolfram.com)}

How would I do this in A-Frame?

Answer 1

You can use the sphere geometry (<a-entity geometry="primitive: sphere"> or <a-sphere>) and control the phiLength/thetaLength angles of the sphere to specify a segment. Theta length controls horizontal sweep angle and phi length controls vertical sweep angle:

_{(source: mediabox.fr)}

For a hemisphere, we would do:

<a-entity geometry="primitive: sphere; thetaLength: 180; radius: 5000; segmentsWidth: 64; segmentsHeight: 20" scale="1 1 -1" material="src: #myVideo; shader: flat"></a-entity>

Or:

<a-sphere theta-length="180">

And then apply the material.

For videosphere, we can update it:

<a-videosphere src="#myVideo" geometry="thetaLength: 180"></a-videosphere>

However, the video won't be cropped as you'd expect. So you might have to crop beforehand. If you want it to crop like background-size: cover, we might have to do something special like hide portions of the sphere.