I recently created a Panorama using the Canvas Renderer API from three.js, but I'm facing issues with broken and jagged corners during rotation. How can I ensure that my transitions and output are smooth?
Code:
panorama.html
<!doctype html>
<html>
<head>
<title>A Simple Panorama</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();
var camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
var renderer = new THREE.CanvasRenderer();
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;
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() {
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();
});
If you have any suggestions on how to achieve smooth output, please feel free to share!