Tiny planet and Crystal ball render effect | Three.js | Page 1

main saffron Nov 27, 2023, 6:23 AM

I'm currently working on a program that read a panoramic image and then simulate the “Tiny Planet” and “Crystal Ball” effects
right now, I managed to make the tiny planet (the first images) but I think it's not as good as the reference images (image 2), when I using the orbit control and zoomout to get the result as close as reference image, it clip out of the sphere
right now I have a few question:
1.can I make the program render as close to the reference image
2. how do i make the crystal ball effect ?

The code of the program
code:

import { OrbitControls } from 'OrbitControls';
var render;
var scene;
var camera;
var controls;
function animateFrame() {
    controls.update();
    render.render(scene, camera);
    requestAnimationFrame(animateFrame);
}

function main() {
    // Scene (as global var)
    scene = new THREE.Scene();
    // Camera (as global var)
    camera = new THREE.PerspectiveCamera(100, (window.innerWidth - 16) / (window.innerHeight - 16), 2, 100);
    camera.position.set(0, 0, 41);
    camera.lookAt(0,0,0);
    scene.add(camera);
    // Create a tiny planet (spherical geometry)
    const planetGeometry = new THREE.SphereGeometry(40, 32, 32);
    const textureLoader = new THREE.TextureLoader();
    const planetTexture = textureLoader.load('20230704_095421.jpg'); // Replace with your texture
    const planetMaterial = new THREE.MeshBasicMaterial({ map: planetTexture, side: THREE.DoubleSide });
    const planet = new THREE.Mesh(planetGeometry, planetMaterial);
    scene.add(planet);
    // Render (as global var)
    render = new THREE.WebGLRenderer();
    render.setClearColor(0x000000, 1);
    render.setSize(window.innerWidth - 16, window.innerHeight - 16);

    document.body.appendChild(render.domElement);
    controls = new OrbitControls(camera, render.domElement);
    controls.autoRotate = false;
    // controls.enableZoom = false;
    addEventListener("resize", () => {
        camera.aspect = (window.innerWidth - 16) / (window.innerHeight - 16);
        camera.updateProjectionMatrix();
        render.setSize(window.innerWidth - 16, window.innerHeight - 16);
    }, false);
    animateFrame();
}
main();```

coarse rampart Nov 27, 2023, 4:55 PM

For Crystal Ball, the first thing that comes to mind is to use the results of the Tiny Planet rendering as a texture map that covers somewhat more than half of a sphere, then render that sphere from a viewpoint looking straight down at the center of the map; you could get the same effect by rendering to a sprite with a fragment shader that samples the texture with the appropriate distortion but I'm too lazy to do the math on that. 😛

#Tiny planet and Crystal ball render effect