Create your own 3d city building game that requires no JavaScript to play.

To build:

• Install nunjucks with npm install -s nunjucks
• run node renderbuildings.js
• run node rendercity.js

After this setup, city.xml and city.xsl files will be generated. Use any server to host these 2 files and then visit city.xml in a browser to play. You can install express and then run the index.js file to serve on port 3000 (or change to your liking). If you are within Replit, you can just press Run to serve it but I don't think the built-in webview handles xml properly so open a new tab.

To customize:

Load 3d objects to the obj folder. Add the building name(s) to the array at the top of renderbuildings.js. You can use trial and error or look at the existing files to get the desired scale.

Change the layout of blocks or add/remove blocks by changing the files in the blocks folder. Add the block name(s) to the array at the top of rendercity.js. Each block is 100x100 units with x and y setting the location while the a element determines the rotation. You can also set the text element if there is text on the building.

Add or edit materials by changing the materials.css file. Use the texture generator repl at https://replit.com/@triplelog/CSS-Texture-Generator to help make some materials.

More advanced stuff:

You can edit any of the template or other files if you can figure out how and you need to do more customizing. The template.xsl file has most of the HTML/CSS stuff that is useful for modifying the look. The buildings.xml is a generated file and should not be edited (it will be written over the next time you run renderbuildings.js).

Read more about this project at https://triplelog.com/blog/exploring-a-3d-city-with-just-html-and-css.html or just play at https://csshole.com/city.xml