Вращающаяся сфера

Question

Как создать сферу, которую можно вращать, как в Google Earth? Также интересует, как сделать приближение к указанной точке на сфере и разбиении её на более мелкие полигоны, которые можно будет выбрать? Может быть есть готовые примеры или уроки? Примерно то же происходит и в Google Earth

Только учусь, необходимо понять, как это делается

Answer 1

// Создание сцены
const scene = new THREE.Scene();

// Создание камеры
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// Создание рендерера
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Создание сферы
const geometry = new THREE.SphereGeometry(2, 16, 16);
const material = new THREE.MeshBasicMaterial({  wireframe: true });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

// Создание осей для визуализации вращения
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

// Добавление слушателя для вращения сферы по оси X при нажатии клавиши w s
document.addEventListener('keydown', function(event) {
  if (event.key === 'w' || event.key === 'W' || event.key === 'ц' || event.key === 'Ц') {
    sphere.rotation.x += 0.1;
  } else if (event.key === 's' || event.key === 'S' || event.key === 'ы' || event.key === 'Ы' ) {
    sphere.rotation.x -= 0.1;
  }
  else if (event.key === 'a' || event.key === 'A' || event.key === 'ф' || event.key === 'Ф') {
    sphere.rotation.y -= 0.1;
  }
  else if (event.key === 'd' || event.key === 'D' || event.key === 'в' || event.key === 'В') {
    sphere.rotation.y += 0.1;
  }
});

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

animate();

<!DOCTYPE html>
<html lang="RU">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Сфера</title>
  <style>
    body { margin: 0; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script src="main.js"></script>
</body>
</html>

Я решил использовать популярную библиотеку Three.js . Можете поменять количество полигонов в строке THREE.SphereGeometry(2, 16, 16), и ее внешний вид в THREE.MeshBasicMaterial({ wireframe: true }), к примеру придать ей желтый цвет THREE.MeshBasicMaterial({ backroundColor: 0xffff00, wireframe: true }) . Кнопки управления можете поменять в самом конце event.key === 'w'.

БЛОГ НА HUSL

Вращающаяся сфера

Ответы (1 шт):