Experience Image in an inverted carousel or Virtual Reality/Spherical environment

My goal is to create a virtual reality experience similar to this:

https://i.sstatic.net/8pZx0.png

However, my background image is 4096x1024 and I want it to have a VR effect where the center appears further away from the screen and the edges are slightly stretched and closer.

I've been using aframes to set my image as the background of an <a-sky> tag, which warps the image into a sphere with the camera positioned in the center. While this achieves the desired effect, I believe there may be more efficient solutions available. I also plan to add text that mimics the behavior of the warped image.

Here's a demonstration of what I've accomplished using Aframes: Gif on Imgur

I prefer not to enable movement around the scene/screen (with AWDS), but instead allow horizontal movement of the screen so that users can interact with elements by navigating left or right, resembling a carousel effect as shown in the gif.

Answer №1

Explain the term "lighter". If you want to avoid relying on A-Frame, which is based on WebVR and three.js, you can create your own panorama using three.js. There is already an example demonstrating how to do this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.js"></script>
<!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">
<style>
body {
background-color: #000000;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px; width: 100%;
color: #ffffff;
padding: 5px;
font-family:Monospace;
font-size:13px;
font-weight: bold;
text-align:center;
}
a {
color: #ffffff;
}
</style>
</head>
<body>

<div id="container"></div>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js webgl</a> - equirectangular panorama demo. photo by <a href="http://www.flickr.com/photos/jonragnarsson/2294472375/" target="_blank" rel="noopener">Jón Ragnarsson</a>.<br />
drag equirectangular texture into the page.
</div>

