lassed / buildinginstructions.js Goto Github PK
View Code? Open in Web Editor NEWRender LEGO building instructions in the browser using three.js
License: The Unlicense
Render LEGO building instructions in the browser using three.js
License: The Unlicense
Describe the bug
I have a complex model consisiting of sub-models only, which fails to load.
The error is "Empty first step!"
To Reproduce
Since the model is complex, I tried to produce a kind of minimal example, attached at the bottom. This produces a different error (empty ID), but it also starts with a submodel, so I presume that once this works, the next one will be simple...
Expected behavior
I'd expect to see some stepped instructions, as e.g. in lpub3d
Screenshots
Device (please complete the following information):
0 FILE pyramid2_rev.lxf
0 Name: pyramid2_rev.lxf
0 Author: Undefined
1 16 7.405296803 -71.99983215 219.8517609 1 0 0 0 1 0 0 0 1 pyramid2_rev.lxf_0
0 STEP
1 4 79.9999923706 0.0000724792 -80 1 0 0 0 1 0 0 0 1 3001.dat
1 4 -0.0000038147 0.0000724792 -80 1 0 0 0 1 0 0 0 1 3001.dat
1 4 -80.0000152588 0.0000724792 -80 1 0 0 0 1 0 0 0 1 3001.dat
1 4 -100 0.0000724792 -20 0 0 -1 0 1 0 1 0 0 3001.dat
1 4 100 0.0000972748 -20 0 0 -1 0 1 0 1 0 0 3001.dat
1 4 -100.0000305176 0.000120163 60 0 0 -1 0 1 0 1 0 0 3001.dat
1 4 100 0.000120163 60 0 0 -1 0 1 0 1 0 0 3001.dat
1 4 80 0.000120163 120.0000152588 -1 0 0 0 1 0 0 0 -1 3001.dat
1 4 0 0.0001678467 120.0000152588 -1 0 0 0 1 0 0 0 -1 3001.dat
1 4 -80.0000152588 0.0001449585 120.0000305176 -1 0 0 0 1 0 0 0 -1 3001.dat
0 STEP
1 1 59.9999847412 -24 -59.9999923706 1 0 0 0 1 0 0 0 1 3001.dat
1 1 -20.0000095367 -24 -59.9999923706 1 0 0 0 1 0 0 0 1 3001.dat
1 1 -79.9999923706 -24 -39.9999923706 0 0 -1 0 1 0 1 0 0 3001.dat
1 1 -79.9999923706 -24 40.0000228882 0 0 -1 0 1 0 1 0 0 3001.dat
1 1 -59.9999923706 -24 100.0000228882 1 0 0 0 1 0 0 0 1 3001.dat
1 1 19.9999980927 -24 100.0000076294 1 0 0 0 1 0 0 0 1 3001.dat
1 1 80 -24 80.0000076294 0 0 1 0 1 0 -1 0 0 3001.dat
1 1 79.9999923706 -24 0.0000076294 0 0 1 0 1 0 -1 0 0 3001.dat
0 STEP
1 16 10.00000858 -23.99987221 70.00000763 1 0 0 0 1 0 0 0 1 pyramid2_rev.lxf_3
0 STEP
1 15 -19.9999866486 -71.9998703003 60.0000076294 1 0 0 0 1 0 0 0 1 3001.dat
1 15 19.9999732971 -71.9998931885 -19.9999771118 1 0 0 0 1 0 0 0 1 3001.dat
1 15 -40.0000076294 -71.9999160767 -0.0000038147 0 0 -1 0 1 0 1 0 0 3001.dat
1 15 39.9999885559 -71.9998931885 40.0000152588 0 0 -1 0 1 0 1 0 0 3001.dat
0 STEP
1 16 -30.00000763 -71.99989319 30.0000248 1 0 0 0 1 0 0 0 1 pyramid2_rev.lxf_5
0 STEP
0 !LPUB INSERT MODEL
0 !LPUB INSERT PAGE
0 STEP
0 NOFILE
0 FILE pyramid2_rev.lxf_0
0 Name: pyramid2_rev.lxf_0
0 Author: Undefined
1 2 -17.4052696228 -24 -9.8517303467 -0.8702634573 0 0.4925865233 0 1 0 -0.4925865233 0 -0.8702634573 3622.dat
1 15 -17.4053058624 0.0000014901 -9.851776123 -0.9182773829 0 -0.3959376216 0 1 0 0.3959376216 0 -0.9182773829 3622.dat
1 14 -17.4053134918 24 -9.8517436981 -0.229424268 0 -0.9733265042 0 1 0 0.9733265042 0 -0.229424268 3622.dat
1 1 -17.4053020477 47.9998283386 -9.8517198563 0.6290366054 0 -0.7773756385 0 1 0 0.7773756385 0 0.6290366054 3622.dat
1 4 -17.4053039551 72 -9.8517570496 0.9992797375 0 0.0379474312 0 1 0 -0.0379474312 0 0.9992797375 3622.dat
0 STEP
0 NOFILE
0 FILE pyramid2_rev.lxf_3_1_1
0 Name: pyramid2_rev.lxf_3_1_1
0 Author: Undefined
1 70 10 -24 10 1 0 0 0 1 0 0 0 1 3003.dat
1 70 9.9999961853 0.0000014901 -10.0000047684 1 0 0 0 1 0 0 0 1 3001.dat
1 70 9.9999961853 0.0000014901 30.0000095367 1 0 0 0 1 0 0 0 1 3001.dat
1 70 10 24.0000019073 10 1 0 0 0 1 0 0 0 1 3003.dat
0 STEP
0 NOFILE
0 FILE pyramid2_rev.lxf_3_1
0 Name: pyramid2_rev.lxf_3_1
0 Author: Undefined
1 70 10 -24 10 1 0 0 0 1 0 0 0 1 3003.dat
1 70 10 0.0000014901 10 1 0 0 0 1 0 0 0 1 3003.dat
1 70 10 24.0000019073 10 1 0 0 0 1 0 0 0 1 3003.dat
1 70 9.9999885559 47.9998703003 19.9999980927 1 0 0 0 1 0 0 0 1 3004.dat
0 STEP
1 16 0 -72 0 1 0 0 0 1 0 0 0 1 pyramid2_rev.lxf_3_1_1
0 STEP
0 NOFILE
0 FILE pyramid2_rev.lxf_3
0 Name: pyramid2_rev.lxf_3
0 Author: Undefined
1 14 30.0000019073 -24 10 1 0 0 0 1 0 0 0 1 3001.dat
1 14 49.9999847412 -24.0000286102 -49.9999923706 0 0 1 0 1 0 -1 0 0 3001.dat
1 14 -50 -23.9999523163 10 1 0 0 0 1 0 0 0 1 3001.dat
1 14 -50 -24.0000534058 -110 1 0 0 0 1 0 0 0 1 3001.dat
1 14 -70 -24.0000534058 -50.0000190735 0 0 1 0 1 0 -1 0 0 3001.dat
1 14 29.9999599457 -24.0000286102 -109.9999923706 1 0 0 0 1 0 0 0 1 3001.dat
0 STEP
1 16 -19.99999809 -72 19.99999809 1 0 0 0 1 0 0 0 1 pyramid2_rev.lxf_3_1
0 STEP
0 NOFILE
0 FILE pyramid2_rev.lxf_5
0 Name: pyramid2_rev.lxf_5
0 Author: Undefined
1 2 30.0000019073 -24 10 1 0 0 0 1 0 0 0 1 3001.dat
1 2 29.9999885559 -24 -29.9999923706 1 0 0 0 1 0 0 0 1 3001.dat
1 2 29.9999923706 -48 -9.9999990463 1 0 0 0 1 0 0 0 1 3003.dat
0 STEP
0 NOFILE
For the parts lists it would be nice to have color information from all currently used technologies (LDD, Bricklink, Official LEGO, rebrickable)
Hello, can I use your code for my website
Persons may change the camera position and scale when viewing a step, but the camera will be reset in the next step. Is it possible to keep the current camera status when switching steps?
Studs, antistuds, and more which are hidden by other parts will take up a lot of polygons in the rendered model. Remove them for improving performance.
This issue depends on the ability to identify connections.
LDraw line type 5 should be supported: http://www.ldraw.org/article/218
Currently there are options to enable them, but they do not appear.
Similarly to BFC and Harlequin modes, it would be nice to see how sub models are placed and aligned in the Part Viewer.
Suggested by philo here: https://forums.ldraw.org/thread-23540-page-10.html
Fix by not showing during page load.
When parts list images are shown, the camera is offset in comparison to the model, causing OrbitControls movement to have a non-intuitive offset.
Describe the bug
When cleanUpPrimitivesAndSubParts is set to true when creating the InstructionsManager, and the model contains the part 2444.dat, all steps where the part is present in the PLI do not get rendered at all. In addition, behaviour beyond the fist step containing the part gets sluggish and sometimes hard to predict. Jumping to a particular step by typing the number in the box does not work any more.
To Reproduce
Expected behavior
Normal behaviour
Device (please complete the following information):
Windows 10, Android 10
firefox, chrome, android webview
Additional context
It helps to simply set the option to false.
Describe the bug
The generator for stud6 is using 1-4ring2 which is not generated in LDRGenerator.js
To Reproduce
Expected behavior
LDRGenerator.js generates 1-4ring2.
Recommend adding 1-4ring2 to LDR.Generator.map
I'd also recommend auditing the stud generator code since this is the second missing file I've found.
Device (please complete the following information):
Parts the have TEXMAPs with alpha transparency do not render correctly in physical color mode. The geometry covered by the TEXMAP renders transparent.
To Reproduce
Screenshots
Go to https://www.ldraw.org/cgi-bin/ptdetail.cgi?f=parts/2454aps5.dat to see the rendering in action. To turn on physical render mode, click the button with the "eye" icon.
There's some debate going on in the parts author community regarding the "invisible" primitives 1-16chrd and the associated ering primitives. Would it be possible to add functionality or a tutorial on how to enable these primitives to be viewed or highlighted in a model. Something like all the other faces grey but these prims in red or similar.
Describe the solution you'd like
A sample file where the user uploads an LDraw file and immediately sees the generated instructions. If satisfied, presses "Upload to server" and the three.js geometries are generated for upload to a server where the original LDraw file is no longer available.
Additional context
This suggestion is for allowing users to share building instructions without sharing the original LDraw file.
Other suggestions for making this work:
It appears we are close to accepting our first part on the Parts Tracker that uses the GLOSSMAP feature of the TEXMAP spec. Since I am not aware of any other LDraw viewer that supports GLOSSMAPs (LDView and LeoCAD do not, LDCad is unknown), it would be helpful if this software supported GLOSSMAPSs images.
Describe the bug
I use this program to display the instructions of my models on the website. However, I found it doesn't work with some of my models. When work with these models, the program will throw exceptions at the specific steps.
I debugged it and found that if 87580.dat
appears before the 3068b.dat
in a LDR file, no matter whether they are in the same step, the program will throw out exceptions in the console, and can not display the step correctly. if 87580.dat
has appeared in a LDR file, the program will always throw the same exceptions at the step where 3068b.dat
appears. I don't know whether there are other parts that could cause this bug.
When 87580.dat
has appeared before, and the next step contains 3068b.dat
, I click the next step button, and got:
LDRGeometries.js:134 Uncaught TypeError: Cannot read property 'length' of undefined
at LDR.LDRGeometry.buildGeometries (LDRGeometries.js:134)
at THREE.LDRPartType.generateThreePart (LDRLoader.js:2192)
at THREE.LDRStep.generateThreePart (LDRLoader.js:1693)
at LDR.StepHandler.nextStep (LDRStepHandler.js:238)
at LDR.InstructionsManager.realignModel (LDRInstructionsManager.js:605)
at LDR.InstructionsManager.nextStep (LDRInstructionsManager.js:838)
at nextStep (LDRInstructionsManager.js:37)
at HTMLDivElement.<anonymous> (LDRButtons.js:178)
When I got the exception above and continue clicking the next button, I continuously got:
Uncaught TypeError: Cannot read property 'min' of undefined
at t.e.copy (three.min.js:2)
at LDR.StepHandler.setCurrentBounds (LDRStepHandler.js:553)
at LDR.StepHandler.nextStep (LDRStepHandler.js:239)
at LDR.InstructionsManager.realignModel (LDRInstructionsManager.js:605)
at LDR.InstructionsManager.nextStep (LDRInstructionsManager.js:838)
at nextStep (LDRInstructionsManager.js:37)
at HTMLDivElement.<anonymous> (LDRButtons.js:178)
e.copy @ three.min.js:2
LDR.StepHandler.setCurrentBounds @ LDRStepHandler.js:553
LDR.StepHandler.nextStep @ LDRStepHandler.js:239
LDR.InstructionsManager.realignModel @ LDRInstructionsManager.js:605
LDR.InstructionsManager.nextStep @ LDRInstructionsManager.js:838
nextStep @ LDRInstructionsManager.js:37
(anonymous) @ LDRButtons.js:178
Reproduce
I made a simple LDR file that only contains the two parts and two steps. It can always reproduce this bug. You can get the two parts(they are from LDraw library) and the ldr file from the attachment.
Additional context
You can click the follow link to see this bug. I've deployed them on my website. it will occur at step 7.
(http://test.take-build.com/hat_bug.html)[http://test.take-build.com/hat_bug.html]
It would be appreciated if you could fix this problem. Thank you!
LDConfig.ldr was updated in the 2022-01 release. The colors file needs to be updated. The ability to have the code parse the actual LDconfig to generate colors would also avoid this problem and be helpful.
For transparency.
Describe the bug
LDR.OMR.ColorPartsAccordingToYear lists 2007 as the year of the change for Light/Dark Grey and Brown. The actual change was for year 2004 sets (that released to stores in late 2003).
Please add tools for checking point misalignments. These will be used for checking use of fixed primitives as sub-parts of official LDraw library files.
Hi,
Is it possible to display the size of the axle in the parts panel?
Thanks
Studio has released a new way of projecting textures. It appears that PE_TEX_INFO is used for the mapping data. The usage of parameters has to be reverse engineered.
The new type of Studio data looks like this:
0 PE_TEX_PATH 0 0
0 PE_TEX_INFO 0.0000 0.5417 -0.9150 1.6100 0.0000 0.0000 0.0000 0.0000 0.6708 0.0000 0.2200 0.0000 -20.0000 26.0000 20.0000 -22.0000
rather than what was previously expected:
0 PE_TEX_INFO
After playing around with your renderer for a bit, I like it better than brigl. I'd like to use it on the official LDraw.org site for both part previews and OMR renders. However, having to lump all the parts into one directory is a issue. Rather than have 2 parallel libraries at ldraw.org, I'd like to have the ability to search multiple directories in a specified order (e.g. unoff/p, off/p, unoff/parts, off/parts). This way I don't have to maintain a special combined directory through renames/submissions of unofficial parts and official part releases.
Hi, I manage to run "sample_instructions.htm" with the default model.
I want now to try another mpd locally. I change the line "var model = 'models/corvette_full.mpd';" by "var model = 'models/genbot.mpd';" and I place the file genbot.mpd in the models folder.
I tested then the building instructions but it showed the old model.
How should I proceed in order to see my own model?
Thanks
Existing performance metrics:
LDraw Raw: 250MB,
Zip: 40MP,
gz: 2MB
Prior Work: https://www.researchgate.net/publication/221651271_Fast_and_Efficient_Log_File_Compression
Consider getting zip-performance with gz compression using insights into the spec.
Describe the bug
In chrome browsers on mobile devices rendering and control works badly. When using an android webview instance, the result is a s the image shown in #28 . Same actually applies when browsing brickhub.org.
It's a bit of a pity, since mobile devices are a prime use case for buildinginstructions.js. Working in webview would be a prerequisite to ever easily make an app from it.
On the upside, it renders well when using firefox.
To Reproduce
Use chrome on any android phone/tablet, go to https://brickhub.org/i/r.php?model=3&color=0
try to navigate and/or rotate/resize the model
Alternatively
1.) install android studio
2.) make a simple webview app like so
package com.example.myapplication;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MainActivity extends AppCompatActivity {
private WebView myWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
myWebView = (WebView) findViewById(R.id.myWebView);
// Enable Javascript
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setPluginState(WebSettings.PluginState.ON);
webSettings.setAllowFileAccess(true);
webSettings.setAllowContentAccess(true);
webSettings.setAllowFileAccessFromFileURLs(true);
webSettings.setAllowUniversalAccessFromFileURLs(true);
myWebView.setWebViewClient(new WebViewClient());
myWebView.loadUrl("https://brickhub.org/i/r.php?model=3&color=0");
}
}
It will look like the screenshot on #28
Expected behavior
It would be prefect if it behaved like on a desktop (or mobile in firefox).
Device (please complete the following information):
Add an interactive component that allows you to fix or modify existing parts, such as invert BFC, add connections information and fix errors.
!CMDLINE is a "do nothing" meta (at least in the context of bi.js) but it is valid LDraw command. This meta should be silently ignored (i.e. treated like a comment).
This silent ignore should probably be extended to all other metas that aren't used by bi.js
Hi, I want to do some customization to the CSS. I searched for the css files but I couldn't figure out which one should I edit in order to change the layout and colors of the sample_instructions.htm page.
Could you indicate the files to modify in order to change the appearance of the sample_instructions.htm.
Thanks
This can be done by splitting rendering into 3 parts:
If you have a better (faster) way of achieving this, then please feel free to comment and make a pull request.
Hi, how could I reduce the size of the parts in the parts panel?
Thanks
A smarter algorithm should be used to compute the order of which transparent polygons are drawn.
Follow the discussion and ideas posted here: https://forums.ldraw.org/thread-23540-lastpost.html
Move to WebWorker and retrieve geometries from ldrLoader from WebWorker once it is completely done to reduce I/O's.
Describe the bug
When LDR.Studs.makeGenerators is called a 3-4disc.dat error is received regardless of settings
To Reproduce
Steps to reproduce the behavior:
Expected behavior
3-4disc.dat to be loaded via the normal method (idToUrl)
Screenshots
If applicable, add screenshots to help explain your problem.
Device (please complete the following information):
Windows, Firefox, 77.0.1
Additional context
I noted that 3-4disc.dat is commented out in LDRGenerator which may be the source of the issue. Regardless, this part should be attempted to be loaded via the normal method if not found.
Describe the bug
In the PLI section, transparent parts are practically invisible. This was not the case in earlier versions.
To Reproduce
Expected behavior
I expected to see transparent parts as in the version from about one year ago
Device (please complete the following information):
Hi there,
The 0 BUFEXCHG
meta command originates from the MLCAD program but is also supported in a range of other LDraw programs such as LDCad, LPub3D and LeoCAD. The command can be used to "remove" parts during the building process. The typical use case is to show a certain part hovering above the model in one step, and then in it's final position in the next step. This can be tremendously useful for complex builds.
I've uploaded a model to BrickHub that makes heavy use of this command, almost in every step. You can view it here: https://brickhub.org/i/590 As you will see, the building instructions currently look like a mess, but with support buffer exchange they will be perfect!
Thanks for considering this feature request!
Greetings,
JJ
For parts lists it would be nice to have Bricklink and BrickOwl id's and names so parts can be easily found on those platforms.
Thank you for sharing this great stuff!
Describe the bug
Some part fail to load with setStuds on unless specific files are loaded with the model
To Reproduce
LDraw.org uses a custom fetcher to prefetch all the LDraw files needed for a model and loads them into buildinginstructions.js. The parts/primitives are stored in an array and used by idToUrl like so (part_paths is an array of the part files):
var idToUrl = function(id) {
if (part_paths[id]) {
return [part_paths[id]];
}
}
If setStuds is on, buildinginstructions.js will fail on loading unless the following files are also loaded with the model (note this list was determined experimentally so may not be all inclusive):
"4-4edge.dat",
"4-4ring2.dat",
"1-4ring2.dat",
"4-4ring5.dat",
"4-4ring6.dat",
"4-4disc.dat",
"t01o0714.dat",
"4-4cyli.dat",
"4-4cyli2.dat",
"logo.dat",
"logo2.dat",
"logo3.dat",
"logo4.dat",
"logo5.dat"
The only files on this list that would I expect to have to prefetch in regardless of the model contents would be the logo*.dat files. Any part files needed by the studs in the model being loaded are fetched with the rest of the parts/primitives in the the model.
Expected behavior
buildinginstructions.js should only need the files for the studs referenced in the actual model being loaded (plus the logo*.dat file for the reason I mentioned above)
Stud logos have been added to stud.dat and stud.2.dat.
However. There are many other studs, such as those on top of 2x2 round parts, on top of light and sound bricks, etc. They all need logos too!
This is a lot of work, so I am tagging with "help wanted".
See list of studs here: https://brickhub.org/p/class.php?class=Stud&path=0
The changes should be made in js/LDRStuds.js
Add support for TEXMAP and make sure not to repeat mistakes of other renderers where adding TEXMAP to transparent elements also make the textures transparent.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.