mainpage

<div id="human-design-container" style="width: 100%; height: 500px;"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

<script>

document.addEventListener('DOMContentLoaded', function() {

  const container = document.getElementById('human-design-container');

  if (!container) return;

  // Check for WebGL support

  try {

    const canvas = document.createElement('canvas');

    const hasWebGL = !!(window.WebGLRenderingContext && 

      (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')));

    if (!hasWebGL) {

      container.innerHTML = `

        <div style="width:100%; height:100%; display:flex; align-items:center; justify-content:center; 

                  background:linear-gradient(to right, #4b0082, #00008b); color:white; padding:20px;">

          <div>

            <p>WebGL is not available on your browser.</p>

            <p style="margin-top:10px; font-size:0.8em; opacity:0.8;">Displaying gradient background instead.</p>

          </div>

        </div>

      `;

      return;

    }

  } catch (e) {

    // Handle error

  }

  try {

    // Scene setup

    const scene = new THREE.Scene();

    // Camera setup

    const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);

    camera.position.z = 5;

    // Renderer setup

    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });

    renderer.setSize(container.clientWidth, container.clientHeight);

    renderer.setClearColor(0x000000, 0);

    container.appendChild(renderer.domElement);

    // Create the human design model

    const group = new THREE.Group();

    // Center sphere

    const centerGeometry = new THREE.SphereGeometry(0.5, 32, 32);

    const centerMaterial = new THREE.MeshBasicMaterial({ color: 0x6a46d1, transparent: true, opacity: 0.9 });

    const centerSphere = new THREE.Mesh(centerGeometry, centerMaterial);

    group.add(centerSphere);

    // Nodes

    const nodePositions = [

      { x: 0, y: 2, z: 0 },    // Crown

      { x: 0, y: 1.2, z: 0 },  // Mind

      { x: 0, y: 0, z: 0 },    // Throat

      { x: -1, y: -0.5, z: 0 }, // Self

      { x: 1, y: -0.5, z: 0 },  // Heart

      { x: -1.2, y: -1.5, z: 0 }, // Solar Plexus

      { x: 1.2, y: -1.5, z: 0 },  // Sacral

      { x: 0, y: -2, z: 0 },    // Root

      { x: 0, y: -1, z: 0.5 },  // Spleen

    ];

    nodePositions.forEach((pos, index) => {

      const nodeGeometry = new THREE.SphereGeometry(0.2, 16, 16);

      const nodeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ffff, transparent: true, opacity: 0.8 });

      const node = new THREE.Mesh(nodeGeometry, nodeMaterial);

      node.position.set(pos.x, pos.y, pos.z);

      group.add(node);

      // Connections

      if (index > 0) {

        const prevPos = nodePositions[index - 1];

        const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.5 });

        const points = [new THREE.Vector3(pos.x, pos.y, pos.z), new THREE.Vector3(prevPos.x, prevPos.y, prevPos.z)];

        const lineGeometry = new THREE.BufferGeometry().setFromPoints(points);

        const line = new THREE.Line(lineGeometry, lineMaterial);

        group.add(line);

      }

      if (index > 2) {

        const centerPos = nodePositions[2];

        const centerLineMaterial = new THREE.LineBasicMaterial({ color: 0x8866ff, transparent: true, opacity: 0.3 });

        const centerPoints = [new THREE.Vector3(pos.x, pos.y, pos.z), new THREE.Vector3(centerPos.x, centerPos.y, centerPos.z)];

        const centerLineGeometry = new THREE.BufferGeometry().setFromPoints(centerPoints);

        const centerLine = new THREE.Line(centerLineGeometry, centerLineMaterial);

        group.add(centerLine);

      }

    });

    // Particles

    const particlesGeometry = new THREE.BufferGeometry();

    const particlesCount = 150;

    const posArray = new Float32Array(particlesCount * 3);

    for (let i = 0; i < particlesCount * 3; i++) {

      posArray[i] = (Math.random() - 0.5) * 7;

    }

    particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));

    const particlesMaterial = new THREE.PointsMaterial({ size: 0.02, color: 0xffffff, transparent: true, opacity: 0.6 });

    const particleMesh = new THREE.Points(particlesGeometry, particlesMaterial);

    scene.add(particleMesh);

    scene.add(group);

    scene.add(new THREE.AmbientLight(0xffffff, 1));

    // Animation

    function animate() {

      requestAnimationFrame(animate);

      group.rotation.y += 0.003;

      particleMesh.rotation.y += 0.001;

      renderer.render(scene, camera);

    }

    animate();

    // Handle resize

    window.addEventListener('resize', function() {

      camera.aspect = container.clientWidth / container.clientHeight;

      camera.updateProjectionMatrix();

      renderer.setSize(container.clientWidth, container.clientHeight);

    });

  } catch (err) {

    console.error('Error initializing 3D model:', err);

    container.innerHTML = `

      <div style="width:100%; height:100%; display:flex; align-items:center; justify-content:center; 

                background:linear-gradient(to right, #4b0082, #00008b); color:white; padding:20px;">

        <div>

          <p>An error occurred while initializing the 3D model.</p>

          <p style="margin-top:10px; font-size:0.8em; opacity:0.8;">Displaying gradient background instead.</p>

        </div>

      </div>

    `;

  }

});

</script>