Spaces VR

Sleek, powerful front-end framework for quickly creating cross-platform VR Websites.

spacesvr.io · discord

click on the examples above to view the source

Index

Quick Start
FAQ
Documentation
Examples

Quick Start

> codesandbox

Visit this code sandbox to instantly play with the package

> npm

You could set up the framework in your sleep. Just import the package

npm install spacesvr
# or
yarn add spacesvr

and copy/paste 9 lines of code

import { StandardEnvironment, Logo } from "spacesvr";

const App = () => {
  return (
    <StandardEnvironment>
      <Logo floating rotating />
    </StandardEnvironment>
  );
};

FAQ

> how does it work?

The main functionality comes from the Environment components which provide...

a controllable player with a control scheme
post processing
physics with ground plane
loading menu
pause menu

Under the hood it enables cannon physics and react-three-fiber code with a canvas. All you have to do is wrap your react-three-fiber code in an environment and you will be able to navigate your space on mobile and desktop!

> what are modifiers?

Modifiers, add functionality to any 3d component in different ways. For example, the Floating modifier will make its children steadily float up and down. Perfect for quickly adding animations to components!

<Floating height={2} speed={2}>
  <mesh>
    <sphereBufferGeometry args={[1]} />
    <meshStandardMaterial color="white" />
  </mesh>
</Floating>

Documentation

Environments

> Standard Environment

The Standard Environment defines the following:

2 unit tall player with WASD movement and pointer lock controls on desktop, joystick and drag controls on mobile
Realistic Effects with FXAA and gamma correction
Physics enabled, ground plane at y=0
Custom loading menu
Custom pause menu

<StandardEnvironment
    canvasProps={{...}} // props to be passed along to r3f's canvas
    physicsProps={{...}} // props to be passed along to cannon.js
    player={{
        pos: new Vector3(INIT_X, INIT_Y, INIT_Z),  // initial position
        rot: Math.PI / 2,  // initial rotation
    }}
    effects={RealisticEffects} // custom effects component to override default effects
/>

Components

> Arrow

An arrow icon

<Arrow dark={true} />

> Audio

A positional audio component that will play the passed in audio url.

<Audio url="https://link-to-your-audio.mp3" position={new Vector3(0, 4, 0)} />

> Background

Easily set the background color of your space

<Background color="blue" />

> HDRI

Set the scene background to an hdr file. You can find free hdr files here: https://hdrihaven.com/

<HDRI src="https://link-to-your-hdri.hdr" />

> Image

Quickly add an image to your scene

<Image
  src="https://link-to-your-image.png"
  ratio={[imageWidth, imageHeight]}
  sizeScale={1}
  framed // adds a frame
  doubleSided // removes back face of frame and creates two opposite facing images
  material={THREE.Material} // custom material for the frame
  color={THREE.Color} // color of the frame
/>

> Logo

Adds a cool Spaces Logo

<Logo
  floating // makes logo slowly float
  rotating // makes logo slowly rotate
/>

> Shop

Given Shopify credentials, will populate space with products available for sale.

<Shop
  domain="shopify-domain.myshopify.com"
  token="YOUR_SHOPIFY_STOREFRONT_ACCESS_TOKEN"
  itemSize={4} // size of the products on display
/>

> Text

A 3D text component with a default font of Myriad Pro. Custom fonts need to be converted to a json file, which can be done here: https://gero3.github.io/facetype.js/

<Text
  text="Hello Space"
  vAlign="center" // vertical align relative to the position's y component
  hAlign="center" // horizontal align relative to the position's x component
  size={1} // scale
  color="#000000" // color
  font={"https://your-font-file.json"} // default is Myriad Pro
  material={THREE.Material} // custom material to pass in
/>

> Video

Add a video file to your space with positional audio

<Video
  src="https://link-to-your-video.mp4"
  ratio={[imageWidth, imageHeight]}
  sizeScale={1}
  muted // mutes the video
  framed // adds a frame
  doubleSided // removes back face of frame and creates two opposite facing images
/>

Modifiers

> Floating

Makes its children float up and down

<Floating
  height={1} // the height it should float
  speed={1} // just eyeball it
>
  <Stuff />
</Floating>

> Interactable

Makes its children react to onclick and on hover methods

<Interactable
  onClick={() => console.log("I've been clicked!")}
  onHovered={() => console.log("I've been hovered!")}
  onUnHovered={() => console.log("I've been unhovered?")}
>
  <Stuff />
</Interactable>

Examples

These examples were made as we were building the framework so the code is outdated

IstoraMandiri / spacesvr