5

<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?

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
ngokevin
  • 12,980
  • 2
  • 38
  • 84

1 Answers1

6

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.

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
ngokevin
  • 12,980
  • 2
  • 38
  • 84
  • Tried today and found thetaLength should be 90 instead of 180 to create a semisphere in terms of latitude. – Fei Feb 21 '19 at 17:21