+- LDraw.org Discussion Forums (https://forums.ldraw.org)
+-- Forum: LDraw Programs (https://forums.ldraw.org/forum-7.html)
+--- Forum: LDraw Editors and Viewers (https://forums.ldraw.org/forum-11.html)
+--- Thread: New WebGL <brick-viewer> web component for MPD files (/thread-24218.html)
New WebGL <brick-viewer> web component for MPD files - Justin - 2020-09-26
Hey everyone,
This is my first post here, so hopefully announcements of this sort are ok.
I'm a web developer who works on libraries related to web components, a way for developers to create their own HTML tags. As part of a demo/codelab a coworker and I created a MPD viewer web component using three.js called <brick-viewer>.
<brick-viewer> wraps up three.js and it's LDraw loader example so that it's super easy to use. All you have to do is import the element definition, then use the tag:
PHP Code:
<?php
<!-- import the custom element definition -->
<script type="module" src="https://unpkg.com/brick-viewer?module"></script>
<!-- use the tag anywhere in HTML -->
<brick-viewer src="./radar_truck.mpd"></brick-viewer>
You can see a demo here: https://polymerlabs.github.io/brick-viewer/
And you can install it from npm with:
Code:
npm i brick-viewer<brick-viewer> was made as a demo, but it's pretty usable. It displays build steps with a slider and that's controllable with an HTML attribute. The code itself is pretty straightforward, so it could be extended with new features. You can see the code and file bug reports and feature requests here: https://github.com/polymerlabs/brick-viewer/
I hope it enables sites like this to easily embed 3D models without any programming. It'd be nice to unleash the potential of WebGL + Lego on the web
I'd love feedback if you try it out! We're new to the file formats and use cases, so if there's something we could do better, let us know.
One thing I'd love to know about is if there are any efforts to make .ldr files be able to link to each other, or newer formats that would allow that. It seems like having to make MPD files slows down the workflow, and makes it a bit harder to make a viewer app that could just render LDR files hosted on the web.