Spaces VR
Sleek, powerful front-end framework for quickly creating cross-platform VR Websites.
muse.place · discord · we are hiring!
click on the examples above to view the source
Index

Quick Start
codesandbox
Visit the codesandbox to instantly play with the package
https://codesandbox.io/s/e9w29
Starter Repo
Clone the starter repo to give yourself a solid starting point
https://github.com/spacesvr/spacesvr-starter
npm
You could set up the framework in your sleep. Just import the package
npm install spacesvr
yarn add spacesvr
and copy/paste 9 lines of code
import { StandardEnvironment, Logo } from "spacesvr";
const App = () => {
return (
<StandardEnvironment>
<Logo floating rotating />
</StandardEnvironment>
);
};
Guide
the environment component.
The main functionality comes from the Environment
components which provide variations of...
- a player with a control scheme
- physics
- default components
- 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!
the useEnvironment Hook.
The useEnvironment
hook is your direct access to the environment state. It can be used anywhere
inside an Environment
component and gives you an EnvironmentState
, defined as:
{
paused: boolean;
setPaused: (p: boolean, overlay?: string) => void;
overlay: string | null;
device: { xr: boolean; mobile: boolean; desktop: boolean; }
containerRef: MutableRefObject<HTMLDivElement | null>;
}
the usePlayer Hook.
The usePlayer
hook is your direct access to the player state. It can be used anywhere
inside an Environment
component and gives you an PlayerState
, defined as:
{
position: PlayerVec;
velocity: PlayerVec;
controls: PlayerControls;
raycaster: THREE.Raycaster;
}
simulation.
Your worlds can now run in a simulation! To enable it you can run a
server out of examples/server/app.js
and pass the corresponding parameters as simulationProps
to the
StandardEnvironment
component. This is a work in progress!
{
signalHost?: string;
signalPort?: number;
signalPath?: string;
socketServer?: string;
frequency?: number;
}
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
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
- Physics enabled, ground plane at y=0
- Custom loading menu
- Custom pause menu
<StandardEnvironment
canvasProps={{...}}
physicsProps={{...}}
playerProps={{
pos: [INIT_X, INIT_Y, INIT_Z],
rot: 0,
speed: 3.2
}}
disableGround={false}
simulationProps={{...}}
/>
Ideas
Arrow
An arrow icon
<Arrow dark={true} />
Audio
A positional audio component that will play the passed in audio url. Handles media playback rules for Safari, iOS, etc.
<Audio
url="https://link-to-your-audio.mp3"
position={[0, 4, 0]}
volume={1}
rollOff={1}
dCone={new Vector3(coneInnerAngle, coneOuterAngle, coneOuterGain)}
/>
Background
Easily set the background color of your space
<Background color="blue" />
Fog
Add fog to your scene. Required rather than attaching to parent since direct parent is <Physics />
<Fog color="blue" near={10} far={100} />
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"
hideBackground={false}
/>
Image
Quickly add an image to your scene
<Image
src="https://link-to-your-image.png"
size={1}
framed
transparent
material={THREE.Material}
/>
Logo
Adds a cool Spaces Logo
<Logo
floating
rotating
/>
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/. Note: this is
expensive, so if you want a lot of text look at Drei's Text component, extended from
Troika-3d-Text.
<Text
text="Hello Space"
vAlign="center"
hAlign="center"
size={1}
color="#000000"
font={"https://your-font-file.json"}
material={THREE.Material}
/>
Video
Add a video file to your space with positional audio. Handles media playback rules for Safari, iOS, etc.
<Video
src="https://link-to-your-video.mp4"
size={1}
volume={1}
muted
framed
material={THREE.Material}
/>
Modifiers
FacePlayer
Makes its children face the player
<FacePlayer
lockX={false}
lockY={false}
lockZ={false}
>
<Stuff />
</FacePlayer>
Floating
Makes its children float up and down
<Floating
height={1}
speed={1}
>
<Stuff />
</Floating>
Interactable
Makes its children react to onclick and on hover methods
<Interactable
onClick={() => console.log("Ive been clicked!")}
onHovered={() => console.log("Ive been hovered!")}
onUnHovered={() => console.log("Ive been unhovered?")}
>
<Stuff />
</Interactable>
Spinning
Makes its children spin
<Spinning
xSpeed={0}
ySpeed={1}
zSpeed={0}
>
<Stuff />
</Spinning>
Tool
Puts its children in the player's field of view at all times. Think of it as a toolbelt.
<Tool
pos={[0, 0]}
face={true}
distance={1}
pinY={false}
>
<Stuff />
</Tool>
Examples
These examples were made as we were building the framework so the code is outdated