Проецирование изображения скайбокса для создания изображения 360°
Кубическое картографирование — это метод картографирования окружающей среды, используемый для создания 360-градусных изображений.
Чтобы создать изображение 360° с помощью кубического отображения, мы используем изображения скайбокса. Изображение скайбокса — это изображение, захватывающее верхнюю, нижнюю, переднюю, заднюю, левую и правую часть окружающей среды.
Давайте посмотрим, как шаг за шагом создать изображение 360° с помощью ThreeJS.
Прежде всего, убедитесь, что вы установили ThreeJS и другие необходимые зависимости. Затем настройте файл HTML.
1. Настройка HTML-файла
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Environment Map with Three.js</title> <style> body { margin: 0; } canvas { display: block; } </style> </head> <body> <script src="path_to_js_file" type="module"> </script> </body> </html>
Обязательно замените источник скрипта path_to_js_file на путь к файлу JS. Также не забудьте указать тип скрипта как module, потому что мы используем модули ES6 в наших кодах JS. Теперь давайте перейдем к нашему JS-файлу.
2. Импорт элементов управления ThreeJS и Orbit в файл JS
Прежде всего импортируйте библиотеку ThreeJS. Мы также используем Orbit Controls для движения камеры на 360°. Я использую ссылку CDN для импорта элементов управления ThreeJS и Orbit.
import * as THREE from 'https://cdn.skypack.dev/[email protected]/build/three.module.js'; import { OrbitControls } from 'https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js';
3. Настройка сцены, камеры и рендера
Перспективная камера — это камера, которая вращается, обеспечивая обзор на 360°.
// Set up the scene const scene = new THREE.Scene(); // Create the camera const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 1; // Create the renderer const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);
4. Определите коэффициент демпфирования в Orbit Controls.
Включите демпфирование в Orbit Controls и определите коэффициент демпфирования. Коэффициент демпфирования в Orbit Controls играет решающую роль в плавном движении камеры. Чем ниже коэффициент демпфирования, тем выше плавность движения камеры.
// Add OrbitControls const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; // Smoothly damping effect during rotation controls.dampingFactor = 0.05;
5. Загрузка изображения скайбокса
Теперь идет основная часть. Изображение скайбокса состоит из 6 изображений. Переднее, заднее, правое, левое, верхнее и нижнее изображения окружающей среды образуют изображение скайбокса. Убедитесь, что вы сохранили эти 6 изображений как 6 разных изображений на вашем ПК.
Использование Cube Texture Loader для загрузки 6 изображений
Cube Texture Loader — это загрузчик текстур, используемый для одновременной загрузки 6 изображений. Сначала определите константу, а затем назначьте Cube Texture Loader для определенной константы.
const cubeTextureLoader = new THREE.CubeTextureLoader();
Затем укажите путь к каталогу, содержащему шесть изображений. Мои шесть изображений находятся в каталоге skybox/. Вы можете заменить его на путь к каталогу, содержащему ваши шесть изображений.
cubeTextureLoader.setPath('skybox/');
Есть порядок размещения шести изображений. Порядок размещения шести изображений: правое, левое, верхнее, нижнее, переднее и заднее.
const skyboxTexture = cubeTextureLoader.load([ 'right.jpg', 'left.jpg', 'top.jpg', 'bottom.jpg', 'front.jpg', 'back.jpg' ]);
Затем 6 загруженных изображений устанавливаются в качестве фона сцены.
scene.background = skyboxTexture;
Использование Cube Camera для рендеринга
Затем Cube Camera используется для рендеринга изображений скайбокса. Cube Camera использует WebGL Cube Render Target для рендеринга изображений скайбокса.
// Create the CubeRenderTarget const cubeRenderTarget = new THREE.WebGLCubeRenderTarget(512); const cubeCamera = new THREE.CubeCamera(1, 1000, cubeRenderTarget); scene.add(cubeCamera);
После рендеринга в сцену добавляется Cube Camera.
6. Изменение размера окна
Вы можете определить функцию для обработки изменения размера окна.
// Handle window resize window.addEventListener('resize', () => { const width = window.innerWidth; const height = window.innerHeight; renderer.setSize(width, height); camera.aspect = width / height; camera.updateProjectionMatrix(); });
7. Анимировать
Определите функцию анимации. Обязательно обновите карту окружения кубической камеры. Затем визуализируйте сцену с помощью камеры. Также не забудьте обновить элементы управления в Orbit Controls.
// Render the scene function animate() { requestAnimationFrame(animate); // Update the CubeCamera's environment map cubeCamera.update(renderer, scene); // Render the main scene renderer.render(scene, camera); controls.update(); } animate();
7. Сохраните и запустите код на локальном хосте.
Обязательно сохраните код. Затем, прежде чем запускать код с использованием локального хоста, убедитесь, что вы установили NodeJS. Если нет, установите NodeJS с Официального сайта.
Теперь откройте терминал и перейдите в каталог проекта, содержащий файл HTML. Теперь установите пакет serve с помощью приведенной ниже команды.
npm install -g serve
После завершения установки используйте приведенную ниже команду для запуска кода.
npx serve .
Теперь вы увидите что-то вроде этого:
http://localhost:5000
Скопируйте эту ссылку и вставьте ее в веб-браузер. Теперь вы сможете получить 360-градусный обзор изображения. Вы можете использовать мышь для перемещения камеры.
Надеюсь, вы узнали, как создать средство просмотра изображений 360° с помощью кубического отображения ThreeJS.
Если вы хотите узнать больше о ThreeJS, вы можете записаться на мой курс.