Skip to content

Commit a5c8448

Browse files
adymitrukadymitruk
committed
Merge remote-tracking branch 'origin/master'
2 parents b7a56f1 + 5606c35 commit a5c8448

File tree

1 file changed

+191
-0
lines changed

1 file changed

+191
-0
lines changed

‎static/3d.html

+191
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
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>Moving Glass Pane</title>
7+
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.160.0/three.min.js"></script>
8+
<style>
9+
body { margin: 0; }
10+
canvas { width: 100%; height: 100vh; }
11+
</style>
12+
</head>
13+
<body>
14+
<script>
15+
// Scene setup
16+
const scene = new THREE.Scene();
17+
scene.background = new THREE.Color(0x000000);
18+
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
19+
const renderer = new THREE.WebGLRenderer({ antialias: true });
20+
renderer.setSize(window.innerWidth, window.innerHeight);
21+
document.body.appendChild(renderer.domElement);
22+
23+
// Create glass pane
24+
const event_rectangle = new THREE.Shape();
25+
event_rectangle.moveTo(-1.5, -1);
26+
event_rectangle.lineTo(1.5, -1);
27+
event_rectangle.lineTo(1.5, 1);
28+
event_rectangle.lineTo(-1.5, 1);
29+
event_rectangle.lineTo(-1.5, -1);
30+
31+
const extrudeSettings = {
32+
steps: 1,
33+
depth: 0.1,
34+
bevelEnabled: true,
35+
bevelThickness: 0.1,
36+
bevelSize: 0.1,
37+
bevelOffset: 0,
38+
bevelSegments: 5
39+
};
40+
41+
const material_base_settings = {
42+
metalness: 0.0,
43+
roughness: 0.1,
44+
transmission: 0.2,
45+
thickness: 0.5,
46+
transparent: true,
47+
opacity: 0.95
48+
};
49+
50+
// Add function to create login page texture
51+
function createLoginPageTexture() {
52+
const canvas = document.createElement('canvas');
53+
canvas.width = 1024;
54+
canvas.height = 684;
55+
const ctx = canvas.getContext('2d');
56+
57+
// Set white background
58+
ctx.fillStyle = '#ffffff';
59+
ctx.fillRect(0, 0, canvas.width, canvas.height);
60+
61+
// Draw login form elements
62+
ctx.fillStyle = '#333333';
63+
ctx.font = 'bold 80px Arial';
64+
ctx.fillText('Login', 100, 120);
65+
66+
// Username field
67+
ctx.fillStyle = '#f5f5f5';
68+
ctx.fillRect(100, 180, 824, 100);
69+
ctx.strokeStyle = '#dddddd';
70+
ctx.strokeRect(100, 180, 824, 100);
71+
ctx.fillStyle = '#999999';
72+
ctx.font = '48px Arial';
73+
ctx.fillText('Username', 130, 244);
74+
75+
// Password field
76+
ctx.fillStyle = '#f5f5f5';
77+
ctx.fillRect(100, 320, 824, 100);
78+
ctx.strokeStyle = '#dddddd';
79+
ctx.strokeRect(100, 320, 824, 100);
80+
ctx.fillStyle = '#999999';
81+
ctx.fillText('Password', 130, 384);
82+
83+
// Login button
84+
ctx.fillStyle = '#007bff';
85+
ctx.fillRect(100, 460, 824, 100);
86+
ctx.fillStyle = '#ffffff';
87+
ctx.font = 'bold 48px Arial';
88+
ctx.fillText('Sign In', 430, 524);
89+
90+
return new THREE.CanvasTexture(canvas);
91+
}
92+
93+
// Function to create a pane
94+
function createPane(color, yPosition, materialOverrides = {}) {
95+
const geometry = new THREE.ExtrudeGeometry(event_rectangle, extrudeSettings);
96+
const material = new THREE.MeshPhysicalMaterial({
97+
...material_base_settings,
98+
color,
99+
side: THREE.DoubleSide,
100+
...materialOverrides
101+
});
102+
103+
const pane = new THREE.Mesh(geometry, material);
104+
pane.position.y = yPosition;
105+
pane.rotation.x = -0.2;
106+
scene.add(pane);
107+
return pane;
108+
}
109+
110+
// Create the three panes
111+
const glassPane = createPane(0xffae00, -3);
112+
const bluePane = createPane(0x00aaff, 0.5, {
113+
metalness: 0.1,
114+
roughness: 0.2,
115+
transmission: 0.3,
116+
});
117+
const whitePane = createPane(0xffffff, 3.7, {
118+
roughness: 0.2,
119+
thickness: 0.2,
120+
transmission: 0,
121+
metalness: 0,
122+
map: createLoginPageTexture(),
123+
transparent: true,
124+
opacity: 1
125+
});
126+
127+
// Lighting
128+
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
129+
scene.add(ambientLight);
130+
131+
const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5);
132+
directionalLight.position.set(0, 5, 5);
133+
scene.add(directionalLight);
134+
135+
const pointLight = new THREE.PointLight(0xffffff, 1.5);
136+
pointLight.position.set(0, -5, 5);
137+
scene.add(pointLight);
138+
139+
// Camera position
140+
camera.position.z = 8;
141+
camera.position.y = 0;
142+
camera.lookAt(0, 0, 0);
143+
144+
// Animation
145+
let direction = 1;
146+
let position = -10;
147+
let rotationAngle = 0; // Add rotation tracking
148+
149+
function animate() {
150+
requestAnimationFrame(animate);
151+
152+
// Move all glass panes
153+
position += 0.05 * direction;
154+
rotationAngle += 0.02; // Increment rotation
155+
156+
// Reverse direction at edges
157+
if (position > 10) {
158+
direction = -1;
159+
} else if (position < -10) {
160+
direction = 1;
161+
}
162+
163+
// Update position and add twisting rotation
164+
glassPane.position.x = position;
165+
bluePane.position.x = position;
166+
whitePane.position.x = position;
167+
168+
// Add smooth twisting motion using sine wave
169+
glassPane.rotation.y = Math.sin(rotationAngle) * 0.3;
170+
bluePane.rotation.y = Math.sin(rotationAngle + 2) * 0.3; // Phase offset for variation
171+
whitePane.rotation.y = Math.sin(rotationAngle + 4) * 0.3; // Different phase offset
172+
173+
// Add slight tilt variation
174+
glassPane.rotation.z = Math.sin(rotationAngle * 0.5) * 0.1;
175+
bluePane.rotation.z = Math.sin((rotationAngle + 2) * 0.5) * 0.1;
176+
whitePane.rotation.z = Math.sin((rotationAngle + 4) * 0.5) * 0.1;
177+
178+
renderer.render(scene, camera);
179+
}
180+
181+
// Handle window resize
182+
window.addEventListener('resize', () => {
183+
camera.aspect = window.innerWidth / window.innerHeight;
184+
camera.updateProjectionMatrix();
185+
renderer.setSize(window.innerWidth, window.innerHeight);
186+
});
187+
188+
animate();
189+
</script>
190+
</body>
191+
</html>

0 commit comments

Comments
 (0)