Skip to content

Commit

Permalink
Update SkyBoxViewerWebApp.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@Hax0rgurl
Hax0rgurl authored Aug 18, 2024
1 parent 58fe447 commit 12e75c9
Showing 1 changed file with 105 additions and 108 deletions.
213 changes: 105 additions & 108 deletions docs/SkyBoxViewerWebApp.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,29 +105,26 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
let camera, scene, renderer, mesh;
let zoomLevel = 1;
let isAutoRotating = false;
let autoRotateSpeed = 0.002;
const defaultFOV = 75;
let texture;

const sphereRadius = 500;
let isUserInteracting = false;
let onPointerDownMouseX = 0, onPointerDownMouseY = 0;
let lon = 0, onPointerDownLon = 0;
let lat = 0, onPointerDownLat = 0;
let phi = 0, theta = 0;

function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera = new THREE.PerspectiveCamera(defaultFOV, window.innerWidth / window.innerHeight, 0.1, 1000);

renderer = new THREE.WebGLRenderer();
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('viewer').appendChild(renderer.domElement);

scene.background = new THREE.Color(0xf0f0f0);
camera.position.set(0, 0, 50);

// Add a placeholder cube
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// Event listeners
document.getElementById('zoom-in').addEventListener('click', zoomIn);
document.getElementById('zoom-out').addEventListener('click', zoomOut);
Expand All @@ -150,6 +147,7 @@
viewer.addEventListener('touchstart', onPointerDown);
viewer.addEventListener('touchmove', onPointerMove);
viewer.addEventListener('touchend', onPointerUp);
viewer.addEventListener('wheel', onMouseWheel);

// Device orientation
if (window.DeviceOrientationEvent) {
Expand All @@ -164,90 +162,18 @@
function animate() {
requestAnimationFrame(animate);
if (isAutoRotating) {
camera.rotateY(autoRotateSpeed);
lon += autoRotateSpeed;
}
updateCameraRotation();
renderer.render(scene, camera);
}

function zoomIn() {
zoomLevel *= 1.1;
camera.position.z = 50 / zoomLevel;
}

function zoomOut() {
zoomLevel /= 1.1;
camera.position.z = 50 / zoomLevel;
}

function recordDepthMap() {
const input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
input.onchange = e => {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = function(event) {
const img = new Image();
img.onload = function() {
const depthMap = createDepthMap(img);
createMeshFromDepthMap(depthMap, img.width, img.height);
}
img.src = event.target.result;
}
reader.readAsDataURL(file);
}
input.click();
}

function createDepthMap(img) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const depthMap = new Float32Array(imageData.width * imageData.height);

for (let i = 0; i < imageData.data.length; i += 4) {
const brightness = (imageData.data[i] + imageData.data[i+1] + imageData.data[i+2]) / 3;
depthMap[i/4] = brightness / 255;
}

return depthMap;
}

function createMeshFromDepthMap(depthMap, width, height) {
const geometry = new THREE.PlaneGeometry(width / 50, height / 50, width - 1, height - 1);
const vertices = geometry.attributes.position.array;

for (let i = 0, j = 2; i < depthMap.length; i++, j += 3) {
vertices[j] = depthMap[i] * 2; // Exaggerate depth for visibility
}

geometry.computeVertexNormals();

const material = new THREE.MeshPhongMaterial({
color: 0xcccccc,
wireframe: false,
side: THREE.DoubleSide,
});

if (mesh) scene.remove(mesh);
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// Add lighting
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 0, 1).normalize();
scene.add(light);
}

