zz85 / threejs-term

Terminal Renderer for Three.js

Terminal Renderer for Three.js

This is an example of how you can run three.js in your terminal. Sysadmins can now run three.js in remote ssh sessions!

Using demo

Keys

m - Toggle Ascii Mode (plain -> color blocks -> color + ascii -> ascii colors)

b - Toggle Braille Mode

w - Toggle Wireframe Mode

o / p - Decrease / Increase Canvas Render Resolution

e - Switch bettwen various geometry objects

q, Ctrl-C, Esc - Quits app.

Ctrl-F12 - Developer's console

a - Camera Rotate Mode

s - Camera Scale Mode

d - Camera Position Mode

Updates

Dec 17 2023 - v3.0

• Getting the original example to run in modern environments, including bunjs
• Remove node-canvas dependency temporarily, use three-software-renderer

Install and Running

If you prefer to run it by git cloning environment, look at the development section.

$ npm install -g threejs-term # install and link binary
$ threejs-term # runs the demo

Troubleshooting

If npm install fails to compile Canvas bindings to Cairo, make sure your system have the necessary libraries. For mac homebrew users, you can simply run brew install cairo.

Features

• Shows off using three.js in node based environments.
• Terminal / ASCII based rendering
• Screen resize detection aka "Responsive Design"!
• Support mouse events
• Emulate keypress
• Toggle different ASCII rendering modes

Internals

This is built with some awesome libraries.

• three.js - Duh!
• blessed - Loads of terminal goodness!
• node-canvas - Canvas emulation on node.js

Development

Play with the source

Install dependencies

$ git clone https://github.com/zz85/threejs-term.git
$ npm i # Replace npm with yarn if you like
$ npm start # or node play.js

It's tricky to debug blessed apps (since console.log's gonna messup the terminal), so I'll pipe console.error messages to a log file and tail it elsewhere. log() helper function can also be used.

$ npm run dev # or node play.js 2>> logs.txt
$ tail -f logs.txt

Made by

Yet another random idea by the Graphics Noob

threejs-term's Issues

Node 8

Looks like some of the dependencies don't support node 8 :/

yarn add threejs-term
yarn add v0.24.6
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
⠁
⠁
[1/1] ⠂ canvas
[-/1] ⠂ waiting...
[1/1] ⠐ canvas
[1/1] ⡀ canvas
[-/1] ⡀ waiting...
[-/1] ⡀ waiting...
[-/1] ⡀ waiting...
error [email protected]: The engine "node" is incompatible with this module. Expected version ">=6.1.0 <8.0.0".
error /Users/wayne/src/github.com/wayneashleyberry/dotfiles/node_modules/canvas: Failed to auto-install node-gyp. Please run "yarn global add node-gyp" manually. Error: "Found incompatible module"
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

Upgrade ThreeJS and Using WebGL Rendering

Hello, I love the creativity of this project and I plan on using this as inspiration for a personal project of mine using a more recent version of ThreeJS.

As a first test for my own implementation I was trying to see if I could upgrade this project to a more modern version of threejs and use the webgl rendering since the current canvas-renderer is no longer supported.

I've tried my best to follow along with how you've designed things and based my changes from your comments and notes but I'm having trouble getting the code to actually run. At the moment the objects fail to render and I'm not sure what I'm doing wrong.

I'm hoping for your help in finding the issue to hopefully get everything up and running so I might make a pull-request and update the repo to use something more applicable to the updated libraries. You can find the updated code in my fork over at: https://github.com/imgurbot12/threejs-term/tree/feat/webgl

Hope to hear from you soon. Thanks!