My-Art/7-camera.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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<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(75); // 45,1.0
            camera.position.set(0, 0, 250);
            // カメラコントローラーを作成
            const controls = new THREE.OrbitControls(camera);
            // 滑らかにカメラコントローラーを制御する
            controls.enableDamping = true;
            controls.dampingFactor = 0.2;


            // 正二重面体を作成
            const geometry = new THREE.IcosahedronGeometry(300, 1);
            const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x4169E1 });
            const box = new THREE.Mesh(geometry, material);
            scene.add(box);


            // 正二重面体を作成
            const geometry2 = new THREE.IcosahedronGeometry(320, 1);
            const material2 = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x4169E1 });
            const box2 = new THREE.Mesh(geometry2, material2);
            scene.add(box2);

            /*
            box.position.set(
                200, // X座標
                30, // Y座標
                200 // Z座標
            );
            */

            tick();

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

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

                box.rotation.y += 0.01;
                box2.rotation.y += 0.01;

                box.rotation.y += 0.001;
                box2.rotation.y += 0.001;


                // カメラ中心向く
                // camera.lookAt(new THREE.Vector3(0, 0, 0));

                // レンダリング
                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>