function loadTexture(url) {
new THREE.TextureLoader().load(url, (loadedTexture) => {
texture = loadedTexture;
texture.mapping = THREE.EquirectangularReflectionMapping;

const geometry = new THREE.SphereGeometry(100, 60, 40);
const geometry = new THREE.SphereGeometry(sphereRadius, 60, 40);
geometry.scale(-1, 1, 1);

const material = new THREE.MeshBasicMaterial({map: texture});
Expand Down Expand Up @@ -275,22 +201,15 @@
}

function resetView() {
camera.position.set(0, 0, 0);
camera.rotation.set(0, 0, 0);
camera.fov = defaultFOV;
camera.updateProjectionMatrix();
lon = 0;
lat = 0;
updateCameraRotation();
}

let isUserInteracting = false;
let onPointerDownMouseX = 0, onPointerDownMouseY = 0;
let lon = 0, onPointerDownLon = 0;
let lat = 0, onPointerDownLat = 0;
let phi = 0, theta = 0;

function onPointerDown(event) {
isUserInteracting = true;
const clientX = event.clientX || event.touches[0].clientX;
const clientY = event.clientY || event.touches[0].clientY;
const clientX = event.clientX || (event.touches && event.touches[0].clientX);
const clientY = event.clientY || (event.touches && event.touches[0].clientY);
onPointerDownMouseX = clientX;
onPointerDownMouseY = clientY;
onPointerDownLon = lon;
Expand All @@ -299,28 +218,33 @@

function onPointerMove(event) {
if (isUserInteracting) {
const clientX = event.clientX || event.touches[0].clientX;
const clientY = event.clientY || event.touches[0].clientY;
const clientX = event.clientX || (event.touches && event.touches[0].clientX);
const clientY = event.clientY || (event.touches && event.touches[0].clientY);
lon = (onPointerDownMouseX - clientX) * 0.1 + onPointerDownLon;
lat = (clientY - onPointerDownMouseY) * 0.1 + onPointerDownLat;
updateCameraRotation();
}
}

function onPointerUp() {
isUserInteracting = false;
}

function onMouseWheel(event) {
const fov = camera.fov + event.deltaY * 0.05;
camera.fov = THREE.MathUtils.clamp(fov, 10, 75);
camera.updateProjectionMatrix();
}

function updateCameraRotation() {
lat = Math.max(-85, Math.min(85, lat));
phi = THREE.MathUtils.degToRad(90 - lat);
theta = THREE.MathUtils.degToRad(lon);
camera.target = new THREE.Vector3(
500 * Math.sin(phi) * Math.cos(theta),
500 * Math.cos(phi),
500 * Math.sin(phi) * Math.sin(theta)
);
camera.lookAt(camera.target);

camera.position.x = sphereRadius * Math.sin(phi) * Math.cos(theta);
camera.position.y = sphereRadius * Math.cos(phi);
camera.position.z = sphereRadius * Math.sin(phi) * Math.sin(theta);

camera.lookAt(scene.position);
}

function handleFileUpload(event) {
Expand Down Expand Up @@ -374,6 +298,79 @@
}
}

function zoomIn() {
camera.fov = Math.max(camera.fov - 5, 10);
camera.updateProjectionMatrix();
}

function zoomOut() {
camera.fov = Math.min(camera.fov + 5, 75);
camera.updateProjectionMatrix();
}

function recordDepthMap() {
const input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
input.onchange = e => {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = function(event) {
const img = new Image();
img.onload = function() {
const depthMap = createDepthMap(img);
createMeshFromDepthMap(depthMap, img.width, img.height);
}
img.src = event.target.result;
}
reader.readAsDataURL(file);
}
input.click();
}

function createDepthMap(img) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const depthMap = new Float32Array(imageData.width * imageData.height);

for (let i = 0; i < imageData.data.length; i += 4) {
const brightness = (imageData.data[i] + imageData.data[i+1] + imageData.data[i+2]) / 3;
depthMap[i/4] = brightness / 255;
}

return depthMap;
}

function createMeshFromDepthMap(depthMap, width, height) {
const geometry = new THREE.PlaneGeometry(width / 50, height / 50, width - 1, height - 1);
const vertices = geometry.attributes.position.array;

for (let i = 0, j = 2; i < depthMap.length; i++, j += 3) {
vertices[j] = depthMap[i] * 2; // Exaggerate depth for visibility
}

geometry.computeVertexNormals();

const material = new THREE.MeshPhongMaterial({
color: 0xcccccc,
wireframe: false,
side: THREE.DoubleSide,
});

if (mesh) scene.remove(mesh);
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// Add lighting
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 0, 1).normalize();
scene.add(light);
}

init();
</script>
</body>
Expand Down

0 comments on commit 12e75c9

Please sign in to comment.