{
  "id": 19670490,
  "title": "Making three.js bricks look like real LEGO: studio light, hollow undersides and a real wooden table",
  "url": "https://urgent.news/2026/11/12/making-three-js-bricks-look-like-real-lego-studio-light-hollow",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-11-12T16:00:00.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/misterblocks/making-threejs-bricks-look-like-real-lego-studio-light-hollow-undersides-and-a-real-wooden-table-2h4"
  },
  "original_language": "en",
  "account": "To create realistic LEGO bricks using three.js, a studio-like lighting setup is essential. This involves using an environment map of a soft grey room with a softbox overhead and side strip lights. The reflection of this light on the ABS plastic bricks results in a gentle sheen on the tops and highlights along every edge. Additionally, color space is crucial; colors must be picked in sRGB, converted to linear for rendering, and then converted back to sRGB when displayed. Failure to follow these steps can lead to muddy colors. Another important aspect is placing the model on a real table, preferably made of wood. This ground makes the image appear more tangible as opposed to a model floating in a blue void. The table is a top-down photo of the actual wooden table, scaled to fit 1,125 pixels equaling 34 studs (27 cm), and mirrored to eliminate seams. A dark patch under the model grounds it, while the sun's shadow is tightly fitted around the model for a sharp shadow at the point of contact and a soft shadow further out. The model's underside is drawn to look like real LEGO geometry, with hollow tubes and pins for certain sizes. This feature distinguishes bricks from stacks of plates or tiles. Geometry is optimized by sharing the same geometry for pieces of the same size and computing outlines only once per size. Covered studs are only drawn when necessary, and each piece has its own mesh. When a piece is in the process of being added, it is not drawn until its corresponding step. This optimization ensures smooth performance even for models with over 1,300 pieces. Furthermore, small details such as instant piece drops, instant slider adjustments, and smooth animations contribute to a realistic and enjoyable user experience.",
  "summary": "The first 3D viewer on Mister Blocks drew bricks as coloured boxes with little cylinders on top. It was technically correct and looked like a spreadsheet. Kids building from instructions need to recognise the piece in their hand, so I spent a surprising amount of time making three.js bricks look like real plastic. Here's what made the difference, roughly from biggest to smallest. Tesla…",
  "key_points": [
    "Use studio lighting with softbox and side strip lights for realistic sheen and highlights",
    "Place model on real wooden table to enhance tangibility and avoid blue void",
    "Optimize geometry by sharing same pieces, computing outlines once per size"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}