How to correctly display, rotate and activate cell shading/physical render mode for a model using ldraw-loader from threeJS?

Questions
, ,
1

Hi!

I just built a website for viewing 3D models of lego (.ldr) files using ldraw-loader and threeJS.
I use html, css and node.js with express.

For more details, see:
https://discourse.threejs.org/t/how-can-i-render-a-lego-model-as-ldr-or-io-file-using-threejs/56755/4

Now I have 3 problems:

1. OrbitControls Problem:

For UP/DOWN drag (left click + draw mouse the model up/down in the viewer) it only goes from 0 to 180 degrees and then stops.
LEFT/RIGHT Rotation works fine without restriction, even if I use the exactly same code for both.
Why is one rotation not working freely?

2. The colors seem to be displayed wrong by my viewer:
Example:
This is the car model in the official ldr viewer (src: https://www.ldraw.org/tools/ldraw-model-viewer.html):

legoLDRViewer
legoLDRViewer1701×1127 114 KB

 And this is the exact same model viewed using my own implementation:

myLdrViewer
myLdrViewer1736×1125 55 KB

Is there something missing in my code?
The web developers tools terminal shows no errors.

3. The official ldr viewer (for source see Problem 2.) has a button for physical rendering (the eye symbol) that makes the model look more realistic.
In the source code of that page, this is the event called when pressing that button:

$("#physicalBtn").click(function(){
    $("#webgl").api("set loading");
    if (scene.loader.physicalRenderingAge > 0) {
      scene.setPhysicalRenderingAge(0);
    }
    else {
      scene.setPhysicalRenderingAge(20);
    }
  });

Does anybody have some docs/links about how to implement the physical rendering including the needed package scripts?

SOURCE CODE:

This is my main.js file:
main.js (5.7 KB)

Sorry for not putting the code as snippet in here, I needed to upload the files instead because of the max. of 5 links for new users.

The index.js file with the express routes is configured properly.

2

Solution for Problem 2 & 3:

Add this to main.js:

// rest of imports
import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';

// renderer + rest of code

const pmremGenerator = new THREE.PMREMGenerator( renderer );

// Scene
const scene = new THREE.Scene();
scene.environment = pmremGenerator.fromScene( new RoomEnvironment( renderer ) ).texture;

// rest of code

This is how it looks now:

grafik
grafik1341×990 79.5 KB