https://altek.uz/static/js/three.js

1//Import the THREE.js library
2import * as THREE from "https://cdn.skypack.dev/[email protected]/build/three.module.js";
3// To allow for the camera to move around the scene
4import {OrbitControls} from "https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js";
5// To allow for importing the .gltf file
6import {GLTFLoader} from "https://cdn.skypack.dev/[email protected]/examples/jsm/loaders/GLTFLoader.js";
7// === 1. СЦЕНА ===
8const scene = new THREE.Scene();
9
10// Создаём загрузчик текстур
11const textureLoader = new THREE.TextureLoader();
12
13// Загружаем карту металличности
14const metalnessMap = textureLoader.load('/static/js/2k_mars.jpg');
15const marsMap = textureLoader.load('/static/js/2k_mercury.jpg');
16
17
18// === 2. КАМЕРА ===
19const camera = new THREE.PerspectiveCamera(
20    45,
21    window.innerWidth / window.innerHeight,
22    0.1,
23    1000
24);
25camera.position.set(0, 11, 15);
26
27const orbitCenterY = 2; // центр орбиты (и точка фокуса камеры)
28camera.lookAt(0, 0, 0);
29
30
31// === 3. РЕНДЕРЕР ===
32const container = document.getElementById("container3D");
33
34
35const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
36renderer.setClearColor(0x000000, 0);
37container.appendChild(renderer.domElement);
38
39
40// === 4. СВЕТ ===
41const pointLight = new THREE.PointLight(0xA098CD, 10);
42pointLight.power = 25;
43pointLight.distance = 10;
44pointLight.position.set(0, 0, 0); // оставляем свет в центре орбиты
45scene.add(pointLight);
46
47const spotLight = new THREE.SpotLight(0xffffff);
48spotLight.position.set(10, 10, 10);
49
50scene.add(spotLight);
51
52const pointLight2 = new THREE.PointLight(0xA098CD, 10);
53pointLight2.power = 15;
54pointLight2.distance = 10;
55pointLight2.position.set(0, 5, 5); // оставляем свет в центре орбиты
56scene.add(pointLight2);
57//
58// const sunGeometry = new THREE.SphereGeometry(0.5, 32, 32);
59// const sunMaterial = new THREE.MeshStandardMaterial({
60//   color: 0x933FFE,
61//   metalness: 0.3,
62//   roughness: 0.2
63// });
64// const sun = new THREE.Mesh(sunGeometry, sunMaterial);
65// sun.position.set(-3, 4, -2)
66//
67// scene.add(sun);
68
69
70// Загружаем дымовую текстуру (PNG с прозрачностью)
71const loader = new THREE.TextureLoader();
72// const smokeTexture = loader.load('assets/js/pngwing.com.png');
73
74// Материал дыма
75// const smokeMaterial = new THREE.MeshLambertMaterial({
76//   map: smokeTexture,
77//   transparent: true,
78//   opacity: 0.2,
79//   depthWrite: false,
80//   blending: THREE.AdditiveBlending,
81//   side: THREE.DoubleSide
82// });
83
84// Создаём много "облаков" дыма
85// const smokeParticles = [];
86//
87// for (let i = 0; i < 8; i++) {
88//   const cloud = new THREE.Mesh(
89//     new THREE.PlaneGeometry(40, 40),
90//     smokeMaterial
91//   );
92//
93//   cloud.position.set(
94//     Math.random() * 50 - 25,
95//     Math.random() * 30 - 15,
96//     Math.random() * 50 - 25
97//   );
98//
99//   cloud.rotation.z = Math.random() * 2 * Math.PI;
100//   scene.add(cloud);
101//   smokeParticles.push(cloud);
102// }
103
104// Анимация дыма
105// function animateSmoke() {
106//   requestAnimationFrame(animateSmoke);
107//   smokeParticles.forEach(p => {
108//     p.rotation.z += 0.001;  // медленное вращение
109//   });
110//   renderer.render(scene, camera);
111// }
112// animateSmoke();
113
114
115
116const ambient = new THREE.AmbientLight(0xffffff, 0.5);
117scene.add(ambient);
118
119// ==== 5. ГРУППА ДЛЯ ПОДЪЁМА ВСЕХ ОБЪЕКТОВ ===
120const sceneGroup = new THREE.Group();
121sceneGroup.position.y = 2;
122scene.add(sceneGroup);
123
124// === 5. ПЛАНЕТА (сфера) ===
125const planetGeometry = new THREE.SphereGeometry(1.5, 64, 64);
126const planetMaterial = new THREE.MeshStandardMaterial({
127    color: 0xffffff,
128    metalness: 0.1,
129    roughness: 0.9,
130    // emissive: 0x823214,
131    map: metalnessMap
132
133});
134const planet = new THREE.Mesh(planetGeometry, planetMaterial);
135sceneGroup.add(planet);
136
137// === 5. ПЛАНЕТА2 (сфера) ===
138const planetGeometry2 = new THREE.SphereGeometry(1, 64, 64);
139const planetMaterial2 = new THREE.MeshStandardMaterial({
140    color: 0xffffff,
141    metalness: 0.5,
142    roughness: 10,
143    map: marsMap
144});
145
146const planet2 = new THREE.Mesh(planetGeometry2, planetMaterial2);
147sceneGroup.add(planet2);
148
149
150// === 6. ПАРАМЕТРЫ ОРБИТЫ ===
151let angle = 22;
152let angle2 = 25;
153
154
155const radiusX = 12; // ширина эллипса
156const radiusZ = 8; // высота эллипса
157
158const tilt = Math.PI/1.05; // наклон орбиты
159const orbitHeight = 1; // поднимаем орбиту вверх
160
161// === СОЗДАЁМ ЛИНИЮ ОРБИТЫ ===
162const points = [];
163const steps = 128; // чем больше — тем плавнее эллипс
164
165for (let i = 0; i <= steps; i++) {

166    const angle = (i / steps) * Math.PI * 2;
167    const x = Math.cos(angle) * radiusX;
168    const z = Math.sin(angle) * radiusZ;
169    const y = x * Math.sin(tilt) + 1; // применяем наклон
170    const xTilt = x * Math.cos(tilt);
171
172    points.push(new THREE.Vector3(xTilt, y, z));
173}
174
175const orbitGeometry = new THREE.BufferGeometry().setFromPoints(points);
176const orbitMaterial = new THREE.LineBasicMaterial({
177    color: 0x484848,
178    transparent: true,
179    opacity: 0.5,
180});
181const orbitLine = new THREE.LineLoop(orbitGeometry, orbitMaterial);
182sceneGroup.add(orbitLine);
183
184const points2 = [];
185const steps2 = 128; // чем больше — тем плавнее эллипс
186
187for (let i = 0; i <= steps2; i++) {
188    const angle = (i / steps2) * Math.PI * 3;
189    const x = Math.cos(-angle / 1.5) * radiusX/1.5;
190    const z = Math.sin(-angle / 1.5) * radiusZ/1.5;
191    const y = x * Math.sin(tilt)+1; // применяем наклон
192    const xTilt = x * Math.cos(tilt);
193
194    points2.push(new THREE.Vector3(xTilt, y, z));
195}
196
197const orbitGeometry2 = new THREE.BufferGeometry().setFromPoints(points2);
198const orbitMaterial2 = new THREE.LineBasicMaterial({
199    color: 0x484848,
200    transparent: true,
201    opacity: 0.5,
202});
203const orbitLine2 = new THREE.LineLoop(orbitGeometry2, orbitMaterial2);
204sceneGroup.add(orbitLine2);
205
206
207// ПРОВЕРКА ШИРИНЫ ЭКРАНА.
208
209
210// === 7. АНИМАЦИЯ ===
211
212function animate() {
213    requestAnimationFrame(animate);
214
215
216    angle += 0.01 / 12; // скорость вращения
217    angle2 += 0.01 / 12; // скорость вращения
218
219    // эллиптическое движение
220    const x = Math.cos(-angle) * radiusX;
221    const z = Math.sin(-angle) * radiusZ;
222
223    // применяем наклон и смещение вверх
224    planet.position.set(
225        x * Math.cos(tilt),
226        x * Math.sin(tilt) + orbitHeight,
227        z
228    );
229    // вращение планеты вокруг своей оси
230    planet.rotation.y += 0.05 / 20;
231
232    // эллиптическое движение для второй планеты
233    const x2 = Math.cos(angle2 * 1.5) * radiusX / 1.5;
234    const z2 = Math.sin(angle2 * 1.5) * radiusZ / 1.5;
235
236    // применяем наклон и смещение вверх
237    planet2.position.set(
238        x2 * Math.cos(tilt),
239        x2 * Math.sin(tilt) + orbitHeight,
240        z2
241    );
242    // вращение планеты вокруг своей оси
243    planet2.rotation.y += 0.05 / 10;
244    // console.log("pos changed");
245    
246
247renderer.render(scene, camera);
248}
249
250animate();
251
252// === 8. ОБРАБОТКА ИЗМЕНЕНИЯ РАЗМЕРА ОКНА ===
253function resizeRenderer() {
254  const width = container.clientWidth;
255  const height = container.clientHeight / 2;
256  renderer.setSize(width, height, false);
257  camera.aspect = width / height;
258  camera.updateProjectionMatrix();
259  console.log(height);
260  
261}
262
263window.addEventListener("resize", resizeRenderer);
264resizeRenderer();
265
266