{"id":14,"date":"2026-01-29T14:38:55","date_gmt":"2026-01-29T14:38:55","guid":{"rendered":"https:\/\/highdensityengineering.com\/?page_id=14"},"modified":"2026-09-08T00:57:18","modified_gmt":"2026-09-08T00:57:18","slug":"home","status":"publish","type":"page","link":"https:\/\/highdensityengineering.com\/","title":{"rendered":"Home"},"content":{"rendered":"<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>High Density Engineering \u2014 Games, Apps &amp; Software<\/title>\n<meta name=\"description\" content=\"Independent software, web apps, games and digital downloads from High Density Engineering.\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&amp;family=JetBrains+Mono:wght@400;600&amp;display=swap\" rel=\"stylesheet\">\n<meta name=\"monetag\" content=\"d844fb3de1e0fb2f614d0ba9365c1c89\">\n\n<style>\n    body,html,#page,#content,.site,.site-content,.entry-content,.page,\n    article,main,.wp-block-group,div[class*=\"container\"],\n    div[class*=\"wrapper\"],.hfeed {\n        margin:0 !important; padding:0 !important;\n        max-width:100% !important; width:100% !important;\n        box-sizing:border-box !important;\n    }\n    .header,header,[class*=\"header\"] {\n        width:100% !important; max-width:100% !important;\n        margin-left:0 !important; margin-right:0 !important;\n    }\nbody {\n    margin: 0;\n    font-family: 'Inter', sans-serif;\n    background-color: #000; \/* Dark background for better visibility *\/\n    color: #fff;\n}\n.static-bg {\n    position: fixed;\n    inset: 0;\n    z-index: -1;\n    background: #000;\n    overflow: hidden;\n}\n\n.static-bg::before {\n    content: \"\";\n    position: absolute;\n    inset: -100%;\n\n    background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'\/%3E%3C\/svg%3E\");\n\n    opacity: 0.32;\n    animation: staticNoise 0.12s steps(2) infinite;\n    pointer-events: none;\n    filter: contrast(1.5) brightness(0.7);\n}\n\n@keyframes staticNoise {\n    0% {\n        transform: translate(0, 0);\n    }\n\n    20% {\n        transform: translate(3%, -2%);\n    }\n\n    40% {\n        transform: translate(-2%, 3%);\n    }\n\n    60% {\n        transform: translate(2%, 2%);\n    }\n\n    80% {\n        transform: translate(-3%, -1%);\n    }\n\n    100% {\n        transform: translate(0, 0);\n    }\n}\n\n#model-container {\n    width: 100%;\n    height: 500px;\n    margin: 30px 0;\n    padding: 10px 0 10px 0;\n    position: relative;\n    background-color: transparent; \/* Dark background so we can see it *\/\n}\n\n#model-container canvas {\n    display: block;\n    width: 100% !important;\n    height: 100% !important;\n}\n\ncanvas {\n    background: transparent !important;\n}\n\n.loading-indicator {\n    position: relative;\n    color: var(--accent-cyan);\n    font-size: 1.2rem;\n    text-align: center;\n    z-index: 10;\n}\n\n.loading-spinner {\n    width: 50px;\n    height: 50px;\n    border: 4px solid rgba(177, 255, 154, 0.2);\n    border-top: 4px solid var(--accent-cyan);\n    border-radius: 50%;\n    animation: spin 1s linear infinite;\n    margin: 10% auto 10%;\n}\n<\/style>\n\n    <div class=\"static-bg\"><\/div>\n    <div id=\"model-container\">\n        <div class=\"loading-indicator\">\n            <div class=\"loading-spinner\"><\/div>\n            <div>Loading 3D Model&#8230;<\/div>\n        <\/div>\n    <\/div>\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/loaders\/GLTFLoader.js\"><\/script>\n    <script>\n        \/\/ Wait for DOM to be ready\n        document.addEventListener('DOMContentLoaded', function() {\n            console.log('DOM loaded, starting 3D viewer setup...');\n            \n            const container = document.getElementById('model-container');\n            console.log('Container found:', container);\n            console.log('Container dimensions:', container.clientWidth, 'x', container.clientHeight);\n            \n            if (!container) {\n                console.error('ERROR: model-container not found!');\n                return;\n            }\n            \n            if (container.clientWidth === 0 || container.clientHeight === 0) {\n                console.error('ERROR: Container has no size!');\n                return;\n            }\n            \n            \/\/ Scene Setup\n            const scene = new THREE.Scene();\n            console.log('Scene created');\n            \n            const camera = new THREE.PerspectiveCamera(\n                75, \n                container.clientWidth \/ container.clientHeight, \n                1, \n                1000\n            );\n            console.log('Camera created');\n            \n            const renderer = new THREE.WebGLRenderer({ \n                antialias: true,\n                alpha: true,\n                powerPreference: 'high-performance'\n            });\n            renderer.setSize(container.clientWidth, container.clientHeight);\n            renderer.setPixelRatio(window.devicePixelRatio); \/\/ Use device pixel ratio for sharper rendering\n            renderer.shadowMap.enabled = true;\n            renderer.shadowMap.type = THREE.PCFSoftShadowMap;\n            container.appendChild(renderer.domElement);\n            console.log('Renderer created with high quality settings');\n            console.log('Canvas element:', renderer.domElement);\n\n            \/\/ Lighting - Multiple lights from different angles\n            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);\n            scene.add(ambientLight);\n            console.log('Ambient light added');\n            \n            \/\/ Front light (from camera direction)\n            const frontLight = new THREE.DirectionalLight(0xffffff, 0.8);\n            frontLight.position.set(0, 0, 10);\n            scene.add(frontLight);\n            \n            \/\/ Top light\n            const topLight = new THREE.DirectionalLight(0xffffff, 0.6);\n            topLight.position.set(0, 10, 0);\n            scene.add(topLight);\n            \n            \/\/ Back light (rim lighting)\n            const backLight = new THREE.DirectionalLight(0x00fff2, 0.4);\n            backLight.position.set(0, 0, -10);\n            scene.add(backLight);\n            \n            \/\/ Side lights\n            const leftLight = new THREE.DirectionalLight(0xb1ff9a, 0.3);\n            leftLight.position.set(-10, 0, 0);\n            scene.add(leftLight);\n            \n            const rightLight = new THREE.DirectionalLight(0xb1ff9a, 0.3);\n            rightLight.position.set(-10, 0, 0);\n            scene.add(rightLight);\n            \n            console.log('All lights added');\n\n            \/\/ Loading the GLB File (textures baked in)\n            const loader = new THREE.GLTFLoader();\n            \n            \/\/ Get loading indicator\n            const loadingIndicator = container.querySelector('.loading-indicator');\n            \n            console.log('Starting to load GLB...');\n            \n            loader.load(\n                '\/HDE\/public\/img\/Meshy_AI_Dead_Rats_0418185502_texture.glb',\n                function(gltf) {\n                    console.log('GLB loaded successfully!', gltf);\n                    \n                    const object = gltf.scene;\n                    \n                    \/\/ Hide loading indicator and show canvas\n                    if (loadingIndicator) {\n                        loadingIndicator.style.display = 'none';\n                    }\n                    renderer.domElement.style.display = 'block';\n                    \n                    \/\/ GLB already has materials and textures baked in, just enhance them\n                    object.traverse(function(child) {\n                        if (child instanceof THREE.Mesh) {\n                            \/\/ Enhance existing materials for better rendering\n                            if (child.material) {\n                                child.material.metalness = 0.3;  \/\/ Less shiny\n                                child.material.roughness = 0.8;  \/\/ More matte\n                            }\n                            child.castShadow = true;\n                            child.receiveShadow = true;\n                        }\n                    });\n                    \n                    \/\/ Scale the model 8x larger (doubled from 4x)\n                    object.scale.set(8, 8, 8);\n                    \n                    \/\/ NOW calculate bounding box and center (after scaling)\n                    const box = new THREE.Box3().setFromObject(object);\n                    const center = new THREE.Vector3();\n                    const size = new THREE.Vector3();\n                    box.getCenter(center);\n                    box.getSize(size);\n                    \n                    \/\/ Center the object at origin for proper rotation\n                    object.position.sub(center);\n\n                    \/\/ Position camera to center the model in view\n                    const maxDim = Math.max(size.x, size.y, size.z);\n                    const fov = camera.fov * (Math.PI \/ 180);\n                    let cameraZ = Math.abs(maxDim \/ 2 \/ Math.tan(fov \/ 2));\n                    cameraZ *= 1.25; \/\/ Reduced multiplier so larger model appears bigger\n                    \n                    camera.position.set(0, 0, cameraZ);\n                    camera.lookAt(0, 0, 0);\n                    camera.updateProjectionMatrix();\n                    \n                    console.log('Camera positioned at z:', cameraZ);\n\n                    scene.add(object);\n                    \n                    \/\/ Mouse interaction variables\n                    let isDragging = false;\n                    let previousMousePosition = { x: 0, y: 0 };\n                    \n                    \/\/ Mouse down\n                    container.addEventListener('mousedown', function(e) {\n                        isDragging = true;\n                        previousMousePosition = {\n                            x: e.clientX,\n                            y: e.clientY\n                        };\n                    });\n                    \n                    \/\/ Mouse move\n                    container.addEventListener('mousemove', function(e) {\n                        if (isDragging) {\n                            const deltaX = e.clientX - previousMousePosition.x;\n                            const deltaY = e.clientY - previousMousePosition.y;\n                            \n                            object.rotation.y += deltaX * 0.01;\n                            object.rotation.x += deltaY * 0.01;\n                            \n                            previousMousePosition = {\n                                x: e.clientX,\n                                y: e.clientY\n                            };\n                        }\n                    });\n                    \n                    \/\/ Mouse up\n                    container.addEventListener('mouseup', function() {\n                        isDragging = false;\n                    });\n                    \n                    \/\/ Mouse leave\n                    container.addEventListener('mouseleave', function() {\n                        isDragging = false;\n                    });\n                    \n                    \/\/ \/\/ Mouse wheel zoom\n                    \/\/ container.addEventListener('wheel', function(e) {\n                    \/\/     e.preventDefault();\n                    \/\/     const zoomSpeed = 0.1;\n                    \/\/     camera.position.z += e.deltaY * zoomSpeed;\n                    \/\/     \/\/ Limit zoom distance\n                    \/\/     camera.position.z = Math.max(2, Math.min(50, camera.position.z));\n                    \/\/ });\n                    \n                    console.log('Mouse controls enabled: drag to rotate, scroll to zoom');\n                    \n                    \/\/ Auto-rotate when not dragging\n                    function animate() {\n                        requestAnimationFrame(animate);\n                        \n                        \/\/ Removed auto-rotation - only manual drag now\n                        \n                        renderer.render(scene, camera);\n                    }\n                    animate();\n                },\n                function(xhr) {\n                    console.log('GLB loading progress: ' + (xhr.loaded \/ xhr.total * 100) + '% loaded');\n                },\n                function(error) {\n                    console.error('Error loading GLB file:', error);\n                    console.log('Check that the file path is correct: \/HDE\/public\/img\/Meshy_AI_Dead_Rats_0418185502_texture.glb');\n                }\n            );\n\n            \/\/ Handle window resizing\n            window.addEventListener('resize', function() {\n                camera.aspect = container.clientWidth \/ container.clientHeight;\n                camera.updateProjectionMatrix();\n                renderer.setSize(container.clientWidth, container.clientHeight);\n            });\n        });\n    <\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>High Density Engineering \u2014 Games, Apps &amp; Software Loading 3D Model&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"iawp_total_views":429,"footnotes":""},"class_list":["post-14","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/highdensityengineering.com\/index.php?rest_route=\/wp\/v2\/pages\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/highdensityengineering.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/highdensityengineering.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/highdensityengineering.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/highdensityengineering.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=14"}],"version-history":[{"count":5,"href":"https:\/\/highdensityengineering.com\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":787,"href":"https:\/\/highdensityengineering.com\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions\/787"}],"wp:attachment":[{"href":"https:\/\/highdensityengineering.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}