Pxlnav NPM | npm.io

pxlNav v0.0.27

Javascript Player Controller & Environment Manager for Three.js

Visit the pxlNav Documentation

Since the docs are still being written, If you have any questions / feedback, feel free to join the pxlNav Support discord group.

Visit procstack.github.io site to see camera location switching action.

Index

Install Files

./dist/pxlNav.esm.js - JS Module file
./dist/pxlNavStyle.min.css - CSS Style for things like Loading bar, Shader Editor, and more
./dist/pxlNavLoader_basic.js - Basic implementation of pxlNav; import, set options, and build.
./examples/pxlNavLoader_switchSpace.js - Basic implementation of a external trigger to swap room environments
./dist/libs/three/... - Some changes needed to be made to the FBXLoader.js file, please include the libs folder along side pxlNav.esm.js to run pxlNav

CJS & UMD versions needs testing, see ./builds for these versions. Please bare with me while I work out any NPM packaging issues.

The Good Bits

Wanna see example rooms using 3d fbx files? procstack.github.io Rooms

For pxlNav Documentation - pxlNav Documentation

For pxlNav changes between versions - pxlNav Change Log

pxlNav dev entry point is - ./src/pxlNav.js

Intention

pxlNav is an interactive layer built on top of Three.js' render engine. Creating a framework which understands FBX files created with object tags set in Maya or Blender or Name your CGI program here. Turning your 3d modeling software into a level editor for Three.js It's basically a game engine for Three.js

^ Top

In-Browser / Javascript Features

FPV Camera Control on PC & Mobile Navigation using W,A,S,D or Arrow Keys _ Easily load any FBX file for a pxlRoom (Scene / Level) or Objects *FBXs are 3d scene files you can make in most CGI programs; like Maya or Blender

Animation Rig & Clip Files are easily managed A simple Animation State Machine to set the next Clip *Once the current animation clip finishes, set what the animating Rig/Object does next. Loop the clip infinitely, play a specific clip after, or pick a random clip from an array you set in javascript.

Pre-made Particle Effects or customize the particle system through Shaders *Pre-made particle effects - Billowing smoke, fire embers, floating environment dust, & snow with floor collider Motion Blur, Chromatic Aberrations, multiple Anti-Aliasing options, & more premade Post-Processes ( Off by default, available through this.pxlEnv ) _ OpenGL ES Shader Editor *Hit Y in browser to open the Shader Editor with regex enabled Keyboard Shortcuts for easier editing

Subscribe to Callback events & run Triggers to listen or control pxlNav from outside of pxlNav. *You can subscribe & trigger your own custom events & code for your pxlRoom as well Easily assign custom materials (like OpenGL ES Shaders) to objects in your FBX when the file loads. *Your object will be listed under the Shader Editor's Edit Shader pulldown. -- this refers to your pxlRoom's Javascript object in code

^ Top

Features added through your CGI program of choice

Camera Position & Aim initial locations and named locations you can warp to. Auto Camera Rails *Animated Camera Paths for Position, Look At, & Up for animation sequencing (Open Geometry or Nurb Curve)

Instanced geometry *Instance individually to Locator/Null Objects; or in mass to every Vertex in an object Glowing Objects Item Pickups Jump Pads

Point-to-Point Warp Pads ( Teleporters / Portals ) *Link a Collision Surface to a target Transform to move the user to once they step on the surface. Point-to-Room Warp Pads *Move between other pxlRooms like changing game levels ( separate FBX files & javascript )

_ Ground Collider Objects *Floor terrain, things to jump on top of, floors of a building, and Walls to limit user movement. 'Walls' being lack of a collider object under the player, preventing the users from walking off the ground. This gives an easy way to lock the user's camera due to environmental design, Like, if there was no collider under a named Camera Position, then warp to that location for a still camera shot.

Clickable Objects to run javascript functions Scriptable Objects *Access these objects by their name in your pxlRoom's javascript code; this.geoList[*Your_Object_Name*] -- this refers to your pxlRoom's Javascript object in code

^ Top

Shader Editor Keyboard Shortcuts

Browser default Copy, Cut, Paste, Undo, Redo, etc. Enter - New lines use the existing indent type (Spaces or Tabs) Ctrl + Enter - Update Shader on Material Ctrl + D - Duplicate current line Ctrl + K - Comment current/selected lines Ctrl + Shift + K - Uncomment current/selected lines Ctrl + NumPad {1,2,3} - Add selection or '.0' into float(), vec2(), vec3() Select myVar & Ctrl+3 -> vec3(myVar) No Selection & Ctrl+2 -> vec2(.0, .0) Ctrl + {Up,Down,Left,Right} - Quick search Searches for your current selection in that direction _ Click off the editor -or- hit Y - To Open / Close the Shader Editor

^ Top

Work-in-Progress Features

Third person control is not easily available, access it through this.pxlCamera No movement controls on Mobile yet *Mobile will use your Camera Position & Aim locators in your FBX file *If you add an Auto Camera Rail, it'll use that by default and loop the camera on the found Curve object

_ Networking as mostly been removed for safety concerns - Avatars, WebCam Video Streaming, & Mic Audio, but it can be implemented through pxlNav Extensions *Enable specific extensions with pxlNav.initExtension("Networking", *Your_Extension_Loaded_Callback*) *The default socket messages for Stream Elements is currently set up in ./src/pxlNav/extensions/Networking.js

_ Music & Video streams have no Callbacks & Triggers yet. They can be enabled from your pxlRoom, but they will be converted into 'Extensions' soon, this.pxlEnv.pxlAudio & this.pxlEnv.pxlVideo *Music can be streamed in through a .m3u link online *Video can be streamed most video bridge relays with accessable URLs, like Amazon Web Services' IVS generated stream URLs. The video feed can be assigned to a material/shader like any other texture map in Three.js *Music & Video streams will attempt to reconnect automatically if a feed drops. Prioritizing any Audio found in Video Streams as the primary Audio Source to play in pxlNav. This means you can have a constant Music stream playing over the internet, Then interupt that Music feed by starting a Video Stream to your target video streaming service. -- this refers to your pxlRoom's Javascript object in code