aframe-alongpath-component
Version:
A-Frame Component that allows entities to follow predefined paths
98 lines (82 loc) • 4.25 kB
HTML
<html>
<head>
<script src="../build.js"></script>
</head>
<body>
<a-scene inspector="url: https://rawgit.com/aframevr/aframe-inspector/master/dist/aframe-inspector.min.js">
<a-assets>
<a-mixin id="eye-trigger" geometry="primitive:sphere; radius:0.1" material="color:#ff0000"></a-mixin>
</a-assets>
<a-curve id="mouth">
<a-curve-point id="checkpoint1" position="-2 1 -3"></a-curve-point>
<a-curve-point id="checkpoint2" position="0 0 -3"></a-curve-point>
<a-curve-point id="checkpoint3" position="2 1 -3"></a-curve-point>
</a-curve>
<a-curve id="left-eye" curve="closed:true;">
<a-curve-point position="-1.75 3 -3" class="trigger" mixin="eye-trigger" visible="false"></a-curve-point>
<a-curve-point position="-1.5 3 -3" ></a-curve-point>
<a-curve-point position="-1.5 2.75 -3" class="trigger" mixin="eye-trigger" visible="false"></a-curve-point>
<a-curve-point position="-1.5 3 -3" ></a-curve-point>
<a-curve-point position="-1.25 3 -3" class="trigger" mixin="eye-trigger" visible="false"></a-curve-point>
<a-curve-point position="-1.5 3 -3" ></a-curve-point>
<a-curve-point position="-1.5 3.25 -3" class="trigger" mixin="eye-trigger" visible="false"></a-curve-point>
<a-curve-point position="-1.5 3 -3" ></a-curve-point>
</a-curve>
<a-circle color="#fff" radius="0.25" position="-1.5 3 -3.1"></a-circle>
<a-curve id="right-eye" curve="closed:true;">
<a-curve-point position="1.75 3 -3" ></a-curve-point>
<a-curve-point position="1.5 2.75 -3" ></a-curve-point>
<a-curve-point position="1.25 3 -3" ></a-curve-point>
<a-curve-point position="1.5 3.25 -3" ></a-curve-point>
</a-curve>
<a-box color="#ff0000" width="0.2" height="0.6" depth="0.45" position="3 1 -5"
alongpath="curve: #mouth; loop:true; dur:6000; triggerRadius:0.1; rotate:true;">
</a-box>
<a-box color="#ff0000" width="0.1" height="0.2" depth="0.1"
alongpath="curve: #right-eye; loop:true; dur:1000; triggerRadius:0.1; rotate:true;">
</a-box>
<a-box color="#00ff00" width="0.1" height="0.2" depth="0.1"
alongpath="curve: #right-eye; loop:true; dur:1000; delay:500; triggerRadius:0.1; rotate:true;">
</a-box>
<a-sphere radius="0.05" color="#000" alongpath="curve:#left-eye; loop:true; dur:3000"></a-sphere>
<a-sphere id="nose" color="#ff0000" radius="0.5" position="0 1.5 -3"></a-sphere>
<a-draw-curve curveref="#mouth" material="shader: line; color: red;"></a-draw-curve>
<a-entity clone-along-curve="curve: #mouth; spacing: 0.2; scale: 1 1 1; rotation: 90 0 0;" geometry="primitive:box; height:0.1; width:0.4; depth:0.1" material="color:#fff"></a-entity>
<a-entity id="player" position="0 0 0">
<a-camera>
<a-cursor></a-cursor>
</a-camera>
</a-entity>
<a-sky id="sky" color="#000"></a-sky>
</a-scene>
<script>
var curvepoints = document.querySelectorAll("#mouth > a-curve-point");
for (var i = 0; i < curvepoints.length; i++) {
curvepoints[i].addEventListener("alongpath-trigger-activated", function(e){
var nose = document.querySelector("#nose");
switch(e.detail.target.id) {
case "checkpoint1":
AFRAME.utils.entity.setComponentProperty(nose, "scale", "0.5 0.5 0.5");
break;
case "checkpoint2":
AFRAME.utils.entity.setComponentProperty(nose, "scale", "1 1 1");
break;
case "checkpoint3":
AFRAME.utils.entity.setComponentProperty(nose, "scale", "1.5 1.5 1.5");
break;
}
});
}
var eyepoints = document.querySelectorAll(".trigger");
for (var i = 0; i < eyepoints.length; i++) {
eyepoints[i].addEventListener("alongpath-trigger-activated", function(e){
AFRAME.utils.entity.setComponentProperty(this, "visible", true);
});
eyepoints[i].addEventListener("alongpath-trigger-deactivated", function(e){
AFRAME.utils.entity.setComponentProperty(this, "visible", false);
});
}
</script>
</body>
</html>