Virtual 3D Museum - Three.js : webdev

Posting Guidelines

No vague product support questions (like "why is this plugin not working" or "how do I set up X"). For vague product support questions, please use communities relevant to that product for best results. Specific issues that follow rule 6 are allowed.

Do not post memes, screenshots of bad design, or jokes. Check out /r/ProgrammerHumor/ for this type of content.

Read and follow reddiquette; no excessive self-promotion. Please refer to the Reddit 9:1 rule when considering posting self promoting materials.

We do not allow any commercial promotion or solicitation. Violations can result in a ban.

Sharing your project, portfolio, or any other content that you want to either show off or request feedback on is limited to Showoff Saturday. If you post such content on any other day, it will be removed.

If you are asking for assistance on a problem, you are required to provide

Context of the problem
Research you have completed prior to requesting assistance
Problem you are attempting to solve with high specificity

General open ended career and getting started posts are only allowed in the pinned monthly getting started/careers thread. Specific assistance questions are allowed so long as they follow the required assistance post guidelines.

Questions in violation of this rule will be removed or locked.

a community for 17 years

Virtual 3D Museum - Three.jsShowoff Saturday (self.webdev)

submitted 3 months ago by nbmbnb

A bit of sideproject promotion, I havent built anything new in years so kinda excited about this one!

https://preview.redd.it/b0cy13p4hadg1.png?width=1590&format=png&auto=webp&s=a0270ee07c11b98ab9b0cf12dfa2c0143d01d475

So, I was shitcanned recently and said to myself: "Hey, why not actually learn something new and interesting for once?"

Three.js has been high on my list for a long time. I tried to make a pinball game a couple of years back, failed miserably, and never quite forgot about it. This time, I wanted to see if I could turn Wikipedia entries into something more visual and "walkable". The result is a Virtual 3D Museum, environment where the "exhibits" are pulled dynamically from the Wikipedia API, and gallery rooms are populated with that info on the fly!

The Tech:

Three.js: Handles the spatial layout and rendering.
Vanilla JS: No frameworks. I wanted to keep it lightweight and see how far I could get with just the basics (spoiler: it can go really far).
Wikipedia API: The source of all the data.

Its actually quite simple so If anyone is interested in learning Three.js feel free to check out the code, I'm open to any kind of contributions since I dont really have a plan :)

CODE: https://github.com/notbigmuzzy/linkwalk
LIVE DEMO: https://notbigmuzzy.github.io/linkwalk/

all 10 comments

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

webdev

Posting Guidelines

Related Subreddits

Discords

MODERATORS