aframe-lsystem-component
Version:
L-System/LSystem component for A-Frame to draw 3D turtle graphics. Using Lindenmayer as backend.
54 lines (39 loc) • 2.15 kB
HTML
<html>
<head>
<title>A-Frame L-System Component - Animated Tree</title>
<script src="../libs/aframe.js"></script>
<script src="https://rawgit.com/ngokevin/aframe-animation-component/master/dist/aframe-animation-component.min.js"></script>
<script src="../libs/aframe-lsystem-component.js"></script>
<style media="screen">
body {
background-color: #94bfcf;
}
</style>
</head>
<body>
<a-scene>
<a-assets>
<a-mixin id="yellow" material="color: yellow;"></a-mixin>
<a-mixin id="green" material="color: #528e1e;"></a-mixin>
<a-mixin id="brown" material="color: #877504;"></a-mixin>
<a-mixin id="line" geometry="primitive: box; height: 0.1; width: 1; depth: 0.1" ></a-mixin>
</a-assets>
<!-- <a-box material="color: rgb(200, 0, 0)" animation="property: material.color; direction: alternate; duration: 1000; easing: easeInSine; loop: true; to: rgb(0, 200, 0)"> </a-box> -->
<!-- doesnt work: -->
<a-entity id="lsys" scale="2 2 2" position="0 -8 -12" rotation="0 0 0" lsystem="axiom: X; productions: X:F^[F+F]F-F[--[X]F]; segmentMixins: F:brown line; angle: 20; iterations: 3; translateAxis: X" animation="property: lsystem.angle; duration: 1000; easing: easeInSine; loop: false; to: 60.0"></a-entity>
<!-- <a-entity id="lsy" scale="2 2 2" position="0 -8 -12" rotation="0 0 0" lsystem="axiom: X; productions: X:F^[F+F]F-F[--[X]F]; segmentMixins: F:brown line; angle: 20; iterations: 3; translateAxis: X"></a-entity> -->
</a-scene>
<script type="text/javascript">
// this works:
//let i = 40;
// setInterval(() => {
// i += (0.1)
// document.getElementById('lsy').setAttribute('lsystem', "angle", i);
// document.getElementById('lsy').setAttribute('lsystem', "mergeGeometries", "" + true);
// document.getElementById('lsy').setAttribute('rotation', "0 45 10");
// }, 20);
// works also now:
// document.getElementById('lsy').setAttribute('animation', "property: lsystem.angle; duration: 5000; loop: false; to: 60");
</script>
</body>
</html>