Technology Sharing

HTML JS 3D z-axis movement to achieve the starry sky

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

The starry sky animations made with chatgpt and kimi are rubbish

Either the y-axis moves or the x-axis moves.

I want z-axis movement, and they just can't figure it out.

AI still has a long way to go in writing code.

  1. <!DOCTYPE html>
  2. <meta charset="utf-8" />
  3. <head>
  4. <title>ai相关博客</title>
  5. </head>
  6. <body
  7. style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; overflow: hidden; margin: 0; padding: 0;"
  8. >
  9. <div class="header-title"><a href="" title="神造ai">神造ai</a></div>
  10. <canvas
  11. id="canvas"
  12. style="width: 100%; height: 100%; padding: 0;margin: 0;"
  13. ></canvas>
  14. <script>
  15. const canvas = document.getElementById("canvas");
  16. const c = canvas.getContext("2d");
  17. let w;
  18. let h;
  19. const setCanvasE