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.
If you'd like to roam around a coastal environment,
vvv visit procstack.github.io/Outlet.htm vvv
- Install Files
- Quick Links
- Intention For pxlNav
- In-Browser / Javascript Features
- 3d Scene File Features
- Shader Editor Keyboard Shortcuts
- In-Progress Features
./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 thelibsfolder along sidepxlNav.esm.jsto run pxlNav
CJS & UMD versions needs testing, see ./builds for these versions.
Please bare with me while I work out any NPM packaging issues.
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
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
_ 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
_ 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
_ 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
_ 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