I Built a 3D Data Museum for NetSuite Using Three.js

Imagine walking through your NetSuite data like exploring a museum. Invoices as floating documents, customers as spheres sized by their transaction volume, and business departments as distinct zones you can navigate through. This isn't science fiction — it's a proof of concept I built to see if it was possible.

Try the live demo →

Why 3D Visualization for NetSuite Data?

Traditional dashboards and reports, while functional, often fail to reveal the spatial relationships and patterns hidden in business data. When you can walk through your data, you gain intuitive insights that flat charts can't provide.

• Invoices become 3D objects you can examine from all angles
• Customers are represented as spheres — larger spheres mean more transactions
• Sections are spatial zones with distinct visual identities
• Relationships between data points become immediately visible

Technical Implementation: Three.js Meets NetSuite

Core Scene Setup

const zones = {
    paid:     { x: -20, z: -20, width: 18, depth: 18, color: 0x004400 },
    pending:  { x:   8, z: -20, width: 18, depth: 18, color: 0x442200 },
    overdue:  { x: -20, z:   8, width: 18, depth: 18, color: 0x440000 },
    customers:{ x:   8, z:   8, width: 18, depth: 18, color: 0x000044 }
}

scene = new THREE.Scene()
scene.background = new THREE.Color(0x001122)

camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(0, 12, 25)

renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.shadowMap.enabled = true
renderer.shadowMap.type = THREE.PCFSoftShadowMap

Mapping NetSuite Data to 3D Objects

Each data type gets its own geometry. Invoices become flat box geometries. Customers become spheres scaled by transaction count:

function createDataObjects(data) {
    data.forEach((item) => {
        let geometry

        if (item.type === 'invoice') {
            geometry = new THREE.BoxGeometry(1, 1.5, 0.1)
        } else if (item.type === 'customer') {
            const radius = minRadius + (normalizedCount * (maxRadius - minRadius))
            geometry = new THREE.SphereGeometry(radius, 8, 6)
        }

        const material = new THREE.MeshPhongMaterial({
            color: item.color,
            transparent: true,
            opacity: 0.8
        })

        scene.add(new THREE.Mesh(geometry, material))
    })
}

Connecting to Real NetSuite Data via SuiteScript

The demo uses sample data, but in a production implementation this would run as a Suitelet querying live records:

SELECT
    t.id,
    t.tranid,
    e.entityid AS customer_name,
    t.foreigntotal,
    t.trandate,
    BUILTIN.DF(t.status) AS status_text
FROM transaction t
LEFT JOIN entity e ON t.entity = e.id
WHERE t.recordtype = 'invoice'

The Suitelet queries NetSuite via N/query, transforms the results into 3D-ready JSON structures, and serves the Three.js visualization as a custom HTML page. No external hosting required.

Real-World Applications

Executive dashboards — C-level taking virtual tours of financial health, walking through departments and spotting problem areas at a glance.

AR aging — Accountants exploring invoice aging in 3D space, with overdue payments immediately visible by color zone and position.

Customer portfolio — Sales navigating their accounts with larger spheres indicating higher-value customers requiring attention.

Warehouse management — Visualizing bin locations in 3D, with items sized by value and colored by priority.

Source Code

The complete source code is available on GitHub:

View on GitHub →

Honest Take

When I first started building this I wasn't sure if it would be useful or just look cool. But after walking through the virtual zones and seeing customers as appropriately-sized spheres, something clicked.

This isn't about making reports prettier. It's about changing how we interact with ERP data. The NetSuite ecosystem is powerful but stuck in grids and charts. This proof of concept shows there's another direction worth exploring.