With the update and iteration of Three.js, it is no longer difficult to realize VR panoramic viewing on Web (PC and mobile phone). Let’s see how React works. The author uses the latest version three.js-v0.120.1 and combines React and Next-js development, which can be better combined with production projects.

Online renderings are available on BOTH PC and mobile phone, or scan the QR code below the mobile phone code.

There are a few articles about Web VR viewing on the Web, but most of them don’t run directly or apply directly to projects for some reason. For example, some versions of three. js are older, and some are introduced in HTML by CDN.

Requirements analysis and disassembly

  • ReactThe development environment
  • Three.jsThe plug-in
  • VRThe checking

The development environment

Project initialization

  • Next.js

Quick construction project with Next. Js scaffolding:

–example blog-starter-typescript Specifies the project template, the full template address

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

The installationThree.js

The three. Js package is an old version and has been deprecated. You need to install Three

npm i three
Copy the code

Code implementation

Above we have prepared the development environment and installed the dependencies. Next is the focus, to achieve VR panoramic house viewing.

A panoramic view

The panorama is that we bid farewell to the form of traditional 2D plane pictures, and place the observer in it with 3D effect to achieve an effect similar to that in it.

  • Advantages: Immersive, more realistic effect, better effect.
  • Disadvantages: material preparation, development are more difficult.

Material preparation

The 3D effect is actually the three-dimensional effect. A cube has six faces. Suppose we are in a room deep inside, and we paste photos on all six faces of the room.

Therefore, we choose a cube and paste photos of the six faces of the room on the six faces of the cube. Then we imagine that we are in the cube. At this time, we turn around or raise our head or lower our heads in the cube to see the panoramic effect.

Let’s go to the code to implement:

Three.jsCore knowledge points to know

To create a 3D world with three. js, we can understand it as shooting a stage play, which requires stage-scene, camera, director-renderer, task-mesh and light source.

  • scenarioscene: Can be understood as the stage, everything needs to be put on the stage before shooting.
  • The camera (camera) : It’s the equivalent of a camera or the human eye, which records everything.
  • The renderer (renderer) : Equivalent to the director or controller, all the instructions need to be controlled by him.
  • Grid (mesh) : In computers, the 3D world is made up of points, innumerable surfaces spliced together into objects of various shapes. This model is called a grid model. A line is made up of two points, a surface is made up of three points, and an object is made up of more than three points.
  • The light source (light) : No light can not see anything, add light source can see the effect.

Coding

  1. Create a scene –Scene
import * as THREE from 'three';

scene = new THREE.Scene();
Copy the code
  1. Create camera –Camera

A camera is equivalent to a human eye. Only with a camera can you see all objects and light sources in the scene. Common cameras are orthogonal cameras and perspective cameras

  • An orthogonal camera is a rectangular viewable area in which objects are visible and rendered to the same size regardless of distance or proximity to the camera. General application scenarios are 2.5D games such as Jump jump, mechanical models

  • Perspective cameras are the most common type of camera that simulate the vision of the human eye, large near and small (perspective). Fov stands for perspective, and the bigger the Fov, the bigger your eyes open, and the farther away you are, the more you see. If you need to simulate reality, you use this camera

// Create camera
const w = window.innerWidth
const h = window.innerHeight
  
camera = new THREE.PerspectiveCamera(75, w / h, 0.1.1000); // Perspective camera

camera.position.set(0, -0.0); // Set the camera position
camera.lookPoint = {}; / / observation points
camera.lookPoint.x = 0;
camera.lookPoint.y = 0;
camera.lookPoint.z = -1;

camera.lookAt(camera.lookPoint.x, camera.lookPoint.y, camera.lookPoint.z);
Copy the code
  1. Create renderer –Renderer
// Create renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize(w, h);
app.appendChild(renderer.domElement);
Copy the code
  1. Create grid –Mesh

The mesh is composed of geometry and material

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

// Cube texture
const textureLoader = new THREE.CubeTextureLoader().setPath(baseUrl); 

const arr = ['f.jpg'.'b.jpg'.'u.jpg'.'d.jpg'.'l.jpg'.'r.jpg']; // 6 texture maps are placed in the order of front, back, top, bottom, left and right of the cube
const texture = textureLoader.load(arr); / / the new API

/ / geometry
const geometry = new THREE.BoxGeometry(50.50.50); 

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

// Create a grid
const cube = new THREE.Mesh(geometry, material); 

cube.position.set(-0, -0, -0);
scene.add(cube); // Add scene

Copy the code
  1. Create the light source
/ / the ambient light
const ambient = new THREE.AmbientLight(0xffffff);
scene.add(ambient);
Copy the code
  1. Camera position and orientation calculation
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);
};
Copy the code
  1. Animation rendering function

Use requestAnimationFrame to achieve animation effects.

  • You can openGPURendering speed
  • Render without lag
const animate = () = > {
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
  update();
};
Copy the code
  1. Handle mouse or finger interactions

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;
};
Copy the code

conclusion

In fact, from the amount of code, it is not complicated to use three.js to realize Web VR panoramic house viewing in React. The key is to have certain three-dimensional thinking.

For more information about the use of three.js and next.js, please refer to the official website documents.

Program source code

The complete project code has been published on Github, easy to debug and run:

Github.com/AlexShan200…