Hello,
Here is my new project PathPhalt, made with THREE.js, it’s an online road builder, specially made for curved roads and complex crossroads :
https://code.vonc.fr/pathphalt
You can load a background image, decal your road, add markings, customize lines, surfaces, and then export to OBJ.
Your configuration can also be saved and loaded in JSON data.
It’s still in progress but I hope you will enjoy it already !
Looks fantastic! And the customization options are impressive.
It’d be awesome if it had support for GeoJSON (or SVG path)! That way, users could import road or circuit data directly—like F1 circuits or tracks from sites like Racing Circuits.
Looks good. I needed some time to get accustomed.
Do you plan to add multilevel crossroads to make it possible to generate structures like this Chinese overpass?
Thanks !
Indeed, GeoJSON or directly import OpenStreetMap roads is in the todo list.
Currently the Y axis is not supported, but it will be the next big step !
Here is a new step with more custom surfaces possibles :
You can try the configuration :
{"roads":[{"prio":1,"curve":"centripetal","sub":40,"shear":0,"tex":"wear2","texL":"","texR":"","lineOnly":false,"points":[{"id":0,"prio":1,"width":30,"wLine":5,"texL":"","texR":"","pos":{"x":-100,"y":0,"z":0}},{"id":1,"prio":1,"width":30,"wLine":5,"texL":"","texR":"","pos":{"x":0,"y":0,"z":0}},{"id":2,"prio":1,"width":30,"wLine":5,"texL":"","texR":"","pos":{"x":100,"y":0,"z":0}}],"modLignes":[{"id":0,"tex":"empty","width":"3","offset":"0","shear":"0","side":"gauche","color":"#ffffff","pos":{"x":39.396875316,"y":0,"z":-15}},{"id":1,"tex":"empty","width":3,"offset":0,"shear":0,"side":"droite","color":"#ffffff","pos":{"x":38.086987303,"y":0,"z":15}},{"id":2,"tex":"empty","width":"3","offset":"0","shear":"0","side":"gauche","color":"#ffffff","pos":{"x":-62.123474544,"y":0,"z":-15}},{"id":3,"tex":"empty","width":"3","offset":"0","shear":"0","side":"droite","color":"#ffffff","pos":{"x":-67.302948819,"y":0,"z":15}},{"id":4,"tex":"empty","width":"3","offset":"0","shear":"0","side":"droite","color":"#ffffff","pos":{"x":-30.103290328,"y":0,"z":15}},{"id":5,"tex":"stop","width":4,"offset":-9,"shear":0,"side":"droite","color":"#ffffff","pos":{"x":27.00899457,"y":0,"z":15}}]},{"prio":1,"curve":"centripetal","sub":40,"shear":0,"tex":"wear2","texL":"","texR":"","lineOnly":false,"points":[{"id":3,"prio":1,"width":30,"wLine":5,"texL":"","texR":"","pos":{"x":20,"y":0,"z":-100}},{"id":4,"prio":1,"width":30,"wLine":5,"texL":"","texR":"","pos":{"x":20,"y":0,"z":0}},{"id":5,"prio":1,"width":30,"wLine":5,"texL":"","texR":"","pos":{"x":20,"y":0,"z":100}}],"modLignes":[{"id":6,"tex":"empty","width":"3","offset":"0","shear":"0","side":"gauche","color":"#ffffff","pos":{"x":35,"y":0,"z":-17.837263259}},{"id":7,"tex":"empty","width":3,"offset":0,"shear":0,"side":"gauche","color":"#ffffff","pos":{"x":35,"y":0,"z":24.403466582}},{"id":8,"tex":"empty","width":"3","offset":"0","shear":"0","side":"droite","color":"#ffffff","pos":{"x":5,"y":0,"z":-59.900413914}},{"id":9,"tex":"empty","width":"3","offset":"0","shear":"0","side":"droite","color":"#ffffff","pos":{"x":5,"y":0,"z":31.585357038}}]},{"prio":1,"curve":"centripetal","sub":40,"shear":0,"tex":"bike","texL":"","texR":"","lineOnly":false,"points":[{"id":6,"prio":1,"width":10,"wLine":5,"texL":"","texR":"","pos":{"x":-70.627555784,"y":0,"z":51.190721316}},{"id":7,"prio":1,"width":10,"wLine":5,"texL":"","texR":"","pos":{"x":-13.172042513,"y":0,"z":-35.25534822}},{"id":8,"prio":1,"width":10,"wLine":5,"texL":"","texR":"","pos":{"x":84.80652565,"y":0,"z":-76.60485278}}],"modLignes":[{"id":10,"tex":"empty","width":"3","offset":"0","shear":"0","side":"droite","color":"#ffffff","pos":{"x":-4.494001118,"y":0,"z":-35.631325338}},{"id":11,"tex":"empty","width":"3","offset":"0","shear":"0","side":"gauche","color":"#ffffff","pos":{"x":-13.691259738,"y":0,"z":-41.16251629}},{"id":12,"tex":"empty","width":"3","offset":"0","shear":"0","side":"droite","color":"#ffffff","pos":{"x":-52.492035814,"y":0,"z":26.206269416}},{"id":13,"tex":"empty","width":"3","offset":"0","shear":"0","side":"gauche","color":"#ffffff","pos":{"x":-62.304384741,"y":0,"z":23.369488233}},{"id":14,"tex":"yield","width":3,"offset":-2,"shear":-1,"side":"droite","color":"#ffffff","pos":{"x":-33.318294531,"y":0,"z":-5.56126942}},{"id":15,"tex":"empty","width":"3","offset":"0","shear":"0","side":"gauche","color":"#ffffff","pos":{"x":-43.506444211,"y":0,"z":-8.426703539}},{"id":16,"tex":"empty","width":"3","offset":"0","shear":"0","side":"droite","color":"#ffffff","pos":{"x":40.084634038,"y":0,"z":-57.833407636}},{"id":17,"tex":"empty","width":"3","offset":"0","shear":"0","side":"gauche","color":"#ffffff","pos":{"x":39.832640212,"y":0,"z":-68.339736675}},{"id":18,"tex":"yield","width":3,"offset":-2,"shear":1,"side":"droite","color":"#ffffff","pos":{"x":13.538677417,"y":0,"z":-46.528428659}}]}],"modSols":[{"id":19,"tex":"asphalt","color":"#ffffff","rot":"0","fill":"medianBevel","lineTex":"lineUsed","lineCol":"#ffffff","lineW":3,"lineOff":-1,"pos":{"x":60.003474111,"y":-0.1,"z":-33.761216957}},{"id":20,"tex":"asphalt","color":"#ffffff","rot":"0","fill":"medianBorder","lineTex":"lineUsed","lineCol":"#fbe01c","lineW":3,"lineOff":-1,"pos":{"x":60.284636448,"y":-0.1,"z":25.249393975}},{"id":21,"tex":"asphalt","color":"#ffffff","rot":"0","fill":"medianBevel","lineTex":"lineUsed","lineCol":"#ffffff","lineW":3,"lineOff":-1,"pos":{"x":42.885203556,"y":-0.1,"z":-82.208960311}},{"id":22,"tex":"asphalt","color":"#ffffff","rot":"0","fill":"medianBevel2","lineTex":"lineUsed","lineCol":"#ffffff","lineW":3,"lineOff":-1,"pos":{"x":-18.403487882,"y":-0.1,"z":-56.121304811}},{"id":23,"tex":"asphalt","color":"#ffffff","rot":"0","fill":"medianBevel2","lineTex":"lineUsed","lineCol":"#ffffff","lineW":3,"lineOff":-1,"pos":{"x":-0.159001486,"y":-0.1,"z":-24.258869672}},{"id":24,"tex":"asphalt","color":"#ffffff","rot":"0","fill":"medianBevel","lineTex":"lineUsed","lineCol":"#ffffff","lineW":3,"lineOff":-1,"pos":{"x":-77.120233245,"y":-0.1,"z":25.41978791}},{"id":25,"tex":"asphalt","color":"#ffffff","rot":"0","fill":"medianBevel","lineTex":"lineUsed","lineCol":"#ffffff","lineW":3,"lineOff":-1,"pos":{"x":-16.930274425,"y":-0.1,"z":31.746082441}},{"id":26,"tex":"plain","color":"#2687fd","rot":"0","fill":"","lineTex":"","lineCol":"#ffffff","lineW":3,"lineOff":0,"pos":{"x":-23.515035174,"y":-0.1,"z":-26.680503951}},{"id":27,"tex":"plain","color":"#2687fd","rot":"0","fill":"","lineTex":"","lineCol":"#ffffff","lineW":3,"lineOff":0,"pos":{"x":18.996212676,"y":-0.1,"z":-54.284936783}},{"id":28,"tex":"plain","color":"#2687fd","rot":"0","fill":"","lineTex":"","lineCol":"#ffffff","lineW":3,"lineOff":0,"pos":{"x":46.37003041,"y":-0.1,"z":-65.996907718}},{"id":29,"tex":"plain","color":"#2687fd","rot":"0","fill":"","lineTex":"","lineCol":"#ffffff","lineW":3,"lineOff":0,"pos":{"x":-45.21484908,"y":-0.1,"z":-1.738057586}},{"id":30,"tex":"plain","color":"#2687fd","rot":"0","fill":"","lineTex":"","lineCol":"#ffffff","lineW":3,"lineOff":0,"pos":{"x":-59.130172915,"y":-0.1,"z":28.602254614}}],"markings":[],"background":{"x":0,"z":0,"sx":1,"sy":1,"rot":0}}
Great work!
I use thrsejs to render 3D maps (3Drockmaps.com) of multi pitch climbing sites and I am looking for a library to improve the functionality of the UI. Which library did you use?
Thanks