them-html

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

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>الخلفية التقنية</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background: #03030c;
            overflow: hidden;
            width: 100vw;
            height: 100vh;
        }
        #canvas-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
        }
    </style>

    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three@0.128.0/build/three.module.js"
            }
        }
    </script>
</head>
<body>

    <div id="canvas-container"></div>

    <script type="module">
        import * as THREE from 'three';

        const container = document.getElementById('canvas-container');
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x020206);

        const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 40;

        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
        container.appendChild(renderer.domElement);

        // شبكة الجسيمات الملونة
        const geometry = new THREE.BufferGeometry();
        const count = 1800;
        const positions = new Float32Array(count * 3);
        const colors = new Float32Array(count * 3);

        for (let i = 0; i < count * 3; i += 3) {
            positions[i] = (Math.random() - 0.5) * 150;
            positions[i + 1] = (Math.random() - 0.5) * 150;
            positions[i + 2] = (Math.random() - 0.5) * 100;

            const mixedColor = new THREE.Color();
            mixedColor.setHSL(Math.random() > 0.5 ? 0.52 : 0.95, 1.0, 0.6);
            colors[i] = mixedColor.r;
            colors[i + 1] = mixedColor.g;
            colors[i + 2] = mixedColor.b;
        }

        geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
        geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));

        const material = new THREE.PointsMaterial({
            size: 0.35,
            vertexColors: true,
            transparent: true,
            opacity: 0.6
        });

        const points = new THREE.Points(geometry, material);
        scene.add(points);

        // الشكل الهندسي المركزي السلكي
        const meshGeo = new THREE.IcosahedronGeometry(8, 1);
        const meshMat = new THREE.MeshBasicMaterial({
            color: 0x00f3ff,
            wireframe: true,
            transparent: true,
            opacity: 0.15
        });
        const centralNode = new THREE.Mesh(meshGeo, meshMat);
        scene.add(centralNode);

        const clock = new THREE.Clock();

        function renderFrame() {
            requestAnimationFrame(renderFrame);
            const elapsedTime = clock.getElapsedTime();

            points.rotation.y = elapsedTime * 0.03;
            points.rotation.x = elapsedTime * 0.01;

            centralNode.rotation.x = elapsedTime * 0.1;
            centralNode.rotation.y = elapsedTime * 0.15;

            renderer.render(scene, camera);
        }
        renderFrame();

        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
    </script>

</body>
</html>