Реализация панорамного просмотра Web VR с помощью Three.js в React

WebVR
Реализация панорамного просмотра Web VR с помощью Three.js в React

вместе сThree.jsРеализовать панорамный просмотр VR в Интернете больше не сложно (с поддержкой ПК и мобильных телефонов). Далее приступимReactпрактиковаться. Автор использует последнюю версиюThree.js - v0.120.1и объединитьReactа такжеNext.jsРазработка может быть лучше интегрирована с производственными проектами.

Онлайн-рендерингМожно использовать как ПК, так и мобильный телефон, или мобильный телефон может сканировать QR-код под кодом.

VR 看房 Demo

Хотя в сети естьWeb VRОднако большинство статей по тем или иным причинам не могут быть запущены напрямую или не могут быть напрямую применены к проекту. Например: некоторыеThree.jsВерсия относительно старая, и некоторые из них находятся вHTMLПредставлено через CDNThree.js.

Анализ спроса и демонтаж

  • Reactсреда разработки
  • Three.jsплагин
  • VRпросмотр дома

среда разработки

Инициализация проекта

  • Next.js

использоватьNext.jsСтроительный проект строительных лесов:

--example blog-starter-typescriptуказать шаблон проекта,полный адрес шаблона

npx create-next-app --example blog-starter-typescript vr-demo
cd vr-demo

УстановитьThree.js

three.jsПакет старой версии и заброшен, всем нужно его установитьthree

npm i three

Код

Выше мы подготовили среду разработки и установили соответствующие зависимости. Следующим пунктом является осознаниеVRПанорамные просмотры.

панорамный

Причина создания панорамы в том, что мы прощаемся с традиционной двухмерной плоской формой изображения и используем трехмерный эффект, чтобы поместить в нее наблюдателя для достижения подобного эффекта.

  • Преимущества: Захватывающий, более реалистичный и лучший.
  • Недостатки: Подготовка материалов и разработка сложны.

подготовка материала

3D-эффект на самом деле трехмерный эффект, квадратное тело имеет 6 граней, предположим, мы углубляем комнату глубоко, помещаем 6 граней комнаты с фотографиями, так что мы находимся в комнате, это фактически прикреплено к каждой фотографии стены.

Поэтому выбираем куб, а затем наклеиваем фотографии соответствующие 6 граням комнаты на 6 граней куба, а потом представляем, что мы в кубе.В это время, когда мы в кубе поворачиваемся, или посмотрите вверх или поклонитесь, мы увидим эффект панорамы.

Далее реализуем это в коде:

Three.jsОсновные знания указывают на то, что нужно знать

использоватьThree.jsсоздавать3dМир, который мы можем понять как съемку спектакля, требует сцены-сцены (scene),камера(camera), режиссер-рендерер (renderer), Сетка задач (mesh) и источник света -(light).

  • Сценыscene: Это можно понимать как сцену.Все нужно поставить на сцену перед съемкой.
  • камера(camera): Эквивалент камеры или человеческого глаза, он может записывать все.
  • Рендерер(renderer): Эквивалентно директору или контроллеру, все команды должны контролироваться им.
  • сетка(mesh): В компьютере 3D-мир состоит из точек, а бесчисленные лица склеены в объекты различной формы. Эта модель называется моделью сетки. Линия состоит из двух точек, поверхность состоит из трех точек, а объект состоит из нескольких поверхностей, состоящих из трех точек.
  • источник света(light): Вы ничего не увидите без света, и вы можете увидеть эффект, добавив источник света.

Coding

  1. Создать сцену -Scene 
import * as THREE from 'three';

scene = new THREE.Scene();
  1. Создать камеру -Camera

