Проецирование изображения скайбокса для создания изображения 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, вы можете записаться на мой курс.