Without really elaborating on this and going into too much detail, thanks to the online 3-D tool Spline, it is now possible to import Gaussian Splat scenes into a 3D environment. From there, you can apply all the magic and power of Spline to the splat. You can add and modify objects, insert gravity, apply bounce boxes,... in short, anything you think is possible to obtain an interactive 3D environment. The quality of the overall splat reduces drastically, though.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spline test</title>
<script type="module" src="https://unpkg.com/@splinetool/viewer/build/spline-viewer.js"></script>
<style>
body, html {
height: 200%;
margin: 0;
overflow-y: scroll;
}
spline-viewer {
width: 100%;
height: 100vh;
display: block;
position: fixed;
}
</style>
</head>
<body>
<spline-viewer id="splineViewer" url="https://lab.idphotoagency.com/t/scene.splinecode"></spline-viewer>
<script>
document.addEventListener('DOMContentLoaded', () => {
const viewer = document.getElementById('splineViewer');
const initialPosition = { x: -0.38, y: 1.93, z: 0.13 };
const finalPosition = { x: -0.55, y: 0.08, z: 0.35 };
const maxScroll = document.documentElement.scrollHeight - window.innerHeight;
viewer.addEventListener('load', () => {
const camera = viewer.getCamera(); // Correct method to get the camera
window.addEventListener('scroll', () => {
const scrollTop = window.scrollY;
const scrollFraction = scrollTop / maxScroll;
const newX = initialPosition.x + (finalPosition.x - initialPosition.x) * scrollFraction;
const newY = initialPosition.y + (finalPosition.y - initialPosition.y) * scrollFraction;
const newZ = initialPosition.z + (finalPosition.z - initialPosition.z) * scrollFraction;
camera.position.set(newX, newY, newZ);
});
});
});
</script>
</body>
</html>
"The photographer is the Swiss Army knife of the visual content industry, versatile and indispensable, crafting moments into timeless stories."