Home/ Questions/Q 9013635
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T03:19:02+00:00

I have developed Panaroma using three.js Canvas Renderer API(), i observe broken and jarred

  • 0

I have developed Panaroma using three.js Canvas Renderer API(), i observe broken and jarred corners while rotating, how can i make my transition\output smooth?

enter image description here

enter image description here

Code:

panorama.html

<!doctype html>
<html>
<head>
<title>A Simple Panaroma</title>
<script src="three.js"></script>
<script src="panaroma.js"></script>
<link rel="stylesheet" href="panaroma.css"></link>
</head>
<body></body>
</html>

panaroma.css

html,body{
    margin:0px;
    padding:0px;
    border:0px;
    overflow:hidden;
    width:100%;
    height:100%;
}

panaroma.js

function Panorama() {
    var width = window.innerWidth,
        height = window.innerHeight; // Capture the width and height of window
    var scene = new THREE.Scene(); // Create a Scene
    var camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000); // Create a Camera width aspect ratio,zoomin and zoomout properties
    var renderer = new THREE.CanvasRenderer(); // Create a Canvas Renderer as we are using a canvas here
    var textureCanvas, materials, lon = 90,
        onMouseDownLon = 0,
        lat = 0,
        onMouseDownMouseX = 0,
        onMouseDownMouseY = 0,
        onMouseDownLat = 0,
        phi = 0,
        theta = 0,
        target = new THREE.Vector3(),
        isUserInteracting = false;

    //Set size of render

    renderer.setSize(width, height);


    addTextureCanvas();
    document.addEventListener('mousedown', onDocumentMouseDown, false);
    document.addEventListener('mousemove', onDocumentMouseMove, false);
    document.addEventListener('mouseup', onDocumentMouseUp, false);
    document.addEventListener('mousewheel', onDocumentMouseWheel, false);

    function addTextureCanvas() {
        //Create a Canvas Element
        textureCanvas = document.createElement('canvas');

        addMaterials();
    }

    function addMaterials() {
        materials = [



        loadTexture('http://img528.imageshack.us/img528/3751/righthf.jpg'), // Right
        loadTexture('http://img827.imageshack.us/img827/931/leftag.jpg'), // Left
        loadTexture('http://img94.imageshack.us/img94/4195/topfz.jpg'), // Top
        loadTexture('http://img856.imageshack.us/img856/1772/bottomi.jpg'), // Bottom
        loadTexture('http://img266.imageshack.us/img266/8257/backkmk.jpg'), // Back
        loadTexture('http://img189.imageshack.us/img189/3938/frontnmb.jpg') // Front


        ];
        addToScene();
    }

    function addToScene() {
        mesh = new THREE.Mesh(new THREE.CubeGeometry(100, 100, 100, 7, 7, 7), new THREE.MeshFaceMaterial(materials));
        scene.add(mesh);
        mesh.scale.x = -1.6;
        document.body.appendChild(renderer.domElement);
    }

    function loadTexture(path) {

        var texture = new THREE.Texture(textureCanvas);
        var material = new THREE.MeshBasicMaterial({
            map: texture,
            overdraw: true
        });

        var image = new Image();
        image.onload = function () {

            texture.needsUpdate = true;
            material.map.image = this;

            render();

        };
        image.src = path;

        return material;

    }

    function render() {

        lat = Math.max(-85, Math.min(85, lat));
        phi = (90 - lat) * Math.PI / 180;
        theta = lon * Math.PI / 180;

        target.x = Math.sin(phi) * Math.cos(theta);
        target.y = Math.cos(phi);
        target.z = Math.sin(phi) * Math.sin(theta);

        camera.lookAt(target);
        renderer.render(scene, camera);
    }

    function onDocumentMouseDown(event) {

        event.preventDefault();

        isUserInteracting = true;

        onPointerDownPointerX = event.clientX;
        onPointerDownPointerY = event.clientY;

        onPointerDownLon = lon;
        onPointerDownLat = lat;

    }

    function onDocumentMouseMove(event) {

        if (isUserInteracting) {

            lon = (onPointerDownPointerX - event.clientX) * 0.1 + onPointerDownLon;
            lat = (event.clientY - onPointerDownPointerY) * 0.1 + onPointerDownLat;
            render();

        }

    }

    function onDocumentMouseUp(event) {

        isUserInteracting = false;
        render();

    }

    function onDocumentMouseWheel(event) {

        camera.fov -= event.wheelDeltaY * 0.05;
        camera.updateProjectionMatrix();

        render();

    }
}

document.addEventListener("DOMContentLoaded", function () {
    new Panorama();
});

How to make output smooth? Any suggestion is highly appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Increase the divisions on your CubeGeometry.

    mesh = new THREE.Mesh( new THREE.CubeGeometry( 100, 100, 100, 16, 16, 16 ), new THREE.MeshFaceMaterial( materials ) );

    If you want to learn a lot about this issue, read this article.

    Tip: avoid this:

    mesh.scale.x = -1.6;

    Instead, keep the scale positive, and define your material like so:

    var material = new THREE.MeshBasicMaterial({
    map: texture,
    side: THREE.BackSide,
    overdraw: true
});
    • 0