Skip to content

Commit 80cd078

Browse files
PythonnotJavaPythonnotJava
committed
NEW
1 parent 54ab175 commit 80cd078

File tree

6 files changed

+121
-47
lines changed

6 files changed

+121
-47
lines changed

‎.idea/.gitignore

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎.idea/PythonnotJava.github.io.iml

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎.idea/inspectionProfiles/Project_Default.xml

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎.idea/modules.xml

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎.idea/vcs.xml

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎temp/html/moon.html

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Cyber Moon with Floating Stars and Shadows</title>
7+
<style>
8+
body { margin: 0; overflow: hidden; }
9+
canvas { display: block; }
10+
</style>
11+
</head>
12+
<body>
13+
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
14+
<script>
15+
// Setup scene, camera, and renderer
16+
const scene = new THREE.Scene();
17+
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
18+
const renderer = new THREE.WebGLRenderer();
19+
renderer.setSize(window.innerWidth, window.innerHeight);
20+
document.body.appendChild(renderer.domElement);
21+
22+
// Create moon geometry (a smooth sphere)
23+
const moonGeometry = new THREE.SphereGeometry(3, 128, 128);
24+
25+
// Create moon material with emissive glow
26+
const moonMaterial = new THREE.MeshStandardMaterial({
27+
color: 0xffd700, // Golden color
28+
emissive: 0xffcc33, // Golden glow
29+
metalness: 0.8,
30+
roughness: 0.2,
31+
});
32+
33+
// Create moon mesh
34+
const moon = new THREE.Mesh(moonGeometry, moonMaterial);
35+
moon.castShadow = true; // Allow moon to cast shadow
36+
scene.add(moon);
37+
38+
// Create lighting for realistic shadow effects
39+
const ambientLight = new THREE.AmbientLight(0x404040, 1); // Dim ambient light
40+
scene.add(ambientLight);
41+
42+
const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5); // Strong directional light to create shadows
43+
directionalLight.position.set(10, 10, 10);
44+
directionalLight.castShadow = true; // Enable shadow casting
45+
scene.add(directionalLight);
46+
47+
// Shadow properties
48+
directionalLight.shadow.mapSize.width = 1024;
49+
directionalLight.shadow.mapSize.height = 1024;
50+
directionalLight.shadow.camera.near = 0.5;
51+
directionalLight.shadow.camera.far = 50;
52+
53+
// Background stars
54+
const starGeometry = new THREE.BufferGeometry();
55+
const starMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 0.05 });
56+
const starVertices = [];
57+
const starVelocities = [];
58+
for (let i = 0; i < 1000; i++) {
59+
const x = (Math.random() - 0.5) * 200;
60+
const y = (Math.random() - 0.5) * 200;
61+
const z = -Math.random() * 200;
62+
starVertices.push(x, y, z);
63+
starVelocities.push((Math.random() - 0.5) * 0.01, (Math.random() - 0.5) * 0.01, (Math.random() - 0.5) * 0.01);
64+
}
65+
starGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starVertices, 3));
66+
const stars = new THREE.Points(starGeometry, starMaterial);
67+
scene.add(stars);
68+
69+
// Initial camera position
70+
camera.position.z = 12;
71+
72+
// Variables to store mouse position
73+
let mouseX = 0, mouseY = 0;
74+
75+
// Listen for mouse movement to adjust moon rotation
76+
document.addEventListener('mousemove', (event) => {
77+
mouseX = (event.clientX / window.innerWidth) * 2 - 1;
78+
mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
79+
});
80+
81+
// Animate the moon and stars
82+
function animate() {
83+
requestAnimationFrame(animate);
84+
85+
// Update moon rotation based on mouse position
86+
moon.rotation.y = mouseX * Math.PI * 0.2; // Horizontal rotation
87+
moon.rotation.x = mouseY * Math.PI * 0.2; // Vertical rotation
88+
89+
// Rotate moon continuously
90+
moon.rotation.z += 0.005;
91+
92+
// Simulate floating stars
93+
const positions = starGeometry.attributes.position.array;
94+
for (let i = 0; i < positions.length; i += 3) {
95+
positions[i] += starVelocities[i] * 0.5;
96+
positions[i + 1] += starVelocities[i + 1] * 0.5;
97+
positions[i + 2] += starVelocities[i + 2] * 0.5;
98+
99+
if (positions[i] > 100 || positions[i] < -100) positions[i] = (Math.random() - 0.5) * 200;
100+
if (positions[i + 1] > 100 || positions[i + 1] < -100) positions[i + 1] = (Math.random() - 0.5) * 200;
101+
if (positions[i + 2] > 200) positions[i + 2] = -200;
102+
}
103+
starGeometry.attributes.position.needsUpdate = true;
104+
105+
// Star flickering effect
106+
starMaterial.opacity = 0.7 + Math.sin(Date.now() * 0.001) * 0.3;
107+
108+
renderer.render(scene, camera);
109+
}
110+
111+
animate();
112+
113+
// Handle window resizing
114+
window.addEventListener('resize', () => {
115+
renderer.setSize(window.innerWidth, window.innerHeight);
116+
camera.aspect = window.innerWidth / window.innerHeight;
117+
camera.updateProjectionMatrix();
118+
});
119+
</script>
120+
</body>
121+
</html>

0 commit comments

Comments
 (0)