Immersive (VR) controls for Three.js

Overview

Three.js Immersive Controls

  • Immersive (VR) functionality
    • Movement and rotation with VR controllers (move with left thumbstick, rotate with right thumbstick)
    • Object selection with VR controllers (A button or trigger)
  • Browser window functionality
    • Movement and rotation with keyboard (WASD and arrow keys)
    • Object selection with mouse

Installation

npm install @depasquale/three-immersive-controls

Usage

import ImmersiveControls from '@depasquale/three-immersive-controls';

// Create the `camera`, `renderer`, and `scene` instances with Three.js
// ...

const controls = new ImmersiveControls(camera, renderer, scene, { /* options */ });

Include this in the render loop:

controls.update();

Options

  • initialPosition: THREE.Vector3
    • The player's initial position in the scene. Default is new THREE.Vector3(0, 1.6, 4).
  • lookAt: THREE.Vector3
    • Point toward which the player is initially oriented. (Not yet implemented.)
  • floor: number | false
    • number (default is 0): Sets the y position of a floor below which the player cannot pass (simple solution for collision detection instead of navmeshes).
    • false: No limit to the player's movement along the y-axis is set.
  • gravity: true | false
    • true (default): The player's movement is restricted to the x- and z-axes, and the y position remains at the floor setting.
    • false: The player can also move vertically along the y-axis (flight mode).
  • moveSpeed: { keyboard: number, vr: number }
    • Speed at which the player moves through the scene when input is received from the keyboard or VR controllers. Default is { vr: 2.5, keyboard: 5 }.
  • rotateSpeed: number
    • Speed at which the player is rotated when input is received from the keyboard or VR controllers. Default is 1.
  • tumble: true | false
    • Allow the player to rotate on the x-axis in addition to the y-axis. Default is false.
  • showControllerModel: true | false
    • Show the VR controllers in immersive mode. Default is true.
  • showEnterVRButton: true | false
    • Add a button to the DOM to allow the user to enter immersive mode when this functionality is supported. Default is true.
  • showExitVRButton: true | false
    • Display a button in front of the player in the scene which allows the user to exit immersive mode. Default is true.
  • vrControls: true | false
    • Activate immersive (VR) controls. Default is true.
  • keyboardControls: true | false
    • Activate keyboard controls. Default is true.
  • mouseControls: true | false
    • Activate mouse controls. Default is true. (Movement with mouse input has not yet been implemented, but object selection with the mouse works.)
  • showFps: true | false
    • Display the Stats indicator in the DOM and in front of the player in the scene to monitor performance. Default is false.

Examples

Examples are provided in the examples directory. To try them locally in your browser, run:

npm run examples

Or try them here.

Known bugs

  • In Three.js r130, a bug was introduced that interferes with the XR Camera's local matrix calculation. This affects the position of the "Exit VR" button and the camera's position after exiting immersive mode. A fix has been approved and will hopefully be merged soon. For now, the examples are using a patched version of Three.js.

To do

  • Add collision detection with navmeshes
  • Test with a variety of VR devices (so far only tested with Oculus Quest 2)
  • Handle situations when only one VR controller is available
  • Add controls for touchscreen devices
  • Better repositioning of "Exit VR" button in scene
  • Possible additional features
    • Teleportation
    • Blinders during rotation and movement
    • Movement with mouse input
    • Hand tracking
You might also like...

Flappy Bird is an arcade-style game in which the player controls the bird Faby, which moves persistently to the right

Flappy Bird is an arcade-style game in which the player controls the bird Faby, which moves persistently to the right

Flappy Bird is an arcade-style game in which the player controls the bird Faby, which moves persistently to the right. The player is tasked with navigating Faby through pairs of pipes that have equally sized gaps placed at random heights. Faby automatically descends and only ascends when the player taps the touchscreen.

Aug 16, 2022

Exposes theming options available in Joy UI by providing color palette and typography controls.

Joy Theme Creator Note: Joy UI is currently in alpha - some things may not be finished or working as expected. This project exposes the theming option

Dec 28, 2022

Adding volumetric effects to a built-in Three.js shader.

Adding volumetric effects to a built-in Three.js shader.

Magical Marbles in Three.js Adding volumetric effects to a built-in Three.js shader. Article on Codrops Demo Installation Install dependencies: yarn

Dec 9, 2022

Interactive 3D plotting with a simple function call using Three.js

Interactive 3D plotting with a simple function call using Three.js

About Generate interactive 3d plots with a simple function call. Function returns a Three.js scene which can be customized as needed. Basic function c

Oct 20, 2022

Animated sprite hook for react-three-fiber