Камера эквивалентна человеческому глазу, только с камерой можно увидеть все объекты и источники света в сцене. Обычно используемые камеры - это ортогональные камеры и перспективные камеры.

  • Орфографическая камера представляет собой прямоугольную область просмотра, и объекты видны только в пределах этой области.Объекты визуализируются в одном размере независимо от того, насколько далеко или близко находится камера. Общий сценарий применения — 2.5d игры, такие как прыжки, механические модели

  • Перспективные камеры являются наиболее часто используемыми типами камер, имитирующих зрение человеческого глаза, вблизи большого и дальнего малого (перспектива). Fov представляет собой угол зрения.Чем больше Fov, тем шире глаза, чем дальше они находятся и тем больше они могут видеть. Если вам нужно имитировать реальность, в основном используйте эту камеру

// 创建相机
const w = window.innerWidth
const h = window.innerHeight
  
camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 1000); // 透视相机

camera.position.set(0, -0, 0); // 设置相机位置
camera.lookPoint = {}; // 观察点
camera.lookPoint.x = 0;
camera.lookPoint.y = 0;
camera.lookPoint.z = -1;

camera.lookAt(camera.lookPoint.x, camera.lookPoint.y, camera.lookPoint.z);
  1. Создать визуализатор -Renderer 
// 创造渲染器
renderer = new THREE.WebGLRenderer();
renderer.setSize(w, h);
app.appendChild(renderer.domElement);
  1. Создать сетку -Mesh

Сетка (mesh) по геометрии (geometry) и материальный (material) составляют

const baseUrl = '/static/images/vr/';

// 立方纹理
const textureLoader = new THREE.CubeTextureLoader().setPath(baseUrl); 

const arr = ['f.jpg', 'b.jpg', 'u.jpg', 'd.jpg', 'l.jpg', 'r.jpg']; // 6张纹理图依次贴在立方体的前、后、上、下、左、右的顺序放置的
const texture = textureLoader.load(arr); // 新版API

// 几何体
const geometry = new THREE.BoxGeometry(50, 50, 50); 

// 材质
const material = new THREE.MeshPhongMaterial({
  envMap: texture,
  side: THREE.DoubleSide,
});

// 创建网格
const cube = new THREE.Mesh(geometry, material); 

cube.position.set(-0, -0, -0);
scene.add(cube); // 加入场景
  1. Создайте источник света
//环境光
const ambient = new THREE.AmbientLight(0xffffff);
scene.add(ambient);
  1. Расчет положения и ориентации камеры
const update = () => {
  lat = Math.max(-85, Math.min(85, lat));
  phi = THREE.Math.degToRad(90 - lat);
  theta = THREE.Math.degToRad(lon);

  target.x = 500 * Math.sin(phi) * Math.cos(theta);
  target.y = 500 * Math.cos(phi);
  target.z = 500 * Math.sin(phi) * Math.sin(theta);

  camera.lookAt(target);

  renderer.render(scene, camera);
};
  1. функция рендеринга анимации

использоватьrequestAnimationFrameРеализовать эффект анимации, преимущества:

  • можно включитьGPUУскорение рендеринга
  • Рендеринг без задержек
const animate = () => {
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
  update();
};
  1. Обработка взаимодействия с мышью или пальцем

const handleTouchStart = (e) => {
  e.preventDefault();

  interactiveFlag = true;

  startX = e.touches[0].pageX;
  startY = e.touches[0].pageY;
  startLon = lon;
  startLat = lat;
};

const handleTouchMove = (e) => {
  e.preventDefault();
  lon = (startX - e.touches[0].pageX) * 0.2 + startLon;
  lat = (e.touches[0].pageY - startY) * 0.2 + startLat;
  update();
};

const handleTouchEnd = (e) => {
  e.preventDefault();

  interactiveFlag = false;
};

Суммировать

На самом деле, с точки зрения количества кода, вreactкитайское использованиеThree.jsвыполнитьWeb VRПанорамный просмотр не сложен, главное иметь определенное трехмерное мышление.

болееThree.jsа такжеNext.jsДля использования, пожалуйста, обратитесь к официальной документации веб-сайта,

Исходный код проекта

Полный код проекта опубликован на github для отладки и запуска всеми желающими:

GitHub.com/Han200 Алекса…

Категории