First Window

Welcome to the first real window of SpatialJS! This is a simple window that will help you get started with SpatialJS.

Prerequisites

Basic knowledge of React and JavaScript
Node.js and npm installed on your system
React

Projects to be Firmilar

Installation

Install SpatialJS Core and its peer dependencies:

npm install @spatialjs/core react @react-three/fiber three @react-three/uikit

Quick Start

Add the WindowManager to your scene

import { WindowManager, createWindow } from "@spatialjs/core";
<WindowManager />

Creating your first Window UI using UI KIT

import { Container, Text } from "@react-three/uikit";
 
const MyWindow = () => {
  return (
    <Container>
            <Text>Hello World</Text>
    </Container>
  )
}

Add a Window to your scene

import { createWindow } from "@spatialjs/core";
const window = createWindow(MyWindow, {
  title: "My Window",
});

Now that you have created your first window you should have some basic knowledge of how windows are made. Otherwise the interior content of the window can be anything you want to include. A typical usecase would be to add the window on first load of the app. Here is an example of that.

Add Window on App Load

const App = () => {
  useEffect(() => {
    createWindow(HelloWorld, {
      id: 'hello-world', // optional - if not provided, a unique id will be generated
      title: 'Hello, World!', // optional - if not provided, the component name will be used
      position: [0, 0, -5], // optional - if not provided, the window will be created at the center of the scene
    });
  }, []);
 return (
  <>
    <WindowManager />
  </>
 )
}

Read through our Responsive Design section to understand responsive windows.

These are the basic of creating your first window. Next you can review how to do more advanced things with the windows.

Features of Windows you may need:

Set the Props of the React Component for the Window - props: {album: album}
Disable Background of the main part of the window - disableBackground: true
Disable the Titlebar - disableTitleBar: true
Disable the Action Buttons - disableActionBtns: true
Set an Icon for the Window - icon: "/spotify.png"

These are just a few of the options you might need. To look at advanced usages, check out the sections on WindowStore and Advanced Features.

Getting Started Examples