sphere 360 panorama test

by Konstantin Cryman

HTML

<!-- Підключаємо Three.js через jsDelivr -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
    <!-- Підключаємо OrbitControls через jsDelivr -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>


<style>
  body{
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
  }
</style>
<input style="position:fixed; left: 5px; top: 5px; z-index: 9999; " type="file" id="file_input">

JavaScript

console.log( { THREE } );

window.onload = () => {

// Отримуємо розмір екрану
const width = window.innerWidth;
const height = window.innerHeight;

// Створюємо сцену
const scene = new THREE.Scene();

// Створюємо камеру
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);

// Створюємо рендерер
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);



// Додаємо управління камерою
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // Додаємо плавність руху
controls.dampingFactor = 0.25;
controls.rotateSpeed  = -0.25;
controls.enableZoom = false; // Можна вимкнути зум

// Загружаємо текстуру
const textureLoader = new THREE.TextureLoader();
const texture = new THREE.Texture();

// Створюємо матеріал з текстурою
const material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide });

// Створюємо геометрію сфери
const geometry = new THREE.SphereGeometry(500, 60, 40);
geometry.scale(-1, 1, 1); // Розвертаємо геометрію, щоб текстура була всередині сфери

// Створюємо сферу з матеріалом
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

// Налаштовуємо камеру
camera.position.set(0, 0, 0.1); // Зсуваємо камеру трохи вперед, щоб уникнути колізій з сферою

// Додаємо обробник для ресайзу вікна
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

// Функція для анімації і оновлення сцени
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

document.getElementById('file_input').addEventListener('change', ( e ) => {
	const file = document.getElementById('file_input').files[0];
  if( file ){
  	console.log( { file } );
    const fr = new FileReader();
    fr.onload = () => {
    	const nextImg =...