Skip to content

Instantly share code, notes, and snippets.

@bryik

bryik/.block

Last active Dec 15, 2016
Embed
What would you like to do?
Transparency
license: mit

A-Frame - Transparency

For objects to be transparent (i.e. to see colour blending rather than opaque blocking), position objects back-to-front rather than front-to-back.

Both rows of sphere are identical except in the left row, the first circle is closest to the camera (with subsequent circles placed at increasing distance). The right row positions the furthest circle first (with subsequent circles closer to the camera).

For more information watch Transparency and three.js and take a look at the last third of lesson three from Udacity's "Interactive Computer Graphics" course.

<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<a-scene antialias="true">
<!-- Center the camera between rows and at a good distance -->
<a-entity position="1 0 6">
<a-entity camera look-controls wasd-controls></a-entity>
</a-entity>
<!-- Left Side/Front-to-back -->
<!-- Non-transparent -->
<a-circle position="0 0 4" material="side: double; color: #EF2D5E; transparent: true; opacity: 0.5" geometry="primitive:circle;radius:0.5" radius="0.5"></a-circle>
<a-circle position="0 0 2" material="side: double; color: #EF2D5E; transparent: true; opacity: 0.5" geometry="primitive:circle;radius:0.5" radius="0.5"></a-circle>
<a-circle position="0 0 0" material="side: double; color: #EF2D5E; transparent: true; opacity: 0.5" geometry="primitive:circle;radius:0.5" radius="0.5"></a-circle>
<!-- Right Side/Back-to-front -->
<!-- Transparent -->
<a-circle position="2 0 0" material="side: double; color: #EF2D5E; transparent: true; opacity: 0.5" geometry="primitive:circle;radius:0.5" radius="0.5"></a-circle>
<a-circle position="2 0 2" material="side: double; color: #EF2D5E; transparent: true; opacity: 0.5" geometry="primitive:circle;radius:0.5" radius="0.5"></a-circle>
<a-circle position="2 0 4" material="side: double; color: #EF2D5E; transparent: true; opacity: 0.5" geometry="primitive:circle;radius:0.5" radius="0.5"></a-circle>
<a-sky color="#000"></a-sky>
</a-scene>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment