Web-Work/main3d.html at main · wensir-cloud/Web-Work · 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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
<!DOCTYPE html>
<html>

<head>
    <title>Simulating 3D Solar System</title>
    <style>
        #canvas_3d {
            position: relative;
        }

        #canvas_left {
            position: relative;
            left: -40px;
        }

        ul {
            display: flex;
            list-style: none;
        }

        #change {
            height: 200px;
            background-color: blue;
            position: relative;
            top: -700px;
        }

        #myCanvas,
        #myCanvas1 {
            position: relative;
            top: -900px;
            left: 200px;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <div id="canvas_left"></div>
        </li>
        <li>
            <div id="canvas_top"></div>
        </li>
    </ul>
    <div id="canvas_3d">
        <button id="change">切换</button>
    </div>
    <canvas id="myCanvas" width="200" height="200"></canvas>
    <canvas id="myCanvas1" width="200" height="200"></canvas>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
    <script>
        var change = 0; //初始地球图片
        var begin = false;
        window.onload = function () {
            // 创建场景
            var scene = new THREE.Scene();

            //update your URL------------------------------------------------------------------------
            var httpServerBaseUrl = "http://127.0.0.1:8080";
            var sunPictureUrl = httpServerBaseUrl + "/sun.png";
            var earthPictureUrl = httpServerBaseUrl + "/earth.png";
            var moonPictureUrl = httpServerBaseUrl + "/moon2.png";
            var new_earthPictureUrl = httpServerBaseUrl + "/new_earth2.png";
            //---------------------------------------------------------------------------------------


            var textureLoader = new THREE.TextureLoader();
            var sunPicture = textureLoader.load(sunPictureUrl);
            var earthPicture = textureLoader.load(earthPictureUrl);
            var moonPicture = textureLoader.load(moonPictureUrl);
            var new_earthPicture = textureLoader.load(new_earthPictureUrl);

            const canvas1 = document.getElementById("myCanvas1");
            const ctx1 = canvas1.getContext("2d");

            let sunX1 = canvas1.width / 2;
            let sunY1 = canvas1.height / 2;

            let moonX1 = sunX1 - 100;
            let moonY1 = sunY1 + 20;

            const init_moonX1 = moonX1;
            const init_moonY1 = moonY1;

            let moonVX1 = 1;
            let moonVY1 = -0.2;


            const canvas = document.getElementById("myCanvas");
            const ctx = canvas.getContext("2d");

            let sunX = canvas.width / 2;
            let sunY = canvas.height / 2;

            let moonX = sunX - 100;
            let moonY = sunY + 20;

            const init_moonX = moonX;
            const init_moonY = moonY;

            let moonVX = 1;
            let moonVY = -0.2;

            document.getElementById("change").addEventListener('click', function () {
                if (change == 0) {
                    earthMaterial.map = new_earthPicture;
                    change = 1;
                }
                else {
                    earthMaterial.map = earthPicture;
                    change = 0;
                }
            });


            // Load the image
            const image = new Image();
            const image1 = new Image();

            //update your URL---------------------------------------------------------------
            image.src = "/moon_2d.png";
            image1.src = "/sun_2d.png";
            //update your URL---------------------------------------------------------------

            image.onload = function () {
                animate();
            };
            image1.onload = function () {
                animate();
            };

            //-------------------------3种视图的相机角度---------------------------------
            // Side view camera
            var cameraSide = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            cameraSide.position.set(0, 0, 30);
            cameraSide.lookAt(new THREE.Vector3(0, 0, 0));
            scene.add(cameraSide);
            // Top view camera
            var cameraTop = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            cameraTop.position.set(0, 90, 0);
            cameraTop.lookAt(new THREE.Vector3(0, 0, 0));
            scene.add(cameraTop);
            // 3D view camera
            var camera3D = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera3D.position.set(30, 30, 30);
            camera3D.lookAt(new THREE.Vector3(0, 0, 0));
            scene.add(camera3D);
            //------------------------------------------------------------------------

            // 创建渲染器
            var renderer3D = new THREE.WebGLRenderer({ antialias: true });
            renderer3D.setSize(window.innerWidth / 1.1, window.innerHeight / 1.1);

            var rendererSide = new THREE.WebGLRenderer({ antialias: true });
            rendererSide.setSize(window.innerWidth / 2.2, window.innerHeight / 2.2);

            var rendererTop = new THREE.WebGLRenderer({ antialias: true });
            rendererTop.setSize(window.innerWidth / 2.2, window.innerHeight / 2.2);
            // 将渲染器添加到HTML文档中的canvas元素中
            document.getElementById("canvas_3d").appendChild(renderer3D.domElement);
            document.getElementById("canvas_left").appendChild(rendererSide.domElement);
            document.getElementById("canvas_top").appendChild(rendererTop.domElement);
            // document.getElementById("canvas_left").appendChild(renderer.domElement);
            // 创建太阳的几何体
            var sunGeometry = new THREE.SphereGeometry(10, 32, 32);
            // 创建太阳的材质
            var sunMaterial = new THREE.MeshBasicMaterial({ map: sunPicture });
            // 创建太阳的网格
            var sun = new THREE.Mesh(sunGeometry, sunMaterial);
            // 将太阳添加到场景中
            scene.add(sun);


            // 创建地球公转的轨道
            var earthOrbit = new THREE.Object3D();
            earthOrbit.position.set(0, 0, 0);
            // earthOrbit.rotation.x = THREE.Math.degToRad(30); // 运行角度
            // 将地球公转的轨道添加到场景中
            scene.add(earthOrbit);
            // 创建地球的几何体
            var earthGeometry = new THREE.SphereGeometry(3, 32, 32);
            // 创建地球的材质
            var earthMaterial = new THREE.MeshBasicMaterial({ map: earthPicture });
            // 创建地球的网格
            var earth = new THREE.Mesh(earthGeometry, earthMaterial);
            // 将地球添加到地球公转的轨道上
            earth.position.set(20, 0, 0);
            earthOrbit.add(earth);

            // 创建地球公转轨道的几何体
            var earthOrbitGeometry = new THREE.CircleGeometry(20, 1024);
            earthOrbitGeometry.vertices.shift(); // Remove the center vertex
            earthOrbitGeometry.rotateX(Math.PI / 2); // 轨道角度
            var earthOrbitMaterial = new THREE.LineBasicMaterial({ color: 0xffffff });
            var earthOrbitLine = new THREE.LineLoop(earthOrbitGeometry, earthOrbitMaterial);
            scene.add(earthOrbitLine);


            // 创建月球的公转轨道几何体
            var moonOrbitGeometry = new THREE.CircleGeometry(4, 64);
            moonOrbitGeometry.vertices.shift(); // Remove the center vertex
            moonOrbitGeometry.rotateX(Math.PI / 2); // Rotate the geometry to align with the XY plane
            var moonOrbitMaterial = new THREE.LineBasicMaterial({ color: 0xffffff });
            var moonOrbitLine = new THREE.LineLoop(moonOrbitGeometry, moonOrbitMaterial);
            earth.add(moonOrbitLine);

            //月球公转轨道
            var moonOrbit = new THREE.Object3D();
            moonOrbit.position.set(20, 0, 0);
            earthOrbit.add(moonOrbit);
            // scene.add(moonOrbit);

            // 创建月球的几何体
            var moonGeometry = new THREE.SphereGeometry(1, 32, 32);
            // 创建月球的材质
            var moonMaterial = new THREE.MeshBasicMaterial({ map: moonPicture });
            // 创建月球的网格
            var moon = new THREE.Mesh(moonGeometry, moonMaterial);

            // 将月球轨道添加到地球
            moon.position.set(4, 0, 0);
            // earth.add(moon);
            moonOrbit.add(moon);


            // 设置相机的位置
            camera3D.position.z = 40;
            cameraSide.position.z = 40;
            cameraTop.position.z = 40;


            // 动画函数
            function animate() {

                moonX += moonVX;
                moonY += moonVY;
                // Clear the canvas
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                // Draw the main animation
                ctx.fillStyle = "black";
                ctx.fillRect(0, 0, canvas.width, canvas.height);

                ctx.beginPath();
                // ctx.fillStyle="black";
                ctx.arc(sunX, sunY, 50, 0, 2 * Math.PI);
                ctx.drawImage(image, sunX - 50, sunY - 50, 100, 100);
                // ctx.fillStyle="red";
                // ctx.fill();
                ctx.closePath();
                // Check for boundaries and change direction if needed

                ctx.beginPath();
                ctx.arc(moonX, moonY, 45, 0, 2 * Math.PI);
                ctx.fillStyle = "black";
                ctx.fill();
                ctx.closePath();

                if (moonX - sunX > 200) {
                    moonX = init_moonX;
                    moonY = init_moonY;
                    moonVY = -moonVY;
                }
                if (moonX - sunX > 100) {
                    begin = true;
                }
                if (moonY - sunY < 0) {
                    moonVY = -moonVY;
                }


                if (begin) {
                    moonX1 += moonVX1;
                    moonY1 += moonVY1;
                }
                // Clear the canvas
                ctx1.clearRect(0, 0, canvas1.width, canvas1.height);
                // Draw the main animation
                ctx1.fillStyle = "black";
                ctx1.fillRect(0, 0, canvas1.width, canvas1.height);

                ctx1.beginPath();
                // ctx.fillStyle="black";
                ctx1.arc(sunX1, sunY1, 50, 0, 2 * Math.PI);
                ctx1.drawImage(image1, sunX1 - 50, sunY1 - 50, 100, 100);
                // ctx.fillStyle="red";
                // ctx.fill();
                ctx1.closePath();
                // Check for boundaries and change direction if needed

                ctx1.beginPath();
                ctx1.arc(moonX1, moonY1, 45, 0, 2 * Math.PI);
                ctx1.fillStyle = "black";
                ctx1.fill();
                ctx1.closePath();

                if (moonX1 - sunX1 > 200) {
                    moonX1 = init_moonX1;
                    moonY1 = init_moonY1;
                    moonVY1 = -moonVY1;
                }
                if (moonY1 - sunY1 < 0) {
                    moonVY1 = -moonVY1;
                }


                // 请求动画帧
                requestAnimationFrame(animate);
                // 地球公转的轨道绕Y轴旋转
                earthOrbit.rotation.y += 0.005;
                moonOrbit.rotation.y += 0.01;
                // 地球绕Y轴旋转
                earth.rotation.y += 0.05;
                // 月球绕Y轴旋转
                moon.rotation.y += 0.15;

                sun.rotation.y += 0.02;
                // 渲染场景和相机
                // Render 3D view/3
                renderer3D.setViewport(0, 0, window.innerWidth, window.innerHeight);
                renderer3D.render(scene, camera3D);

                rendererSide.setViewport(0, 0, window.innerWidth / 2, window.innerHeight / 2);
                rendererSide.render(scene, cameraSide);
                // // Render top view
                rendererTop.setViewport(0, -130, window.innerWidth / 2, window.innerHeight / 2);
                rendererTop.render(scene, cameraTop);
            }
            // 调用动画函数
            animate();
        };
    </script>
</body>

</html>