aframe-alongpath-component
Version:
A-Frame Component that allows entities to follow predefined paths
49 lines (40 loc) • 1.65 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-assets>
<a-curve id="path1">
<a-curve-point id="checkpoint1a" position="-2 1 -3"></a-curve-point>
<a-curve-point id="checkpoint2a" position="0 0 -3"></a-curve-point>
<a-curve-point id="checkpoint3a" position="2 1 -3"></a-curve-point>
</a-curve>
<a-curve id="path2">
<a-curve-point id="checkpoint1b" position="-2 2 -3"></a-curve-point>
<a-curve-point id="checkpoint2b" position="0 3 -3"></a-curve-point>
<a-curve-point id="checkpoint3b" position="2 2 -3"></a-curve-point>
</a-curve>
<a-box id="mover" color="#ff0000" width="0.2" height="0.6" depth="0.45" position="3 1 -5"
alongpath="curve: #path1; loop:false; dur:6000; delay:2000; triggerRadius:0.1; rotate:true;">
</a-box>
<a-draw-curve curveref="#path1" material="shader: line; color: red;"></a-draw-curve>
<a-draw-curve curveref="#path2" material="shader: line; color: blue;"></a-draw-curve>
<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 mover = document.querySelector("#mover");
mover.addEventListener("movingended", function(){
AFRAME.utils.entity.setComponentProperty(this, "alongpath.curve", "#path2");
AFRAME.utils.entity.setComponentProperty(this, "alongpath.dur", "20000");
});
</script>
</body>
</html>