Spaces:
Running
Running
File size: 3,555 Bytes
b45829d 9a290c9 b45829d 0ebf61c 92700b7 b45829d 2b7cae5 b45829d 397f0b0 b45829d 397f0b0 f896487 b1c6cb3 397f0b0 3a93882 b45829d bc81585 b45829d 3735d23 b45829d 9a290c9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gsplat Viewer</title>
<link rel="stylesheet" href="https://bilca-visionneur-playcanva.static.hf.space/style.css">
</head>
<body>
<canvas id="application-canvas"></canvas>
<script type="module">
const rootPath = 'https://playcanvas.vercel.app';
const deviceType = "webgl2";
import * as pc from "https://cdn.skypack.dev/[email protected]";
window.pc = pc;
const canvas = document.getElementById('application-canvas');
window.focus();
const gfxOptions = {
deviceTypes: [deviceType],
glslangUrl: `${rootPath}/static/lib/glslang/glslang.js`,
twgslUrl: `${rootPath}/static/lib/twgsl/twgsl.js`,
antialias: false
};
const device = await pc.createGraphicsDevice(canvas, gfxOptions);
device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
const createOptions = new pc.AppOptions();
createOptions.graphicsDevice = device;
createOptions.mouse = new pc.Mouse(document.body);
createOptions.touch = new pc.TouchDevice(document.body);
createOptions.componentSystems = [
pc.RenderComponentSystem,
pc.CameraComponentSystem,
pc.LightComponentSystem,
pc.ScriptComponentSystem,
pc.GSplatComponentSystem
];
createOptions.resourceHandlers = [
pc.TextureHandler,
pc.ContainerHandler,
pc.ScriptHandler,
pc.GSplatHandler
];
const app = new pc.AppBase(canvas);
app.init(createOptions);
app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
app.setCanvasResolution(pc.RESOLUTION_AUTO);
app.scene.exposure = 0.8; // Increase exposure slightly (1.2 is a good start)
app.scene.toneMapping = pc.TONEMAP_ACES;
const resize = () => app.resizeCanvas();
window.addEventListener('resize', resize);
app.on('destroy', () => window.removeEventListener('resize', resize));
const assets = {
biker: new pc.Asset('gsplat', 'gsplat', { url: `https://huggingface.co/datasets/bilca/ply_files/resolve/main/tests/Statue_Long_ext_v03.ply` }),
orbit: new pc.Asset('script', 'script', { url: `https://bilca-visionneur-playcanva.static.hf.space/orbit-camera.js` })
};
const assetListLoader = new pc.AssetListLoader(Object.values(assets), app.assets);
assetListLoader.load(() => {
app.start();
const camera = new pc.Entity();
camera.addComponent('camera', {
clearColor: new pc.Color(0.2, 0.2, 0.2),
toneMapping: pc.TONEMAP_ACES
});
camera.setLocalPosition(2, 1, 1);
const biker = new pc.Entity();
biker.addComponent('gsplat', {
asset: assets.biker
});
biker.setLocalPosition(-1.5, 0.05, 0);
biker.setLocalEulerAngles(0, 90, 0);
biker.setLocalScale(0.7, 0.7, 0.7);
app.root.addChild(biker);
camera.addComponent('script');
camera.script.create('orbitCamera', {
attributes: {
inertiaFactor: 0.2,
focusEntity: biker,
distanceMax: 60,
frameOnStart: false
}
});
camera.script.create('orbitCameraInputMouse');
camera.script.create('orbitCameraInputTouch');
app.root.addChild(camera);
});
export { app };
</script>
</body>
</html>
|