The below example shows using A-Frame together with JavaScript.
The example shows, how to animate a sphere on a plane.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.7.1/aframe.js"></script> <title>Title</title> </head> <body> <!-- Setting a-sphere attributes(color and posistion) manually <a-scene> <a-sphere color="red" position="0 1.5 -2"></a-sphere> <! rotation is -90 because originally the plan is vertical and we want it horizontal e.g lying flat <a-plane width="10" height="10" position="0 0 -5" rotation="-90 0 0" color="black" ></a-plane> </a-scene> --> <!-- Now when we have our javascript we will set attributes programmatically from index.js Thus we will remove the color and position attributes from the a-sphere --> <a-scene> <a-sphere></a-sphere> <a-plane src="https://media.giphy.com/media/3o8doVAxrMjXbIHaU0/giphy.gif" width="8" height="8" position="0 0 -2" ></a-plane> </a-scene> <script src="index.js"></script> </body> </html> |