AllStar6581 · December 26, 2025 23:18
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AR 3D - Простой рабочий вариант</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            overflow: hidden;
            background: #000;
            font-family: Arial, sans-serif;
        }
        
        #start-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 100;
        }
        
        #start-button {
            background: white;
            color: #764ba2;
            border: none;
            padding: 20px 50px;
            font-size: 24px;
            border-radius: 50px;
            cursor: pointer;
            font-weight: bold;
            margin-top: 30px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            transition: transform 0.3s;
        }
        
        #start-button:hover {
            transform: scale(1.05);
        }
        
        #camera-video {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
            display: none;
        }
        
        #ar-scene {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            display: none;
        }
        
        #info {
            position: fixed;
            top: 10px;
            left: 10px;
            background: rgba(0,0,0,0.7);
            color: white;
            padding: 10px;
            border-radius: 5px;
            z-index: 3;
            font-size: 14px;
            display: none;
        }
    </style>
 </head>
 <body>
    <!-- Начальный экран -->
    <div id="start-screen">
        <h1 style="color: white; margin-bottom: 20px;">AR 3D Тест</h1>
        <p style="color: white; text-align: center; margin-bottom: 20px;">
            Нажмите кнопку, чтобы включить камеру<br>и увидеть 3D объект
        </p>
        <button id="start-button">🚀 ВКЛЮЧИТЬ AR</button>
    </div>
    
    <!-- Видео с камеры -->
    <video id="camera-video" autoplay playsinline></video>
    
    <!-- A-Frame сцена -->
    <div id="ar-scene">
        <!-- Сцена будет создана динамически -->
    </div>
    
    <!-- Информация -->
    <div id="info">Загрузка...</div>

    <!-- Библиотеки -->
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
    
    <script>
        const startScreen = document.getElementById('start-screen');
        const startButton = document.getElementById('start-button');
        const cameraVideo = document.getElementById('camera-video');
        const arScene = document.getElementById('ar-scene');
        const info = document.getElementById('info');
        
        // Основная функция запуска AR
        async function startAR() {
            try {
                // Скрываем стартовый экран
                startScreen.style.display = 'none';
                info.style.display = 'block';
                info.textContent = 'Запрашиваю камеру...';
                
                // 1. Запрашиваем камеру
                const stream = await navigator.mediaDevices.getUserMedia({
                    video: {
                        facingMode: { ideal: 'environment' }
                    }
                });
                
                // Показываем видео с камеры
                cameraVideo.srcObject = stream;
                cameraVideo.style.display = 'block';
                info.textContent = 'Камера включена. Запрашиваю GPS...';
                
                // 2. Запрашиваем GPS
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(
                        position => {
                            const lat = position.coords.latitude;
                            const lon = position.coords.longitude;
                            
                            info.textContent = `GPS: ${lat.toFixed(6)}, ${lon.toFixed(6)}`;
                            
                            // 3. Создаем 3D сцену
                            create3DScene(lat, lon);
                        },
                        error => {
                            console.warn('GPS ошибка:', error);
                            info.textContent = 'GPS недоступен. Создаю объект...';
                            create3DScene(55.751244, 37.618423);
                        },
                        { enableHighAccuracy: true, timeout: 10000 }
                    );
                } else {
                    info.textContent = 'GPS не поддерживается. Создаю объект...';
                    create3DScene(55.751244, 37.618423);
                }
                
            } catch (error) {
                console.error('Ошибка:', error);
                info.textContent = `Ошибка: ${error.message}`;
                startScreen.style.display = 'flex';
            }
        }
        
        // Функция создания 3D сцены
        function create3DScene(lat, lon) {
            // Создаем простую сцену A-Frame
            const sceneHTML = `
                <a-scene embedded>
                    <!-- Камера -->
                    <a-camera position="0 1.6 0">
                        <!-- Крестик прицела -->
                        <a-circle 
                            radius="0.02" 
                            color="#00FF00" 
                            position="0 0 -1"
                            opacity="0.8">
                        </a-circle>
                    </a-camera>
                    
                    <!-- КРАСНАЯ 3D КОРОБКА -->
                    <a-box 
                        id="ar-box"
                        position="0 0 -2"
                        rotation="0 45 45"
                        color="#FF0000"
                        scale="0.5 0.5 0.5"
                        animation="property: rotation; to: 0 405 45; loop: true; dur: 5000">
                        
                        <a-text 
                            value="3D ОБЪЕКТ"
                            align="center"
                            color="white"
                            position="0 0.8 0"
                            scale="1 1 1">
                        </a-text>
                        
                        <!-- Координаты -->
                        <a-text 
                            value="${lat.toFixed(4)} ${lon.toFixed(4)}"
                            align="center"
                            color="#FFFF00"
                            position="0 -0.5 0"
                            scale="0.5 0.5 0.5">
                        </a-text>
                    </a-box>
                    
                    <!-- Зеленый маркер -->
                    <a-circle 
                        position="0 0 -2"
                        radius="0.3"
                        color="#00FF00"
                        opacity="0.3"
                        rotation="-90 0 0">
                    </a-circle>
                </a-scene>
            `;
            
            // Вставляем сцену
            arScene.innerHTML = sceneHTML;
            arScene.style.display = 'block';
            
            // Обновляем информацию
            info.textContent = `AR активен! GPS: ${lat.toFixed(6)}, ${lon.toFixed(6)}`;
            
            // Добавляем функцию для исправления прозрачности
            setTimeout(() => {
                const canvas = arScene.querySelector('canvas');
                if (canvas) {
                    canvas.style.background = 'transparent';
                    canvas.style.backgroundColor = 'transparent';
                }
            }, 500);
        }
        
        // Назначаем обработчик кнопки
        startButton.addEventListener('click', startAR);
        
        // Для отладки в консоли
        console.log('Простой AR тест. Нажмите кнопку "ВКЛЮЧИТЬ AR"');
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>AR 3D - Простой рабочий вариант</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	overflow: hidden;
	background: #000;
	font-family: Arial, sans-serif;
	}

	#start-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 100;
	}

	#start-button {
	background: white;
	color: #764ba2;
	border: none;
	padding: 20px 50px;
	font-size: 24px;
	border-radius: 50px;
	cursor: pointer;
	font-weight: bold;
	margin-top: 30px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.2);
	transition: transform 0.3s;
	}

	#start-button:hover {
	transform: scale(1.05);
	}

	#camera-video {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	display: none;
	}

	#ar-scene {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	display: none;
	}

	#info {
	position: fixed;
	top: 10px;
	left: 10px;
	background: rgba(0,0,0,0.7);
	color: white;
	padding: 10px;
	border-radius: 5px;
	z-index: 3;
	font-size: 14px;
	display: none;
	}
	</style>
	</head>
	<body>
	<!-- Начальный экран -->
	<div id="start-screen">
	<h1 style="color: white; margin-bottom: 20px;">AR 3D Тест</h1>
	<p style="color: white; text-align: center; margin-bottom: 20px;">
	Нажмите кнопку, чтобы включить камеру<br>и увидеть 3D объект
	</p>
	<button id="start-button">🚀 ВКЛЮЧИТЬ AR</button>
	</div>

	<!-- Видео с камеры -->
	<video id="camera-video" autoplay playsinline></video>

	<!-- A-Frame сцена -->
	<div id="ar-scene">
	<!-- Сцена будет создана динамически -->
	</div>

	<!-- Информация -->
	<div id="info">Загрузка...</div>

	<!-- Библиотеки -->
	<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>

	<script>
	const startScreen = document.getElementById('start-screen');
	const startButton = document.getElementById('start-button');
	const cameraVideo = document.getElementById('camera-video');
	const arScene = document.getElementById('ar-scene');
	const info = document.getElementById('info');

	// Основная функция запуска AR
	async function startAR() {
	try {
	// Скрываем стартовый экран
	startScreen.style.display = 'none';
	info.style.display = 'block';
	info.textContent = 'Запрашиваю камеру...';

	// 1. Запрашиваем камеру
	const stream = await navigator.mediaDevices.getUserMedia({
	video: {
	facingMode: { ideal: 'environment' }
	}
	});

	// Показываем видео с камеры
	cameraVideo.srcObject = stream;
	cameraVideo.style.display = 'block';
	info.textContent = 'Камера включена. Запрашиваю GPS...';

	// 2. Запрашиваем GPS
	if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(
	position => {
	const lat = position.coords.latitude;
	const lon = position.coords.longitude;

	info.textContent = `GPS: ${lat.toFixed(6)}, ${lon.toFixed(6)}`;

	// 3. Создаем 3D сцену
	create3DScene(lat, lon);
	},
	error => {
	console.warn('GPS ошибка:', error);
	info.textContent = 'GPS недоступен. Создаю объект...';
	create3DScene(55.751244, 37.618423);
	},
	{ enableHighAccuracy: true, timeout: 10000 }
	);
	} else {
	info.textContent = 'GPS не поддерживается. Создаю объект...';
	create3DScene(55.751244, 37.618423);
	}

	} catch (error) {
	console.error('Ошибка:', error);
	info.textContent = `Ошибка: ${error.message}`;
	startScreen.style.display = 'flex';
	}
	}

	// Функция создания 3D сцены
	function create3DScene(lat, lon) {
	// Создаем простую сцену A-Frame
	const sceneHTML = `
	<a-scene embedded>
	<!-- Камера -->
	<a-camera position="0 1.6 0">
	<!-- Крестик прицела -->
	<a-circle
	radius="0.02"
	color="#00FF00"
	position="0 0 -1"
	opacity="0.8">
	</a-circle>
	</a-camera>

	<!-- КРАСНАЯ 3D КОРОБКА -->
	<a-box
	id="ar-box"
	position="0 0 -2"
	rotation="0 45 45"
	color="#FF0000"
	scale="0.5 0.5 0.5"
	animation="property: rotation; to: 0 405 45; loop: true; dur: 5000">

	<a-text
	value="3D ОБЪЕКТ"
	align="center"
	color="white"
	position="0 0.8 0"
	scale="1 1 1">
	</a-text>

	<!-- Координаты -->
	<a-text
	value="${lat.toFixed(4)} ${lon.toFixed(4)}"
	align="center"
	color="#FFFF00"
	position="0 -0.5 0"
	scale="0.5 0.5 0.5">
	</a-text>
	</a-box>

	<!-- Зеленый маркер -->
	<a-circle
	position="0 0 -2"
	radius="0.3"
	color="#00FF00"
	opacity="0.3"
	rotation="-90 0 0">
	</a-circle>
	</a-scene>
	`;

	// Вставляем сцену
	arScene.innerHTML = sceneHTML;
	arScene.style.display = 'block';

	// Обновляем информацию
	info.textContent = `AR активен! GPS: ${lat.toFixed(6)}, ${lon.toFixed(6)}`;

	// Добавляем функцию для исправления прозрачности
	setTimeout(() => {
	const canvas = arScene.querySelector('canvas');
	if (canvas) {
	canvas.style.background = 'transparent';
	canvas.style.backgroundColor = 'transparent';
	}
	}, 500);
	}

	// Назначаем обработчик кнопки
	startButton.addEventListener('click', startAR);

	// Для отладки в консоли
	console.log('Простой AR тест. Нажмите кнопку "ВКЛЮЧИТЬ AR"');
	</script>
	</body>
	</html>
No results found