From 2893f20d518c94ad49cf25d47bd84ea7a9726fac Mon Sep 17 00:00:00 2001
From: Fawad Ali <m.fawaadali98@gmail.com>
Date: Sun, 15 Sep 2024 16:54:14 +0200
Subject: [PATCH] Add gif and sandbox links to README

---
 README.md | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 1896b46..ff2a13b 100644
--- a/README.md
+++ b/README.md
@@ -5,6 +5,14 @@
 
 Panorama controls for three.js.
 
+Demo: <https://ps3fsk.csb.app>
+
+<div align="center">
+  <img alt="Three Panorama Controls" title="Three Panorama Controls Example" src="https://github.com/user-attachments/assets/b6b58bb5-0d10-4d08-9c91-f156d42078a5">
+</div>
+
+## Contents
+
 - [Setup](#setup)
 - [Usage](#usage)
   - [Vanilla](#vanilla)
@@ -20,10 +28,12 @@ npm install three-panorama-controls
 
 ## Usage
 
-The package can be used both in vanilla JavaScript and with React Three Fiber. See example at [./example/index.html](./example/index.html).
+The package can be used both in vanilla JavaScript and with React Three Fiber.
 
 ### Vanilla
 
+[CodeSandbox](https://codesandbox.io/p/sandbox/4w8jwc)
+
 ```js
 import * as THREE from "three";
 import { PanoramaControls } from "three-panorama-controls";
@@ -41,8 +51,8 @@ const renderer = new THREE.WebGLRenderer();
 renderer.setSize(window.innerWidth, window.innerHeight);
 document.body.appendChild(renderer.domElement);
 
+// Setup a mesh with the panorama image applied as a texture to a sphere.
 const sphere = new THREE.SphereGeometry(10, 60, 20);
-// Specify an existing panorama image.
 const texture = new THREE.TextureLoader().load("./path/to/panorama/image.png");
 texture.colorSpace = THREE.SRGBColorSpace;
 const material = new THREE.MeshBasicMaterial({
@@ -52,6 +62,7 @@ const material = new THREE.MeshBasicMaterial({
 const mesh = new THREE.Mesh(sphere, material);
 scene.add(mesh);
 
+// Use panorama controls.
 const panoramaControls = new PanoramaControls(camera, renderer.domElement);
 
 function animate() {
@@ -64,6 +75,8 @@ animate();
 
 ### React Three Fiber
 
+[CodeSandbox](https://codesandbox.io/p/sandbox/ps3fsk)
+
 ```jsx
 import React from "react";
 import { createRoot } from "react-dom/client";
@@ -86,7 +99,7 @@ const Scene = () => {
 createRoot(document.getElementById("root")).render(
   <Canvas>
     <Scene />
-    // Use panorama controls.
+    {/* Use panorama controls. */}
     <PanoramaControls makeDefault />
   </Canvas>
 );