There are various VR panoramic house viewings, VR car viewings, VR exhibition halls, VR scenic spots... and so on on the Internet. After seeing these VR panoramic effects, I wonder how to realize them and how to make them. ? Wait a moment! What is a VR panorama? Just in case someone would ask, haha, let’s upload the picture first! Just like this!
——One-click triple link (like + bookmark + follow) and add the blogger WeChat to get the installation package and source code
Foreword:
There are several ways to achieve VR panorama effects, such as 720 cloud, four-way view... On these platforms, you can register an account and upload panorama materials to make your own panorama works. There are also some tools and software such as krpano, utovr..., krpano tools The software has a high threshold and needs to be learned and developed according to the tutorial, and ThreeJs can also be used to achieve panoramic effects. This article will mainly introduce how to use ThreeJs for VR panoramic development.
Using ThreeJs to make VR panoramas is actually very simple, shooting panoramas and web development.
1. Take a panorama
If you want to take a good, seamless and professional panorama, you will definitely need a professional panoramic photographer to shoot and draw. Professionals must use professional equipment to shoot, such as using SLR + gimbal, amateurs will definitely not be able to do it. Of course, amateurs must have amateur methods, such as using: panoramic cameras, mobile phone cameras, etc. One person can complete the shooting, and everyone can take their own panoramas.
SLR camera: A SLR camera needs to use a gimbal to shoot a panorama. It needs to take a picture at each angle, and then combine the pictures into a panorama. Finally, it may need to color, beautify, and stitch the sky map.
Panoramic camera: Panoramic camera shooting is very simple, just install the camera on a tripod and place it in the scene to be photographed, and a panorama can be taken with one click.
Mobile phone camera: How to take pictures on a mobile phone, you need to download and install Google Camera on your Android phone, select the panorama mode, and then shoot according to the prompts, and finally a panorama will be automatically calculated and generated.
2. Panoramic web development
If you don't know how to program, you can upload the captured panorama to a platform such as platform 720 cloud, look around or use the utovr tool to import the panorama and configure the parameters to generate your own panorama web page and link.
If you are a programmer and want to achieve the effect quickly, it is very simple! First go to the ThreeJs official website to pull down the panoramic case, replace the panoramic picture, and then run it. At this moment, a simple panorama web page effect is running successfully. ThreeJ official website panorama case address: three.js examples (threejs.org)
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - equirectangular panorama</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<div id="container"></div>
<script type="importmap">
{
"imports": {
"three": "../build/three.module.js"
}
}
</script>
<script type="module">
import * as THREE from 'three';
let camera, scene, renderer;
let isUserInteracting = false,
onPointerDownMouseX = 0, onPointerDownMouseY = 0,
lon = 0, onPointerDownLon = 0,
lat = 0, onPointerDownLat = 0,
phi = 0, theta = 0;
init();
animate();
function init() {
const container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
scene = new THREE.Scene();
const geometry = new THREE.SphereGeometry( 500, 60, 40 );
// invert the geometry on the x-axis so that all of the faces point inward
geometry.scale( - 1, 1, 1 );
const texture = new THREE.TextureLoader().load( 'textures/2294472375_24a3b8ef46_o.jpg' );
const material = new THREE.MeshBasicMaterial( { map: texture } );
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
container.style.touchAction = 'none';
container.addEventListener( 'pointerdown', onPointerDown );
document.addEventListener( 'wheel', onDocumentMouseWheel );
//
document.addEventListener( 'dragover', function ( event ) {
event.preventDefault();
event.dataTransfer.dropEffect = 'copy';
} );
document.addEventListener( 'dragenter', function () {
document.body.style.opacity = 0.5;
} );
document.addEventListener( 'dragleave', function () {
document.body.style.opacity = 1;
} );
document.addEventListener( 'drop', function ( event ) {
event.preventDefault();
const reader = new FileReader();
reader.addEventListener( 'load', function ( event ) {
material.map.image.src = event.target.result;
material.map.needsUpdate = true;
} );
reader.readAsDataURL( event.dataTransfer.files[ 0 ] );
document.body.style.opacity = 1;
} );
//
window.addEventListener( 'resize', onWindowResize );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onPointerDown( event ) {
if ( event.isPrimary === false ) return;
isUserInteracting = true;
onPointerDownMouseX = event.clientX;
onPointerDownMouseY = event.clientY;
onPointerDownLon = lon;
onPointerDownLat = lat;
document.addEventListener( 'pointermove', onPointerMove );
document.addEventListener( 'pointerup', onPointerUp );
}
function onPointerMove( event ) {
if ( event.isPrimary === false ) return;
lon = ( onPointerDownMouseX - event.clientX ) * 0.1 + onPointerDownLon;
lat = ( event.clientY - onPointerDownMouseY ) * 0.1 + onPointerDownLat;
}
function onPointerUp() {
if ( event.isPrimary === false ) return;
isUserInteracting = false;
document.removeEventListener( 'pointermove', onPointerMove );
document.removeEventListener( 'pointerup', onPointerUp );
}
function onDocumentMouseWheel( event ) {
const fov = camera.fov + event.deltaY * 0.05;
camera.fov = THREE.MathUtils.clamp( fov, 10, 75 );
camera.updateProjectionMatrix();
}
function animate() {
requestAnimationFrame( animate );
update();
}
function update() {
if ( isUserInteracting === false ) {
lon += 0.1;
}
lat = Math.max( - 85, Math.min( 85, lat ) );
phi = THREE.MathUtils.degToRad( 90 - lat );
theta = THREE.MathUtils.degToRad( lon );
const x = 500 * Math.sin( phi ) * Math.cos( theta );
const y = 500 * Math.cos( phi );
const z = 500 * Math.sin( phi ) * Math.sin( theta );
camera.lookAt( x, y, z );
renderer.render( scene, camera );
}
</script>
</body>
</html>
This article mainly describes how to take panoramas and make your own panorama webpage, and realize a simple VR panorama effect, which is definitely not so simple in actual needs. Such as opening animation, asteroid entry, adding hotspots, hotspot events (opening links, preview pictures, models, videos, graphics), scene switching, viewing angle switching, local texture update and other advanced effects.
Advanced effects will continue to be updated in the future.