Загрузка сферической панорамы 360°
Вставьте код на Tilda, WordPress, Webflow или любой HTML-сайт
Разместите этот файл на хостинге и добавьте блок на ваш сайт. Панораму можно передавать через URL параметр ?url=ваша_панорама.jpg:
<iframe
src="https://tokarev3d.ru/panorama.html?url=360/panorama_360.jpg"
width="100%"
height="550"
frameborder="0"
allow="accelerometer; gyroscope; fullscreen"
allowfullscreen
style="border-radius: 16px; border: 1px solid rgba(255,255,255,0.1); width: 100%; height: 550px;">
</iframe>403 Forbidden). Без файла .htaccess сервер просто запрещает просмотр папки..JPG).Создайте текстовый файл panoramas.json внутри папки /360/ со списком файлов:
[
"living_room_360.jpg",
"kitchen_view.jpg",
"bedroom_view.jpg"
]Сохраните в папку /360/index.php полный код с CORS-заголовками и поиском без учета регистра:
<?php
header('Content-Type: application/json; charset=utf-8');
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, OPTIONS');
$files = scandir(__DIR__);
$panos = [];
foreach ($files as $f) {
if ($f === '.' || $f === '..') continue;
$ext = strtolower(pathinfo($f, PATHINFO_EXTENSION));
if (in_array($ext, ['jpg', 'jpeg', 'png', 'webp'])) {
$panos[] = $f;
}
}
echo json_encode($panos);
?>Чтобы сервер не отдавал ошибку 403 Forbidden, создайте в папке /360/ файл .htaccess:
Options +Indexes
Header set Access-Control-Allow-Origin "*"Минимальный скрипт (~20 строк Three.js) для прямого встраивания в любой существующий `div` на странице:
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<div id="pano-box" style="width:100%; height:500px; border-radius:12px; overflow:hidden;"></div>
<script>
(function() {
const box = document.getElementById('pano-box');
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, box.clientWidth / box.clientHeight, 1, 1100);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(box.clientWidth, box.clientHeight);
box.appendChild(renderer.domElement);
// Сфера с инвертированными нормалями для 360-просмотра изнутри
const geometry = new THREE.SphereGeometry(500, 60, 40);
geometry.scale(-1, 1, 1);
const texture = new THREE.TextureLoader().load('panorama_360.jpg');
scene.add(new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ map: texture })));
let lon = 0, lat = 0, isDragging = false, startX, startY;
box.addEventListener('pointerdown', e => { isDragging = true; startX = e.clientX; startY = e.clientY; });
window.addEventListener('pointermove', e => {
if (!isDragging) return;
lon += (startX - e.clientX) * 0.15;
lat = Math.max(-85, Math.min(85, lat + (e.clientY - startY) * 0.15));
startX = e.clientX; startY = e.clientY;
});
window.addEventListener('pointerup', () => isDragging = false);
function animate() {
requestAnimationFrame(animate);
const phi = THREE.MathUtils.degToRad(90 - lat);
const theta = THREE.MathUtils.degToRad(lon);
camera.lookAt(500 * Math.sin(phi) * Math.cos(theta), 500 * Math.cos(phi), 500 * Math.sin(phi) * Math.sin(theta));
renderer.render(scene, camera);
}
animate();
})();
</script>