Build a 3D Data Visualization with Three.js and DenchClaw

Build a 3D data visualization app in DenchClaw using Three.js to render your CRM pipeline, deal network graph, or contact relationships in three dimensions.

Mark Rachapoom

March 26, 2026·6 min read

Build a 3D Data Visualization with Three.js and DenchClaw

Standard charts are fine. But sometimes your data has structure that 2D charts can't show: deal networks, contact relationship graphs, geographic pipeline distributions. Three.js runs in the browser and DenchClaw's App Builder gives it direct access to your CRM data — making 3D data visualization of your pipeline surprisingly straightforward.

This guide builds a 3D force-directed network graph showing contacts and their deal relationships, rendered with Three.js.

What You're Building#

3D force-directed graph with contacts as spheres and deals as connecting edges
Node size proportional to deal value
Color coding: lead (blue), qualified (green), customer (gold)
Interactive: click a node to see contact details
Mouse orbit controls to rotate and zoom

Step 1: App Setup#

mkdir -p ~/.openclaw-dench/workspace/apps/3d-data-viz.dench.app

.dench.yaml:

name: 3D Pipeline Viz
description: Three.js 3D visualization of contacts and deals
icon: box
version: 1.0.0
permissions:
  - read:crm
display: tab

Step 2: HTML with Three.js#

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3D Pipeline Viz</title>
  <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/examples/js/controls/OrbitControls.js"></script>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { background: #050a15; overflow: hidden; }
    canvas { display: block; }
    #tooltip {
      position: fixed;
      background: rgba(15, 23, 42, 0.95);
      border: 1px solid #334155;
      border-radius: 10px;
      padding: 12px 16px;
      color: #e2e8f0;
      font-family: system-ui, sans-serif;
      font-size: 13px;
      pointer-events: none;
      display: none;
      max-width: 220px;
      backdrop-filter: blur(8px);
    }
    #legend {
      position: fixed;
      top: 16px;
      left: 16px;
      background: rgba(15, 23, 42, 0.8);
      border: 1px solid #334155;
      border-radius: 10px;
      padding: 12px;
      color: #94a3b8;
      font-family: system-ui, sans-serif;
      font-size: 12px;
      backdrop-filter: blur(8px);
    }
    .legend-item { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
    .legend-dot { width: 10px; height: 10px; border-radius: 50%; }
    #loading { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #64748b; font-family: system-ui; font-size: 14px; }
  </style>
</head>
<body>
  <div id="tooltip"></div>
  <div id="legend">
    <div class="legend-item"><div class="legend-dot" style="background:#6366f1"></div>Lead</div>
    <div class="legend-item"><div class="legend-dot" style="background:#10b981"></div>Qualified</div>
    <div class="legend-item"><div class="legend-dot" style="background:#f59e0b"></div>Customer</div>
    <div class="legend-item"><div class="legend-dot" style="background:#334155"></div>Deal edge</div>
    <div style="color:#475569;font-size:11px;margin-top:8px">Drag to orbit · Scroll to zoom</div>
  </div>
  <div id="loading">Loading CRM data...</div>
  <script src="viz.js"></script>
</body>
</html>

Step 3: Three.js Visualization#

viz.js:

// Scene setup
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x050a15);
scene.fog = new THREE.Fog(0x050a15, 200, 600);
 
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 150);
 
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// Lighting
scene.add(new THREE.AmbientLight(0x334155, 0.6));
const pointLight = new THREE.PointLight(0x6366f1, 1.5, 300);
pointLight.position.set(0, 50, 50);
scene.add(pointLight);
const fillLight = new THREE.PointLight(0x10b981, 0.5, 300);
fillLight.position.set(-50, -30, -50);
scene.add(fillLight);
 
// Controls
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.minDistance = 30;
controls.maxDistance = 400;
 
// Raycaster for click detection
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
const nodeObjects = [];
const nodeData = {};
 
const STATUS_COLORS = {
  'Lead': 0x6366f1,
  'Qualified': 0x10b981,
  'Customer': 0xf59e0b,
  'default': 0x64748b
};
 
