canvas マウスカーソルがキラキラの流れ星になるものを実装したい

前提・実現したいこと

以下のshootingstar を実装したい。
https://codepen.io/ko-yelie/pen/LqXWWx
http://photoshopvip.net/114044（紹介元サイト：こちらの中にあるshooting starです。）

質問内容

プログラミング初心者です。
shooting starというマウスカーソルがキラキラの流れ星になるものを
webサイトへ実装したいと考えております。
恥ずかしながらcanvasも初めて知りました。
canvasを勉強してから質問した方が良いかと思ったのですが、
糸口がわからずこちらで質問させて頂きました。

発生している問題・エラーメッセージ

画面は黒いままで、マウスカーソルには何も出てきません。

該当のソースコード

html
1
2<!DOCTYPE html>
3<html lang="ja">
4    <head>
5        <meta charset="utf-8">
6        <meta name="viewport" content="width=device-width">
7        <link rel="stylesheet" href="../../event/5th/css/reset.css">
8        <link rel="stylesheet" href="../../event/5th/css/star.css">
9        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
10        
11        <title>
12            タイトル
13        </title>
14        
15        
16        <script>
17            parcelRequire = (function (init) {
18                // Save the require from previous bundle to this closure if any
19                var previousRequire = typeof parcelRequire === 'function' && parcelRequire;
20                var nodeRequire = typeof require === 'function' && require;
21                var modules = {};
22
23              ※文字数が多すぎた為、割愛させて頂きました。
24　　　　　　　　こちらにcodepenに載っていたjsをそのままコピーしております。
25        
26        </script>
27        
28    </head>
29    <body>
30　　　<canvas id="canvas"></canvas>
31　　　<p id="message">Move your mouse</p>
32　　</body>
33</html>
34
35
36
37
38
39

css
1
2@charset "utf-8";
3
4html,
5body {
6    height: 100%;
7}
8
9body {
10    margin: 0;
11    background-color: #000;
12}
13
14#canvas {
15    display: block;
16    width: 100%;
17    height: 100%;
18}
19body.o-start #canvas {
20    cursor: none;
21}
22
23#message {
24    position: absolute;
25    right: 0;
26    bottom: 0;
27    left: 0;
28    color:red;
29    font-family: Georgia, serif;
30    font-size: 0.9rem;
31    text-align: center;
32    letter-spacing: 0.1em;
33    pointer-events: none;
34    opacity: 0;
35    transition: opacity 500ms;
36    border: 1px solid red;
37}
38body.o-start #message {
39    opacity: 1;
40}
41

試したこと

単純にhtml、css、jsをコピーしてしまいました。
それではやはりうまくいかず、
canvasの実装方法などを調べましたが、見つけることが出来ませんでした。
当方でcanvasの仕組みが理解が出来ていない為だと思います。

miyabi_pudding

2020/09/04 07:01 編集

> 当方でcanvasの仕組みが理解が出来ていない為だと思います。まず、canvasのこと学びましょうよ。あと、マウスカーソルにアニメーションつけるだけなら、 canvasいりません。 https://www.evoworx.co.jp/blog/mouse-stoker-gsap/

CALM

2020/09/04 07:44

コメントとご指摘ありがとうございます。その通りです。貼って頂いたページも検索して見ていたのですが、shootingstarの動きが魅力的だったので、こちらを実現できたらと思った次第です。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。

ご提示のコードを試してみましたが、いくつか変更したところ、動作しました。

1.THREE.js と dat.GUI を読み込む。（resourcesというところを見ると確認できます）

html
1<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
2<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.5/dat.gui.min.js"></script>

2.script を body の最後に移動。

html
1<p id="message">Move your mouse</p>
2<script>
3    parcelRequire = (function (init) {
4//...
5    });
6</script>
7</body>

投稿2020/09/05 03:14

Lhankor_Mhy

総合スコア36158

CALM

2020/09/06 05:32

返信が遅くなり、大変失礼致しました。ご回答ありがとうございます。教えて頂いた通りに修正しましたところ、無事に動かすことが出来ました！質問内容も稚拙だったかと思いますが、丁寧に教えて頂き感謝致します。本当にありがとうございました！！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！