My-Art/0-hwmax.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
<html>

<head>
    <meta charset="utf-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
    <script src="orbitcontrols.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>

    <script>
        // ページの読み込みを待つ
        window.addEventListener('load', init);

        function init() {
            // レンダラーを作成
            const renderer = new THREE.WebGLRenderer({
                canvas: document.querySelector('#myCanvas'),
                antialias: true
            });

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

            // カメラを作成
            const camera = new THREE.PerspectiveCamera(); // 45,1.0
            camera.position.set(250, 250, 250);
            // カメラコントローラーを作成
            const controls = new THREE.OrbitControls(camera);
            // 滑らかにカメラコントローラーを制御する
            controls.enableDamping = true;
            controls.dampingFactor = 0.2;

            // 地面と軸の生成
            scene.add(new THREE.GridHelper(600));
            scene.add(new THREE.AxesHelper(300));

            tick();

            // 毎フレーム時に実行されるループイベントです
            function tick() {

                // カメラコントローラーを更新
                controls.update();

                // レンダリング
                renderer.render(scene, camera);
                requestAnimationFrame(tick);
            }


            // 初期化のために実行
            onResize();
            // リサイズイベント発生時に実行
            window.addEventListener('resize', onResize);

            function onResize() {
                // サイズを取得
                const width = window.innerWidth;
                const height = window.innerHeight;

                // レンダラーのサイズを調整する
                renderer.setPixelRatio(window.devicePixelRatio);
                renderer.setSize(width, height);

                // カメラのアスペクト比を正す
                camera.aspect = width / height;
                camera.updateProjectionMatrix();

            }

        }
    </script>
</head>

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

</html>