1+ <!DOCTYPE html>
2+ < html >
3+
4+ < head >
5+ < meta charset ="utf-8 ">
6+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 " />
7+ < title > Spark • Hello World</ title >
8+ < style >
9+ body {
10+ margin : 0 ;
11+ }
12+ </ style >
13+ </ head >
14+
15+ < body >
16+ < script type ="importmap ">
17+ {
18+ "imports" : {
19+ "three" : "/examples/js/vendor/three/build/three.module.js" ,
20+ "@sparkjsdev/spark" : "/dist/spark.module.js"
21+ }
22+ }
23+ </ script >
24+ < script type ="module ">
25+ import * as THREE from "three" ;
26+ import { OrbitControls } from "three/addons/controls/OrbitControls.js" ;
27+ import { SplatMesh , dyno } from "@sparkjsdev/spark" ;
28+ import { getAssetFileURL } from "/examples/js/get-asset-url.js" ;
29+
30+ const flyPos = new THREE . Vector3 ( 0 , 0 , - 0.5 ) ;
31+ const scene = new THREE . Scene ( ) ;
32+ const camera = new THREE . PerspectiveCamera ( 60 , window . innerWidth / window . innerHeight , 0.1 , 1000 ) ;
33+ const renderer = new THREE . WebGLRenderer ( ) ;
34+ const controls = new OrbitControls ( camera , renderer . domElement ) ;
35+ controls . target . copy ( flyPos ) ;
36+ controls . enablePan = false ;
37+ renderer . setSize ( window . innerWidth , window . innerHeight ) ;
38+ document . body . appendChild ( renderer . domElement ) ;
39+
40+ window . addEventListener ( 'resize' , onWindowResize , false ) ;
41+ function onWindowResize ( ) {
42+ camera . aspect = window . innerWidth / window . innerHeight ;
43+ camera . updateProjectionMatrix ( ) ;
44+ renderer . setSize ( window . innerWidth , window . innerHeight ) ;
45+ }
46+
47+ /*
48+ Asset: fly.spz
49+ Author: Danny Bittel (https://danybittel.ch/)
50+ License: License: CC BY 4.0
51+ Source: https://www.patreon.com/cw/DanyBittel
52+ */
53+ const splatURL = await getAssetFileURL ( "fly.spz" ) ;
54+ const fly = new SplatMesh ( { url : splatURL } ) ;
55+ const animateT = dyno . dynoFloat ( 0 ) ;
56+ fly . quaternion . set ( 1 , 0 , 0 , 0 ) ;
57+ fly . position . copy ( flyPos ) ;
58+ scene . add ( fly ) ;
59+
60+ fly . objectModifier = dyno . dynoBlock ( { gsplat : dyno . Gsplat } , { gsplat : dyno . Gsplat } , ( { gsplat } ) => {
61+ const d = new dyno . Dyno ( {
62+ inTypes : {
63+ gsplat : dyno . Gsplat ,
64+ t : "float" ,
65+ } ,
66+ outTypes : { gsplat : dyno . Gsplat } ,
67+ globals : ( ) => [
68+ dyno . unindent ( `
69+ vec3 hash(vec3 p) {
70+ return fract(sin(p*123.456)*123.456);
71+ }
72+ ` ) ,
73+ ] ,
74+ statements : ( { inputs, outputs } ) =>
75+ dyno . unindentLines ( `
76+ ${ outputs . gsplat } ${ inputs . gsplat }
77+ vec3 localPos = ${ inputs . gsplat }
78+ vec3 hashVal = hash(localPos);
79+ float startTime = hashVal.x * 100.0;
80+ float shouldOscillate = step(startTime, ${ inputs . t }
81+ float oscillation = sin(${ inputs . t }
82+ vec4 whiteColor = vec4(1.0, 1.0, 1.0, 1.0);
83+ vec3 moveDirection = normalize(vec3(
84+ 1.0,
85+ (hashVal.y - 0.5) * 0.9,
86+ (hashVal.z - 0.5) * 0.9
87+ ));
88+ float randomSpeed = fract(sin(dot(${ inputs . gsplat }
89+ float moveAmount = ${ inputs . t }
90+ ${ outputs . gsplat } ${ inputs . gsplat }
91+ ${ outputs . gsplat } ${ inputs . gsplat }
92+ mix(${ inputs . gsplat }
93+ shouldOscillate);
94+ // Slow fade out
95+ ${ outputs . gsplat }
96+ ` ) ,
97+ } ) ;
98+
99+ gsplat = d . apply ( {
100+ gsplat,
101+ t : animateT ,
102+ } ) . gsplat ;
103+
104+ return { gsplat } ;
105+ } ) ;
106+
107+
108+ let startTime = 0 ;
109+ const animate = ( time ) => {
110+ if ( startTime === 0 ) startTime = time ;
111+ const elapsedTime = ( time - startTime ) / 1000 ;
112+
113+ controls . update ( ) ;
114+ animateT . value = elapsedTime ;
115+ renderer . render ( scene , camera ) ;
116+ fly . needsUpdate = true ;
117+ } ;
118+ renderer . setAnimationLoop ( animate ) ;
119+ </ script >
120+ </ body >
121+
122+ </ html >
0 commit comments