async function loadAndVisualize() {
  const [contacts, deals] = await Promise.all([
    dench.db.query(`SELECT id, "Full Name", "Status", "Company", "Email Address" FROM v_people LIMIT 80`),
    dench.db.query(`SELECT id, "Deal Name", "Contact", "Company", "Value", "Stage" FROM v_deals WHERE "Stage" NOT IN ('Closed Lost') LIMIT 50`)
  ]);
 
  document.getElementById('loading').style.display = 'none';
 
  // Position nodes randomly in 3D space using force simulation approximation
  const positions = {};
  contacts.forEach((c, i) => {
    const phi = Math.acos(-1 + (2 * i) / contacts.length);
    const theta = Math.sqrt(contacts.length * Math.PI) * phi;
    const r = 60 + Math.random() * 30;
    positions[c.id] = new THREE.Vector3(
      r * Math.cos(theta) * Math.sin(phi),
      r * Math.sin(theta) * Math.sin(phi),
      r * Math.cos(phi)
    );
  });
 
  // Draw contact nodes
  contacts.forEach(contact => {
    const color = STATUS_COLORS[contact.Status] || STATUS_COLORS.default;
    const geometry = new THREE.SphereGeometry(2.5, 16, 16);
    const material = new THREE.MeshPhongMaterial({
      color,
      emissive: color,
      emissiveIntensity: 0.2,
      transparent: true,
      opacity: 0.9
    });
    const sphere = new THREE.Mesh(geometry, material);
    sphere.position.copy(positions[contact.id]);
    sphere.userData.contactId = contact.id;
    scene.add(sphere);
    nodeObjects.push(sphere);
    nodeData[contact.id] = contact;
  });
 
  // Draw deal edges (lines connecting contact to their deals)
  deals.forEach(deal => {
    if (!deal.Contact || !positions[deal.Contact]) return;
    
    // Find related company node position (or use offset)
    const dealPos = positions[deal.Contact].clone().add(
      new THREE.Vector3(
        (Math.random() - 0.5) * 20,
        (Math.random() - 0.5) * 20,
        (Math.random() - 0.5) * 20
      )
    );
 
    // Draw edge line
    const points = [positions[deal.Contact], dealPos];
    const lineGeo = new THREE.BufferGeometry().setFromPoints(points);
    const lineMat = new THREE.LineBasicMaterial({ color: 0x334155, transparent: true, opacity: 0.4 });
    scene.add(new THREE.Line(lineGeo, lineMat));
 
    // Deal node (cube, sized by value)
    const value = Number(deal.Value || 0);
    const size = Math.max(1, Math.min(5, 1 + value / 20000));
    const dealGeo = new THREE.BoxGeometry(size, size, size);
    const dealMat = new THREE.MeshPhongMaterial({ color: 0x475569, emissive: 0x334155, emissiveIntensity: 0.3 });
    const dealMesh = new THREE.Mesh(dealGeo, dealMat);
    dealMesh.position.copy(dealPos);
    dealMesh.rotation.set(Math.random(), Math.random(), Math.random());
    dealMesh.userData.dealId = deal.id;
    dealMesh.userData.deal = deal;
    scene.add(dealMesh);
    nodeObjects.push(dealMesh);
  });
 
  // Add particle field background
  const particleCount = 300;
  const particleGeo = new THREE.BufferGeometry();
  const positions3 = new Float32Array(particleCount * 3);
  for (let i = 0; i < particleCount * 3; i++) positions3[i] = (Math.random() - 0.5) * 400;
  particleGeo.setAttribute('position', new THREE.BufferAttribute(positions3, 3));
  const particleMat = new THREE.PointsMaterial({ color: 0x1e293b, size: 0.8 });
  scene.add(new THREE.Points(particleGeo, particleMat));
}
 
// Tooltip on hover
renderer.domElement.addEventListener('mousemove', (e) => {
  mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  const hits = raycaster.intersectObjects(nodeObjects);
  const tooltip = document.getElementById('tooltip');
  
  if (hits.length > 0) {
    const obj = hits[0].object;
    renderer.domElement.style.cursor = 'pointer';
    let html = '';
    if (obj.userData.contactId) {
      const c = nodeData[obj.userData.contactId];
      html = `<strong>${c['Full Name'] || 'Unknown'}</strong><br>${c.Company || ''}<br><span style="color:#64748b">${c.Status} · ${c['Email Address'] || 'no email'}</span>`;
    } else if (obj.userData.deal) {
      const d = obj.userData.deal;
      html = `<strong>${d['Deal Name'] || 'Deal'}</strong><br>${d.Company || ''}<br><span style="color:#10b981">$${Number(d.Value || 0).toLocaleString()}</span> · ${d.Stage}`;
    }
    tooltip.innerHTML = html;
    tooltip.style.display = 'block';
    tooltip.style.left = (e.clientX + 16) + 'px';
    tooltip.style.top = (e.clientY - 10) + 'px';
  } else {
    renderer.domElement.style.cursor = 'default';
    tooltip.style.display = 'none';
  }
});
 
// Animation loop
function animate() {
  requestAnimationFrame(animate);
  controls.update();
  // Slowly rotate all deal nodes
  nodeObjects.filter(n => n.userData.dealId).forEach(n => { n.rotation.y += 0.005; });
  renderer.render(scene, camera);
}
 
// Handle resize
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});
 
loadAndVisualize();
animate();

Frequently Asked Questions#

Three.js OrbitControls isn't loading — how do I fix this?#

The OrbitControls import path changed in newer Three.js versions. For Three.js r160+, use the module version: import { OrbitControls } from 'three/addons/controls/OrbitControls.js'. If using CDN builds, match the version numbers exactly.

Can I visualize geographic data instead of a network graph?#

Yes. Three.js can render a globe (SphereGeometry mapped with a world texture) and plot contact locations as SphereGeometry nodes placed at latitude/longitude coordinates. Add a City or Country field to your contacts and map them geographically.