Studio Niantic: Create 360 image from a high-resolution photo?

🧑‍💻 Technical Support
,
1

Hi everyone,
Can I create a 360 image from a high-resolution photo on 8thWall Studio?

2

This feature isn’t built into 8th Wall, however there are online tools to do this for you. Check out this one I found.

1 Like
3

Is it possible to embed three.js into studio to apply?. I tried asking GPT chat and got this reply

  1. Prepare a panorama image:
  • Ensure the image has a horizontal aspect ratio significantly larger than the vertical (e.g., 2:1 or similar) for the best effect.
  1. Set up the display environment:
  • Use a canvas or a library like Three.js to create a 3D scene.
  1. Map the image onto a sphere:
  • Apply the panorama image as a texture on a spherical geometry, allowing the user to rotate or move around it to achieve a 360-degree effect.
  1. Implement interaction controls:
  • Add mouse or touch controls to rotate the camera around the sphere.

Below is a basic implementation using Three.js:

// Import Three.js (use CDN or npm package)
import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.module.js';

// Initialize scene, camera, and renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Load the panorama texture
const textureLoader = new THREE.TextureLoader();
textureLoader.load('path/to/your/panorama.jpg', (texture) => {
    // Create a sphere geometry and apply the texture
    const geometry = new THREE.SphereGeometry(500, 60, 40);
    const material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.BackSide });
    const sphere = new THREE.Mesh(geometry, material);

    // Add the sphere to the scene
    scene.add(sphere);
});

// Place the camera inside the sphere
camera.position.set(0, 0, 0);

// Handle camera rotation
let isDragging = false;
let previousMousePosition = { x: 0, y: 0 };

document.addEventListener('mousedown', () => (isDragging = true));
document.addEventListener('mouseup', () => (isDragging = false));
document.addEventListener('mousemove', (event) => {
    if (!isDragging) return;

    const deltaMove = {
        x: event.offsetX - previousMousePosition.x,
        y: event.offsetY - previousMousePosition.y
    };

    sphere.rotation.y += deltaMove.x * 0.005;
    sphere.rotation.x += deltaMove.y * 0.005;

    previousMousePosition = { x: event.offsetX, y: event.offsetY };
});

// Render loop
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

Key Explanations:

  1. SphereGeometry:
  • Creates a large sphere where the texture is applied. The option side: THREE.BackSide ensures the camera views the inside of the sphere.
  1. TextureLoader:
  • Loads the panorama image and applies it as a texture to the sphere.
  1. Mouse Events:
  • Handles mouse dragging to rotate the camera and interact with the 360-degree environment.