My-Art/5-line.html at master · 4tsakabe/My-Art · GitHub

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
    <script>

        // ページの読み込みを待つ
        window.addEventListener('load', init);
        function init() {
            // サイズを指定
            const width = window.innerWidth;
            const height = window.innerHeight;
            let rot = 0;
            let mousex = 0;
            // レンダラーを作成
            const renderer = new THREE.WebGLRenderer({
                canvas: document.querySelector('#myCanvas'),
                antialias: true
            });
            renderer.setSize(width, height);

            // シーンを作成
            const scene = new THREE.Scene({});
            scene.background = new THREE.Color(0x7799ff);

            // カメラを作成
            const camera = new THREE.PerspectiveCamera(45, width / height);

            // 線を作成
            const lines = new THREE.Group();
            const line_material = new THREE.LineBasicMaterial({ color: 0xffffff });
            for (let i = 0; i < 20; i++) {
                var line_geometry = new THREE.Geometry();
                line_geometry.vertices.push(
                    new THREE.Vector3(0, 0, 0),
                    new THREE.Vector3(Math.random() * 400 - 200, Math.random() * 400 - 200, Math.random() * 400 - 200),
                    new THREE.Vector3(Math.random() * 400 - 200, Math.random() * 400 - 200, Math.random() * 400 - 200),
                    new THREE.Vector3(Math.random() * 400 - 200, Math.random() * 400 - 200, Math.random() * 400 - 200),
                    new THREE.Vector3(Math.random() * 800 - 400, Math.random() * 400 - 200, Math.random() * 800 - 400),
                    new THREE.Vector3(Math.random() * 800 - 400, Math.random() * 400 - 200, Math.random() * 800 - 400),
                    new THREE.Vector3(Math.random() * 400 - 200, Math.random() * 4000 - 200, Math.random() * 400 - 200)
                );
                var newline = new THREE.Line(line_geometry, line_material);
                lines.add(newline);
            }
            scene.add(lines);

            document.addEventListener('mousemove', (event) => {
                console.log(event.pageX);
                mousex = (event.pageX - 500) / 5000;
            })

            tick();
            // 毎フレーム時に実行されるループイベントです
            function tick() {
                rot += 0.05 + mousex; // 毎フレーム角度を0.5度ずつ足していく
                // ラジアンに変換する
                const radian = (rot * Math.PI) / 180;
                const radian2 = ((rot + 15) * Math.PI) / 180;
                lines.position.x = 50 * Math.sin(radian2);
                lines.position.z = 50 * Math.cos(radian2);

                // 角度に応じてカメラの位置を設定
                camera.position.x = 200 * Math.sin(radian);
                camera.position.z = 200 * Math.cos(radian);
                // 原点方向を見つめる
                camera.lookAt(new THREE.Vector3(0, 10, 0));
                // レンダリング
                renderer.render(scene, camera);

                document.onclick = function () {
                    rot += 1+mousex;
                };

                requestAnimationFrame(tick);
            }
        }
    </script>
</head>

<body style="margin:0;">

    <canvas id="myCanvas"></canvas>

    <div id="container"
        style="position:absolute; top:3vh; right:5vw; color:white; display:inline-block; font-size:calc(12px + 0.5vw); font-family:'Arial Black';">
        <div style="display: inline-block; margin-left:15px;">about</div>
        <div style="display: inline-block; margin-left:15px;">news</div>
        <div style="display: inline-block; margin-left:15px;">contact</div>
    </div>
    <div id="container" style="position:absolute; top:40vh; left:5vw; color:white;">
        <div id="ontext" style="position:relative; font-size:calc(10px + 5vw); font-family:'Arial Black';">Lines</div>
        <div id="descri" style="position:relative; font-size:calc(8px + 0.5vw); font-family:'Arial Black';"> A Test For
            Using Line Constructer</div>
    </div>

</body>

</html>