<script>
var camera, scene, renderer;
var isUserInteracting = false,
onMouseDownMouseX = 0, onMouseDownMouseY = 0,
lon = 0, onMouseDownLon = 0,
lat = 0, onMouseDownLat = 0,
phi = 0, theta = 0;
init();
animate();
function init() {
var container, mesh;
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
camera.target = new THREE.Vector3( 0, 0, 0 );
scene = new THREE.Scene();
var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
// invert the geometry on the x-axis so that all of the faces point inward
geometry.scale( - 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( {
map: new THREE.TextureLoader().load( 'https://farm4.staticflickr.com/3289/2294472375_24a3b8ef46_o.jpg' )
} );
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 );
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
document.addEventListener( 'wheel', onDocumentMouseWheel, false );
//
document.addEventListener( 'dragover', function ( event ) {
event.preventDefault();
event.dataTransfer.dropEffect = 'copy';
}, false );
document.addEventListener( 'dragenter', function ( event ) {
document.body.style.opacity = 0.5;
}, false );
document.addEventListener( 'dragleave', function ( event ) {
document.body.style.opacity = 1;
}, false );
document.addEventListener( 'drop', function ( event ) {
event.preventDefault();
var reader = new FileReader();
reader.addEventListener( 'load', function ( event ) {
material.map.image.src = event.target.result;
material.map.needsUpdate = true;
}, false );
reader.readAsDataURL( event.dataTransfer.files[ 0 ] );
document.body.style.opacity = 1;
}, false );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseDown( event ) {
event.preventDefault();
isUserInteracting = true;
onMouseDownMouseX = event.clientX;
onMouseDownMouseY = event.clientY;
onMouseDownLon = lon;
onMouseDownLat = lat;
}
function onDocumentMouseMove( event ) {
if ( isUserInteracting === true ) {
lon = ( onMouseDownMouseX - event.clientX ) * 0.1 + onMouseDownLon;
lat = ( event.clientY - onMouseDownMouseY ) * 0.1 + onMouseDownLat;
}
}
function onDocumentMouseUp( event ) {
isUserInteracting = false;
}
function onDocumentMouseWheel( event ) {
var fov = camera.fov + event.deltaY * 0.05;
camera.fov = THREE.Math.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.Math.degToRad( 90 - lat );
theta = THREE.Math.degToRad( lon );
camera.target.x = 500 * Math.sin( phi ) * Math.cos( theta );
//camera.target.y = 500 * Math.cos( phi ); // comment this to disable Y axis
camera.target.z = 500 * Math.sin( phi ) * Math.sin( theta );
camera.lookAt( camera.target );
/*
// distortion
camera.position.copy( camera.target ).negate();
*/
renderer.render( scene, camera );
}
</script>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to replace CSS classes created using makeStyles

To clarify, my development environment is using MUI version 4.12.3. Inside file A, I have a simplified code snippet for a functional component, along with the usage of makeStyles to style a JSX element within the return statement (not displayed here). Ever ...

I am struggling to make php redirect work using onclick() function

My PHP button is not redirecting properly. Assuming the page destination is correct, is there anything else that could be causing this issue? echo "<button id=\"create\" onclick=\"location.href('/team/teams.php?op=create');&bso ...

Connecting Django pages

Currently in the process of building a python application using Django web framework. This app allows users to log in and create personal goals, which are then stored in a database for easy access. However, I'm encountering some challenges when trying ...

Using Bootstrap SCSS in ReactJS without applying Bootstrap CSS classes

After successfully installing bootstrap using the following command: npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9bbb6b6adaaadabb8a999edf7e9f7e9f4b8b5a9b1b8f7ef">[email protected]</a> --save my d ...

Tips for Customizing the StrongLoop LoopBack Explorer CSS

Our team is currently utilizing Strongloop's LoopBack framework for our REST APIs and we are looking to customize the CSS of the LoopBack Explorer. Unfortunately, it seems unclear which CSS files are being employed (LoopBack vs Swagger) and their exac ...

Upon clicking the link, my hover function was disabled

Hey everyone, I'm running into an issue on my website where a button is not working as expected. Initially, when I clicked the home page button, it changed the background color like I wanted. However, when I tried clicking it again, the background col ...

Creating an Excel spreadsheet from an HTML table with compatibility across different web browsers

Does anyone know of a JavaScript function that can save an HTML table as an Excel file, meeting the criteria of being A. Developed in pure JavaScript and B. Compatible with browsers as far back as IE8? I've dedicated 2 full days to finding a solution ...

There seems to be a JSON syntax error on the website for tracking Covid-

Hi everyone, I'm currently working on a Covid-19 tracker website and facing an issue that says: 'SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data' ; Being new to web development, I am unsure about what&apo ...

ReactJS incorporates multiple CSS files

I am currently working on developing a Single Page Application using ReactJS. However, I am facing an issue with styling. Currently, I have created 3 different pages (with the intention of adding more in the future), each having its own CSS file that is im ...

Discovering the differences between input values in HTML when using scripts

I have a code snippet here for an HTML project. The code includes an input field for username and password. I am looking to compare the user's input with a specific value using JavaScript. My question is, what code should be included in the button cli ...

Unable to successfully submit a request for login information using an AJAX call

I need to capture the user ID and password entered by the user and send it to the Server. Here is the Javascript code I am using: <script> function Display(){ var ID = document.getElementById("user_id").value; document.getEl ...

Using JQuery to delete an item by clicking on the delete button and then clicking on the item to remove it

I am currently using jQuery to dynamically create items on an HTML canvas for users to drag around and create drawings in a style similar to Microsoft Visio. However, I am struggling with how to remove these items once they have been created. While I know ...

Displaying the division of shares in an HTML table using jQuery to add a new row

I recently worked on transposing a table, adding classes and ids to specific HTML tags, and converting numbers with commas into integers. Now, I am attempting to calculate the percentage share and display it in a new row. Here is the original table for re ...

Modifying the Collapse Direction of Navigation in Bootstrap 4

Is it possible to change the collapse direction of the Bootstrap 4 navbar from 'top to bottom' to 'right to left'? Here is the code snippet I am currently using: <nav class="navbar navbar-light bg-faded"> <button class="na ...

undefined reference to $

I'm currently working on a JavaScript project that involves using key events to display alphabets on the screen. However, I've encountered an error and need some assistance. <!DOCTYPE html> <html lang="en"> <head> <met ...

Building a Dynamic Checkbox Validation Feature in Angular Using Data retrieved from an API

Currently, I have a function that retrieves and displays a list obtained from an API: displayEventTicketDetails() { this.Service .getEventTicketDetails().subscribe((data: any) => { this.eventTicketDetails = data.map(ticket => ticket. ...

What could be causing this code to malfunction on jsfiddle?

Why doesn't this code from W3schools work on jsfiddle? I tried to implement it here: https://jsfiddle.net/u6qdfw5f/ <!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial ...

BufferGeometry in three.js not displaying as expected

This is my first question for a project using three.js. I hope it's not too simple, as I have already done some research without success so far. I am currently creating a Line2 and need to control the thickness of the line. Initially, I followed this ...

Having difficulty with printing a particular div

I need help with printing a specific div containing checkboxes using jQuery. The checkboxes are initially checked based on data from a database, but when I try to print the div, the checkboxes remain unchecked in the print view. Below is the code snippet ...

CSS - Utilize floating divs to dynamically populate empty spaces

I am currently working on creating a grid layout on my website, . Despite using multiple divs (images) with the float: left; property, I am noticing empty spaces and gaps that are not being filled by the floating divs. Thank you in advance for any assist ...