use-animated-sprite Animated sprite hook for react-three-fiber Dependencies npm install @react-three/drei @react-three/fiber react three Installation

Dec 4, 2022

Simple Three js game project

Simple Three js game project

Simple Game This is a simple game developed with three.js library. Usage To run the game, we must start a web server with the command "python -m http.

Jun 22, 2022

A growing three.js helper library.

A growing three.js helper library.

kokomi.js A growing three.js helper library. Install npm i kokomi.js Hello world With just several lines, you can make a most basic 3D scene :d index.

Dec 30, 2022

A MERN Stack dapp the utilizes three solidity contracts

A MERN Stack dapp the utilizes three solidity contracts. It verifies user ownership of third party NFTs, generates an image incorporating a third party NFT image pulled from IPFS, mints a new NFT for users that includes an on-chain message and metadata to Opensea standards.

Jun 30, 2022

Element for displaying HTML based on THREE.js HTMLMesh

Element for displaying HTML based on THREE.js HTMLMesh

AFrame-HTML a-entity html="#my-interface" position="0 1.5 -0.5"/a-entity Display an interactive HTML element in the scene. html-pointer component

Jan 3, 2023
Comments
  • WARNING: Multiple instances of Three.js being imported.

    WARNING: Multiple instances of Three.js being imported.

    Hi! First off, thanks for this. I was able to set up controls for VR in just a few minutes. One thing I did notice with my project, along with the demos listed in the README.md of this repo, was that I was getting this error in the console.

    WARNING: Multiple instances of Three.js being imported.

    I'm running a fairly basic scene on macOS 12.4 with node v14.17.3 if it matters. Thanks!

    opened by brianyuen 1
  • Cannot reproduce example

    Cannot reproduce example

    Thank you for your great package! I am trying to implement your controllers in a vr package, but I can't get it to work. In the non-vr example I can interact nicely with the components (see here and you can click on the white cylinders to change them with the mouse). In the VR version, however, it appears no events are being fired and there is no interaction happening at all. I'm using an Oculus Quest 2. Any advice would be greatly appreciated!

    Using the latest version of threejs (r143) I can get the above interaction with the mouse, but using either the latest r144, or your version of r144, I cant get either the mouse of the VR interaction to work at all.

    opened by benjym 0
Releases(0.0.14)
Owner
Anthony DePasquale
• Decentralized social media • VR • Generative art • Machine learning • Data science • Copy editing • Translation
Anthony DePasquale
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
A easy-to-use framework for building immersive decentralized applications

A easy-to-use framework for building immersive decentralized applications

Sonr 624 Dec 27, 2022
deadsimple immersive navigation: a single-player-verse component

AFRAME-verse, deadsimple immersive navigation A single-player-verse component for AFRAME: TRY THE ONLINE DEMO ❤️ easily teleport between aframe apps &

Coder of Salvation / Leon van Kammen 11 Nov 29, 2022
Open source software from Lifecast Inc for immersive volumetric VR videos and photos.

Lifecast Inc. Open Source Lifecast makes software for immersive volumetric VR videos and photos. Lifecast's 6DOF format for 3D photos and videos can b

Forrest Briggs 15 Jan 1, 2023
three.js examples. if you are first in learning three.js , this will give you much help.

three-projected-material Three.js Material which lets you do Texture Projection on a 3d Model. Installation After having installed three.js, install i

null 22 Nov 2, 2022
Text Engraving & Extrusion demo based on Three.js is implemented with Typescript and webpack5. Used THREE-CSGMesh as the core tech to achieve engraving and extrusion results

Text Engraving & Extrusion Text Engraving & Extrusion demo is implemented using Three.js, with Typescript and webpack5. Used THREE-CSGMesh as the core

Jiahong Li 3 Oct 12, 2022
Access the Nintendo Switch Online and Nintendo Switch Parental Controls app APIs.

Access the Nintendo Switch Online and Nintendo Switch Parental Controls app APIs. Includes Discord Rich Presence, friend notifications and data downloads.

Samuel Elliott 201 Jan 6, 2023
A jQuery plugin to make your form controls look how you want them to. Now with HTML-5 attributes!

(jQuery) Uniform A jQuery plugin to make your form controls look how you want them to. Now with HTML-5 attributes! Works well with jQuery 1.6+, but we

Audith Softworks 2.2k Jan 2, 2023
Cross platform UI controls for progressive web and hybrid apps (plain JS, jQuery, Angular and React)

Mobiscroll What is Mobiscroll? Mobiscroll is a UI library for progressive webapps and hybrid development. Created with a lot of attention to usability

Mobiscroll 1.5k Dec 31, 2022