Function run

examples/interactive-ripples/main.js:95–154

()

}

async function run() {
  // Time and hitpoint uniforms for dyno shader
  const timeUniform = dyno.dynoFloat(0.0);
  const hitpointUniform = dyno.dynoVec3(new THREE.Vector3(0, 0, 1000)); // Initialize far away to avoid initial effect

  // Load valley.spz
  const splatURL = await getAssetFileURL("valley.spz");
  const valley = new SplatMesh({ url: splatURL });
  await valley.initialized;

  // Fix orientation - rotate 180 degrees around X axis
  valley.rotateX(Math.PI);

  // Apply dyno shader with time and hitpoint uniforms
  valley.objectModifier = passthroughDyno(timeUniform, hitpointUniform);
  valley.updateGenerator();

  scene.add(valley);

  // Raycaster for click detection
  const raycaster = new THREE.Raycaster();
  raycaster.params.Points = { threshold: 1.0 }; // Increased threshold for better hit detection

  // Simple time counter that resets on click
  let timeCounter = 0;

  // Click event listener to set hitpoint and reset time
  renderer.domElement.addEventListener("pointerdown", (event) => {
    const rect = renderer.domElement.getBoundingClientRect();
    const ndc = new THREE.Vector2(
      ((event.clientX - rect.left) / rect.width) * 2 - 1,
      -((event.clientY - rect.top) / rect.height) * 2 + 1,
    );
    raycaster.setFromCamera(ndc, camera);
    const hits = raycaster.intersectObject(valley, false);
    const hit = hits?.length ? hits[0] : null;

    if (!hit) {
      return;
    }

    const localPoint = valley.worldToLocal(hit.point.clone());
    // Don't invert Y or Z - keep original coordinates

    hitpointUniform.value.copy(localPoint);
    timeCounter = 0; // Reset time counter
  });

  renderer.setAnimationLoop((timeMs) => {
    // Increment time counter each frame
    timeCounter += 0.016; // ~60fps increment
    timeUniform.value = timeCounter;

    // Update dyno uniforms to propagate to the mesh each frame
    valley.updateVersion();

    controls.update(camera);
    renderer.render(scene, camera);