procedural-scene-props

Procedural Low-Poly Scene Props

Use this skill when adding lightweight procedural props to a stylized 3D world without relying on a full art pipeline.

Pattern

Build small prop helper functions that accept a scene, name, position, and a few scale/color options. Each helper returns a root transform or mesh. Parent child meshes to the root so the prop can be moved, animated, hidden, or disposed as one object.

Good helper categories:

• rocks from irregular polyhedrons or scaled spheres
• trees from cylinder trunks and clustered leaf shapes
• steam, smoke, or mist from translucent spheres or planes
• vehicles from simple boxes/cylinders
• characters from cylinders, spheres, and small accessories
• terrain patches from flattened boxes or ground planes
• beacons and markers from simple emissive meshes

import { Color3, MeshBuilder, StandardMaterial, TransformNode, Vector3, type Scene } from '@babylonjs/core'

function makeMat(scene: Scene, name: string, color: string) {
  const material = new StandardMaterial(name, scene)
  material.diffuseColor = Color3.FromHexString(color)
  material.specularColor = Color3.Black()
  return material
}

export function addLowPolyTree(scene: Scene, name: string, position: Vector3, height = 1) {
  const root = new TransformNode(name, scene)
  root.position = position

  const trunk = MeshBuilder.CreateCylinder(`${name}-trunk`, { height: 1.1 * height, diameter: 0.18, tessellation: 6 }, scene)
  trunk.parent = root
  trunk.position.y = 0.55 * height
  trunk.material = makeMat(scene, `${name}-trunk-mat`, '#6b4a2f')

  for (let layer = 0; layer < 3; layer += 1) {
    const leaves = MeshBuilder.CreateSphere(`${name}-leaves-${layer}`, { diameter: 1.0 - layer * 0.18, segments: 8 }, scene)
    leaves.parent = root
    leaves.position.y = (1.15 + layer * 0.32) * height
    leaves.scaling = new Vector3(1, 0.55, 1)
    leaves.material = makeMat(scene, `${name}-leaf-mat-${layer}`, '#3f8f58')
  }

  root.getChildMeshes().forEach((mesh) => { mesh.isPickable = false })
  return root
}