79324457

Date: 2025-01-02 17:09:29
Score: 0.5
Natty:
Report link

I was able to reduce the code to the bare minimum to display a packed .ldr file:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - LDrawLoader</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                margin: 0;
                padding: 0;
            }
        </style>
    </head>

    <body>

        <script type="importmap">
            {
                "imports": {
                    "three": "../build/three.module.js",
                    "three/addons/": "./jsm/"
                }
            }
        </script>

        <script type="module">

            import * as THREE from 'three';

            import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

            import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
            import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';

            import { LDrawLoader } from 'three/addons/loaders/LDrawLoader.js';
            import { LDrawUtils } from 'three/addons/utils/LDrawUtils.js';
            import { LDrawConditionalLineMaterial } from 'three/addons/materials/LDrawConditionalLineMaterial.js';

            let container, camera, scene, renderer, controls, gui, model;
            
            function init() {

                container = document.createElement( 'div' );
                document.body.appendChild( container );

                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
                camera.position.set( 150, 200, 250 );

                renderer = new THREE.WebGLRenderer( { antialias: true } );
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                renderer.setAnimationLoop( animate );
                renderer.toneMapping = THREE.ACESFilmicToneMapping;
                container.appendChild( renderer.domElement );

                const pmremGenerator = new THREE.PMREMGenerator( renderer );

                scene = new THREE.Scene();
                scene.background = new THREE.Color( 0xdeebed );
                scene.environment = pmremGenerator.fromScene( new RoomEnvironment() ).texture;

                controls = new OrbitControls( camera, renderer.domElement );
                controls.enableDamping = true;

                reloadObject();

            }

            function reloadObject() {

                const lDrawLoader = new LDrawLoader();
                const loader = new LDrawLoader();

                lDrawLoader.setConditionalLineMaterial( LDrawConditionalLineMaterial );
                lDrawLoader.smoothNormals = false;
                lDrawLoader
                    .setPath( 'models/' )
                    .load( 'block.ldr_Packed.mpd', function ( model ) {

                        model.rotation.x = Math.PI;
                        scene.add( model );

                        const bbox = new THREE.Box3().setFromObject( model );
                        const size = bbox.getSize( new THREE.Vector3() );
                        const radius = Math.max( size.x, Math.max( size.y, size.z ) ) * 0.5;

                        controls.target0.copy( bbox.getCenter( new THREE.Vector3() ) );
                        controls.position0.set( - 2.3, 1, 2 ).multiplyScalar( radius ).add( controls.target0 );
                        controls.reset();

                    }, false, onError );
            }

            function animate() {

                controls.update();
                render();

            }

            function render() {

                renderer.render( scene, camera );

            }

            function onError( error ) {

                console.error( error );

            }

            init();

        </script>

    </body>
</html>

See this repo for instructions and code: https://github.com/codeadamca/nodejs-three-ldr

Reasons:
  • Contains signature (1):
  • Long answer (-1):
  • Has code block (-0.5):
  • Self-answer (0.5):
  • Low reputation (0.5):
Posted by: Adam