GitBucket
Newer
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Geometry Gallery</title>
<meta name="description" content="Geometry Gallery - A-Frame">
<script src="../../../dist/aframe-master.js"></script>
</head>
<body>
<a-scene background="color: #112" stats>
<a-assets>
<!-- Geometry mixins. -->
<a-mixin id="box"
geometry="primitive: box; depth: .125; height: .125;
width: .125"></a-mixin>
<a-mixin id="circle"
geometry="primitive: circle; radius: .2;
segments: 100; thetaStart: 0; thetaLength: 360">
</a-mixin>
<a-mixin id="cylinder"
geometry="primitive: cylinder; radius: 0.2; height: .5;
segmentsRadial: 50; segmentsHeight: 50:
openEnded: true; thetaStart: 0; thetaLength: 360">
</a-mixin>
<a-mixin id="ring"
geometry="primitive: ring; radiusInner: .3; radiusOuter: .5;
segmentsTheta: 50"></a-mixin>
<a-mixin id="sphere"
geometry="primitive: sphere; radius: .1"></a-mixin>
<a-mixin id="torus"
geometry="primitive: torus; arc: 720; radius: .3; radiusTubular: .05;
segmentsTubular: 10;"></a-mixin>
<a-mixin id="torus-knot"
geometry="primitive: torusKnot; p: 3; q: 7; radius: .25;
segmentsRadial: 10; radiusTubular: .07; segmentsTubular: 32">
</a-mixin>
<!-- Layout mixins. -->
<a-mixin id="column"
geometry="primitive: box; depth: .75; height: 1.2; width: .75"
material="color: #FFF" position="0 .6 0"></a-mixin>
<a-mixin id="column-bottom" geometry="primitive: box; depth: 1;
height: .1; width: 1;"
material="color: #FFF" position="0 .1 0">
</a-mixin>
<a-mixin id="column-light" light="type: point; intensity: 0.5;
distance: 5;"
position="0 1.5 0">
</a-mixin>
<a-mixin id="object-on-column" position="0 1.2 0"></a-mixin>
<!-- Animation mixins. -->
<a-mixin id="yoyo" animation__yoyo="dir: alternate; loop: true"></a-mixin>
<a-mixin id="spin" animation__spin="property: object3D.rotation.y; to: 360; loop: true; easing: linear; dur: 10000"></a-mixin>
<a-mixin id="spinX" mixin="spin" animation__spin="property: object3D.rotation.x"></a-mixin>
<a-mixin id="color" material="color: #FFFFC3"></a-mixin>
<a-mixin id="doubleside" material="side: double"></a-mixin>
<img id="carpet" src="carpet.jpg">
<img id="floor" src="marble.jpg">
</a-assets>
<a-camera position="0 1.6 4"></a-camera>
<!-- Lights. -->
<a-entity light="type: ambient; color: #444"></a-entity>
<a-entity light="type: directional; color: #EEE" position="0 1 1"></a-entity>
<!-- Floor. -->
<a-entity geometry="primitive: cylinder; height: .2; radius: 12;"
material="color: #BABABA; src: #floor;
metalness: .2; repeat: 50 20; roughness: .1"
position="0 0 0"></a-entity>
<!-- Carpet. -->
<a-entity geometry="primitive: box; depth: 20; height: 0.025; width: 2"
material="color: #440000; metalness: 0; src: #carpet;
repeat: 3 40; roughness: 1"
position="0 .2 0">
</a-entity>
<!-- Boxes. -->
<a-entity position="-2.5 0 1">
<a-entity mixin="column">
<a-entity mixin="column-light"></a-entity>
<a-entity mixin="object-on-column color box spin" animation__spin="to: 360 360 0"></a-entity>
<a-entity mixin="object-on-column color box spin" position=".18 1.2 .1" animation__spin="to: 360 360 0"></a-entity>
<a-entity mixin="object-on-column color box spin" position="-.18 1.2 -.2" animation__spin="to: 360 360 0"></a-entity>
</a-entity>
<a-entity mixin="column-bottom"></a-entity>
</a-entity>
<!-- Circles. -->
<a-entity position="-2.5 0 -2">
<a-entity mixin="column">
<a-entity mixin="column-light"></a-entity>
<a-entity mixin="object-on-column color doubleside circle spin"></a-entity>
<a-entity mixin="object-on-column color doubleside circle spin"></a-entity>
</a-entity>
<a-entity mixin="column-bottom"></a-entity>
</a-entity>
<!-- Cylinders. -->
<a-entity position="-2.5 0 -5">
<a-entity mixin="column">
<a-entity mixin="column-light"></a-entity>
<a-entity mixin="object-on-column color cylinder spinX"></a-entity>
</a-entity>
<a-entity mixin="column-bottom"></a-entity>
</a-entity>
<!-- Rings. -->
<a-entity position="2.5 0 1">
<a-entity mixin="column">
<a-entity mixin="column-light"></a-entity>
<a-entity mixin="object-on-column color doubleside ring spin" animation__spin="dur: 6000"></a-entity>
<a-entity mixin="object-on-column color doubleside ring spinX"></a-entity>
</a-entity>
<a-entity mixin="column-bottom"></a-entity>
</a-entity>
<!-- Spheres. -->
<a-entity position="2.5 0 -2">
<a-entity mixin="column">
<a-entity mixin="column-light"></a-entity>
<a-entity mixin="object-on-column color sphere yoyo"
animation__yoyo="property: position; from: -0.2 1 0; to: -0.2 1.8 0"
position="-.2 1.2 0"></a-entity>
<a-entity mixin="object-on-column color sphere yoyo"
animation__yoyo="property: position; from: 0 1.8 0; to: 0 1 0"></a-entity>
<a-entity mixin="object-on-column color sphere yoyo" position=".2 1 0"
animation__yoyo="property: position; to: 0.2 1.8 0"></a-entity>
</a-entity>
<a-entity mixin="column-bottom"></a-entity>
</a-entity>
<!-- Torus. -->
<a-entity position="2.5 0 -5">
<a-entity mixin="column">
<a-entity mixin="column-light"></a-entity>
<a-entity mixin="object-on-column color torus spin"></a-entity>
</a-entity>
<a-entity mixin="column-bottom"></a-entity>
</a-entity>
<!-- Torus Knot. -->
<a-entity position="2.5 0 -8">
<a-entity mixin="column">
<a-entity mixin="column-light"></a-entity>
<a-entity mixin="object-on-column color torus-knot spin"></a-entity>
</a-entity>
<a-entity mixin="column-bottom"></a-entity>
</a-entity>
</a-scene>
</body>
</html>