mirror of
https://github.com/storytold/spark.git
synced 2026-10-09 00:09:53 +00:00
Add example for SOGS compression
This commit is contained in:
Diego Marcos Segura
+104
-100
@@ -1,31 +1,7 @@
|
||||
{
|
||||
"robot-head.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/robot-head.spz",
|
||||
"directory": "splats"
|
||||
},
|
||||
"forge.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/forge.spz",
|
||||
"directory": "splats"
|
||||
},
|
||||
"butterfly-wings-closed.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/butterfly-wings-closed.spz",
|
||||
"directory": "splats"
|
||||
},
|
||||
"butterfly.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/butterfly.spz",
|
||||
"directory": "splats"
|
||||
},
|
||||
"butterfly-ai.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/butterfly-ai.spz",
|
||||
"directory": "splats"
|
||||
},
|
||||
"fireplace.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/fireplace.spz",
|
||||
"directory": "splats"
|
||||
},
|
||||
"snow-street.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/snow-street.spz",
|
||||
"directory": "splats"
|
||||
"arrow.glb": {
|
||||
"url": "https://sparkjs.dev/assets/models/arrow.glb",
|
||||
"directory": "models"
|
||||
},
|
||||
"branzino-amarin.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/food/branzino-amarin.spz",
|
||||
@@ -35,6 +11,26 @@
|
||||
"url": "https://sparkjs.dev/assets/splats/food/burger-from-amboy.spz",
|
||||
"directory": "splats/food"
|
||||
},
|
||||
"butterfly.png": {
|
||||
"url": "https://sparkjs.dev/assets/images/butterfly.png",
|
||||
"directory": "images"
|
||||
},
|
||||
"butterfly.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/butterfly.spz",
|
||||
"directory": "splats"
|
||||
},
|
||||
"butterfly-ai.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/butterfly-ai.spz",
|
||||
"directory": "splats"
|
||||
},
|
||||
"butterfly-wings-closed.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/butterfly-wings-closed.spz",
|
||||
"directory": "splats"
|
||||
},
|
||||
"cat.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/cat.spz",
|
||||
"directory": "splats"
|
||||
},
|
||||
"clams-and-caviar-by-ikoyi.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/food/clams-and-caviar-by-ikoyi.spz",
|
||||
"directory": "splats/food"
|
||||
@@ -43,74 +39,6 @@
|
||||
"url": "https://sparkjs.dev/assets/splats/food/coral-caviar.spz",
|
||||
"directory": "splats/food"
|
||||
},
|
||||
"double-double-from-InNOut.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/food/double-Double-from-InNOut.spz",
|
||||
"directory": "splats/food"
|
||||
},
|
||||
"gyro.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/food/gyro.spz",
|
||||
"directory": "splats/food"
|
||||
},
|
||||
"iberico-sandwich-by-reserve.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/food/iberico-sandwich-by-reserve.spz",
|
||||
"directory": "splats/food"
|
||||
},
|
||||
"primerib-tamos.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/food/primerib-tamos.spz",
|
||||
"directory": "splats/food"
|
||||
},
|
||||
"steaksandwich-mels.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/food/steaksandwich-mels.spz",
|
||||
"directory": "splats/food"
|
||||
},
|
||||
"pad-thai.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/food/pad-thai.spz",
|
||||
"directory": "splats/food"
|
||||
},
|
||||
"tomahawk-niku.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/food/tomahawk-niku.spz",
|
||||
"directory": "splats/food"
|
||||
},
|
||||
"rubberduck.glb": {
|
||||
"url": "https://sparkjs.dev/assets/models/rubberduck.glb",
|
||||
"directory": "models"
|
||||
},
|
||||
"table.glb": {
|
||||
"url": "https://sparkjs.dev/assets/models/table.glb",
|
||||
"directory": "models"
|
||||
},
|
||||
"butterfly.png": {
|
||||
"url": "https://sparkjs.dev/assets/images/butterfly.png",
|
||||
"directory": "images"
|
||||
},
|
||||
"sky.jpeg": {
|
||||
"url": "https://sparkjs.dev/assets/images/sky.jpeg",
|
||||
"directory": "images"
|
||||
},
|
||||
"furry-logo-pedestal.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/furry-logo-pedestal.spz",
|
||||
"directory": "splats"
|
||||
},
|
||||
"cat.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/cat.spz",
|
||||
"directory": "splats"
|
||||
},
|
||||
"dessert.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/dessert.spz",
|
||||
"directory": "splats"
|
||||
},
|
||||
"penguin.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/penguin.spz",
|
||||
"directory": "splats"
|
||||
},
|
||||
"woobles.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/woobles.spz",
|
||||
"directory": "splats"
|
||||
},
|
||||
"arrow.glb": {
|
||||
"url": "https://sparkjs.dev/assets/models/arrow.glb",
|
||||
"directory": "models"
|
||||
},
|
||||
"dali-env.glb": {
|
||||
"url": "https://sparkjs.dev/assets/models/dali-env.glb",
|
||||
"directory": "models"
|
||||
@@ -119,16 +47,92 @@
|
||||
"url": "https://sparkjs.dev/assets/models/dali-table.glb",
|
||||
"directory": "models"
|
||||
},
|
||||
"valley.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/valley.spz",
|
||||
"dessert.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/dessert.spz",
|
||||
"directory": "splats"
|
||||
},
|
||||
"double-double-from-InNOut.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/food/double-Double-from-InNOut.spz",
|
||||
"directory": "splats/food"
|
||||
},
|
||||
"fireplace.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/fireplace.spz",
|
||||
"directory": "splats"
|
||||
},
|
||||
"forge.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/forge.spz",
|
||||
"directory": "splats"
|
||||
},
|
||||
"furry-logo-pedestal.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/furry-logo-pedestal.spz",
|
||||
"directory": "splats"
|
||||
},
|
||||
"gyro.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/food/gyro.spz",
|
||||
"directory": "splats/food"
|
||||
},
|
||||
"heart.png": {
|
||||
"url": "https://sparkjs.dev/assets/images/heart.png",
|
||||
"directory": "images"
|
||||
},
|
||||
"iberico-sandwich-by-reserve.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/food/iberico-sandwich-by-reserve.spz",
|
||||
"directory": "splats/food"
|
||||
},
|
||||
"pad-thai.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/food/pad-thai.spz",
|
||||
"directory": "splats/food"
|
||||
},
|
||||
"penguin.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/penguin.spz",
|
||||
"directory": "splats"
|
||||
},
|
||||
"primerib-tamos.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/food/primerib-tamos.spz",
|
||||
"directory": "splats/food"
|
||||
},
|
||||
"robot-head.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/robot-head.spz",
|
||||
"directory": "splats"
|
||||
},
|
||||
"rubberduck.glb": {
|
||||
"url": "https://sparkjs.dev/assets/models/rubberduck.glb",
|
||||
"directory": "models"
|
||||
},
|
||||
"sky.jpeg": {
|
||||
"url": "https://sparkjs.dev/assets/images/sky.jpeg",
|
||||
"directory": "images"
|
||||
},
|
||||
"snow-street.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/snow-street.spz",
|
||||
"directory": "splats"
|
||||
},
|
||||
"star.png": {
|
||||
"url": "https://sparkjs.dev/assets/images/star.png",
|
||||
"directory": "images"
|
||||
},
|
||||
"heart.png": {
|
||||
"url": "https://sparkjs.dev/assets/images/heart.png",
|
||||
"directory": "images"
|
||||
"steaksandwich-mels.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/food/steaksandwich-mels.spz",
|
||||
"directory": "splats/food"
|
||||
},
|
||||
"sutro.zip": {
|
||||
"url": "https://sparkjs.dev/assets/splats/sutro.zip",
|
||||
"directory": "splats"
|
||||
},
|
||||
"table.glb": {
|
||||
"url": "https://sparkjs.dev/assets/models/table.glb",
|
||||
"directory": "models"
|
||||
},
|
||||
"tomahawk-niku.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/food/tomahawk-niku.spz",
|
||||
"directory": "splats/food"
|
||||
},
|
||||
"valley.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/valley.spz",
|
||||
"directory": "splats"
|
||||
},
|
||||
"woobles.spz": {
|
||||
"url": "https://sparkjs.dev/assets/splats/woobles.spz",
|
||||
"directory": "splats"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Spark • SOGS</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"three": "/examples/js/vendor/three/build/three.module.js",
|
||||
"@sparkjsdev/spark": "/dist/spark.module.js"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script type="module">
|
||||
import * as THREE from "three";
|
||||
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
||||
import { Sky } from 'three/addons/objects/Sky.js';
|
||||
import { SplatMesh, SparkRenderer } from "@sparkjsdev/spark";
|
||||
import { getAssetFileURL } from "/examples/js/get-asset-url.js";
|
||||
|
||||
const scene = new THREE.Scene();
|
||||
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||
camera.position.set(0, 1.5, -1.2);
|
||||
|
||||
|
||||
const renderer = new THREE.WebGLRenderer();
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
document.body.appendChild(renderer.domElement);
|
||||
|
||||
const splatURL = await getAssetFileURL("sutro.zip");
|
||||
const botanical = new SplatMesh({ url: splatURL });
|
||||
botanical.quaternion.set(1, 0, 0, 0);
|
||||
scene.add(botanical);
|
||||
|
||||
const sky = new Sky();
|
||||
sky.scale.setScalar(450000);
|
||||
const phi = THREE.MathUtils.degToRad(20);
|
||||
const theta = THREE.MathUtils.degToRad(90);
|
||||
const sunPosition = new THREE.Vector3().setFromSphericalCoords(1, phi, theta);
|
||||
sky.material.uniforms.sunPosition.value = sunPosition;
|
||||
scene.add( sky );
|
||||
|
||||
const controls = new OrbitControls(camera, renderer.domElement);
|
||||
controls.target.set(0, 1.5, 0);
|
||||
controls.minDistance = 1.0;
|
||||
controls.maxDistance = 8.0;
|
||||
controls.enablePan = false;
|
||||
|
||||
renderer.setAnimationLoop(function animate(time) {
|
||||
controls.update(camera);
|
||||
renderer.render(scene, camera);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user