​

        function init() {

            scene = new THREE.Scene();

            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

            camera.position.z = 10;

​

            renderer = new THREE.WebGLRenderer();

            renderer.setSize(window.innerWidth, window.innerHeight);

            document.body.appendChild(renderer.domElement);

​

            const ambientLight = new THREE.AmbientLight(0x404040); // soft white light

            scene.add(ambientLight);

​

            const directionalLight = new THREE.DirectionalLight(0xffffff, 1);

            directionalLight.position.set(-1, 2, 4);

            scene.add(directionalLight);

​

            addRandomBricks(30); // Add 30 bricks with random characteristics

​

            animate();

        }

​

        function addRandomBricks(numberOfBricks) {

            for (let i = 0; i < numberOfBricks; i++) {

                const width = Math.random() * 0.5 + 0.5; // Between 0.5 and 1

                const depth = Math.random() * 0.5 + 0.5; // Between 0.5 and 1

                const height = 0.2; // Constant height to simplify the example

​

                const brick = createBrick(width, height, depth, Math.random() * 0xffffff);

                brick.position.x = (Math.random() - 0.5) * 20;

                brick.position.y = (Math.random() - 0.5) * 20;

                brick.position.z = (Math.random() - 0.5) * 20;

                brick.rotation.x = Math.random() * Math.PI;

                brick.rotation.y = Math.random() * Math.PI;

                scene.add(brick);

            }

        }

​

        function createBrick(width, height, depth, color) {

            const geometry = new THREE.BoxGeometry(width, height, depth);

            const material = new THREE.MeshPhongMaterial({ color: color });

            const brick = new THREE.Mesh(geometry, material);

​

            // Create studs for the top of the brick

            const studRadius = 0.1;

            const studHeight = 0.05;

            const studGeometry = new THREE.CylinderGeometry(studRadius, studRadius, studHeight, 32);

            const studMaterial = material;

​

            const studsPerRow = Math.floor(width / (2 * studRadius));

            const studsPerColumn = Math.floor(depth / (2 * studRadius));

​

            for (let i = 0; i < studsPerRow; i++) {

                for (let j = 0; j < studsPerColumn; j++) {

                    const stud = new THREE.Mesh(studGeometry, studMaterial);

                    stud.position.x = -width / 2 + studRadius + (i * width / studsPerRow);

                    stud.position.z = -depth / 2 + studRadius + (j * depth / studsPerColumn);

                    stud.position.y = height / 2 + studHeight / 2;

                    brick.add(stud);

                }

            }

​

            return brick;

        }

​

        function animate() {

            requestAnimationFrame(animate);

            renderer.render(scene, camera);

        }

​

        init();