Skip to content

Commit

Permalink
Add gif and sandbox links to README
Browse files Browse the repository at this point in the history
  • Loading branch information
9inpachi committed Sep 15, 2024
1 parent e6f2885 commit 2893f20
Showing 1 changed file with 16 additions and 3 deletions.
19 changes: 16 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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";
Expand All @@ -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({
Expand All @@ -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() {
Expand All @@ -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";
Expand All @@ -86,7 +99,7 @@ const Scene = () => {
createRoot(document.getElementById("root")).render(
<Canvas>
<Scene />
// Use panorama controls.
{/* Use panorama controls. */}
<PanoramaControls makeDefault />
</Canvas>
);
Expand Down

0 comments on commit 2893f20

Please sign in to comment.