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


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:

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:
This is the car model in the official ldr viewer (src:

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

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:

    $("#webgl").api("set loading");
    if (scene.loader.physicalRenderingAge > 0) {
    else {

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


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.

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: