GitBucket
Newer
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A-Frame Logo</title>
<meta name="description" content="A-Frame Logo - A-Frame">
<script src="../../../dist/aframe-master.js"></script>
<script src="https://unpkg.com/aframe-event-set-component@4.2.1/dist/aframe-event-set-component.min.js"></script>
</head>
<body>
<a-scene vr-mode-ui="enabled: false;"
background="color: #24CAFF;"
renderer="colorManagement: true;">
<a-assets>
<a-asset-item id="treeModel" src="../../assets/models/tree1.glb"></a-asset-item>
<a-mixin
id="tree"
position="0 10 0"
animation="property: object3D.position.y; to: 0; dur: 800; easing: easeOutCubic"
event-set__loaded="visible: true; _delay: 100"
gltf-model="#treeModel"
scale="2.5 2.5 2.5"
visible="false"></a-mixin>
</a-assets>
<!-- Quasi-isometric camera -->
<a-entity animation="property: object3D.position.y; from: 5; to: 0; dur: 4000; easing: easeOutCubic">
<a-entity position="0 880 1290" rotation="-34 0 0">
<a-entity id="camera" camera="near: 1000; far: 4000; fov: 2.2"></a-entity>
</a-entity>
</a-entity>
<a-entity id="logo" rotation="0 45 0">
<!-- Right side -->
<a-entity animation="property: object3D.scale.y; from: 0.0001; to: 1; delay: 200; dur: 1000; easing: easeOutCubic"
rotation="-20 0 0" position="0 0 10.75" scale="1 0.0001 1"
event-set__loaded="visible: true; _delay: 300"
visible="false">
<a-box width="12.5" depth="1" height="30" color="#EF2D5E" position="0 15 0">
<!-- Left side -->
<a-entity animation="property: object3D.scale.y; from: 0.0001; to: 1; delay: 800; dur: 800; easing: easeOutCubic"
rotation="-140 0 0" position="0 15 0" scale="1 0.0001 1">
<a-box width="12.49" depth=".1" height="30" color="#24CAFF" position="0 15 -.52" shader="flat"></a-box>
<a-box width="12.5" depth="1" height="30" color="#EF2D5E" position="0 15 0"></a-box>
</a-entity>
</a-box>
</a-entity>
<!-- Cross-bar -->
<a-entity animation="property: object3D.scale.y; from: 0.0001; to: 1; delay: 800; dur: 600; easing: easeOutCubic"
rotation="-90 0 0" position="0 8 7.5" scale="1 0.0001 1"
event-set__loaded="visible: true; _delay: 500"
visible="false">
<a-box width="12.45" depth=".1" height="14" color="#F2E646" position="0 7 .52" shader="flat"></a-box>
<a-box width="12.5" depth="1" height="14" color="#EF2D5E" position="0 7 0"></a-box>
</a-entity>
<!-- Clouds -->
<a-entity>
<!-- Large, foreground -->
<a-box animation="property: object3D.position.z; to: 340; dur: 36000; loop: true"
position="-280 240 180" color="white" opacity="0.25" width="18" depth="28" height="6"></a-box>
<a-box animation="property: object3D.position.z; to: 120; delay: 12000; dur: 48000; easing: linear; loop: true"
position="5 32 -80" color="white" opacity="0.65" width="8" depth="12" height="4"></a-box>
<!-- Behind the A -->
<a-box animation="property: object3D.position.z; to: 100; delay: 1000; dur: 36000"
event-set__loaded="visible: true; _delay: 1000"
position="10 12 -10" color="white" opacity="0.75" width="6" depth="9" height="4" visible="false"></a-box>
<a-box animation="property: object3D.position.z; to: 120; delay: 200; dur: 52000; easing: linear; loop: true"
position="20 16 -80" color="white" opacity="0.5" width="8" depth="12" height="3"></a-box>
<a-box animation="property: object3D.position.z; to: 120; delay: 200; dur: 50000; easing: linear; loop: true"
position="-20 18 -50" color="white" opacity="0.8" width="8" depth="12" height="3"></a-box>
<a-box animation="property: object3D.position.z; to: 120; delay: 20000; dur: 48000"
position="26 20 -80" color="white" opacity="0.75" width="5" depth="7" height="3"></a-box>
</a-entity>
<!-- Shadow -->
<a-entity rotation="-90 0 0">
<a-plane animation="property: object3D.scale.y; from: 0.0001; to: 1; easing: easeOutCubic; delay: 600; dur: 1000"
width="12.5" height="20" position="0 0 0.1" pivot="0 -10 0" color="#21897C" scale="1 0.0001 1"></a-plane>
</a-entity>
<!-- Base -->
<a-entity>
<a-plane animation="property: object3D.position.y; to: 0; dur: 1600; easing: easeOutCubic"
width="30" height="30" color="#249889" rotation="-90 0 0" position="0 -40 0"></a-plane>
</a-entity>
<!-- Trees -->
<a-entity position="-10 0.2 -10">
<a-entity id="tree" mixin="tree" animation="delay: 650" animation__visible="delay: 800"></a-entity>
</a-entity>
<a-entity position="-10 0.2 6">
<a-entity mixin="tree" animation="delay: 400" animation__visible="delay: 400"></a-entity>
</a-entity>
<a-entity position="10 0.2 10">
<a-entity mixin="tree" animation="delay: 600" animation__visible="delay: 600"></a-entity>
</a-entity>
</a-entity>
<a-light type="directional" color="#FFF" intensity="0.45" position="4 2 1"></a-light>
<a-light type="ambient" color="#A8A8A8"></a-light>
</a-scene>
</body>
</html>