WIREFRAME_RENDERER

// Three.js r134 · WebGL · bootnet.io

:: ABOUT // README.md

A real-time WebGL background renderer built on Three.js r134. Features a rotating wireframe core with swappable platonic solid geometry (icosahedron, dodecahedron, octahedron, tetrahedron, cube, sphere), orbiting node network with proximity-based edge rendering, tilted torus rings, and a sparse particle field.

Designed as a lightweight ambient background — no textures, no shaders beyond the built-in WebGL materials. Everything runs in a single self-contained HTML file. Drag to rotate the scene. Use the settings panel to swap themes, shapes, and adjust speed and topology in real time.

:: USAGE // embed as background

Drop the canvas behind your content with three lines of CSS. The renderer targets a fixed-position canvas at z-index −1, leaving your page layout untouched on top.

<!-- 1. Add canvas target to your <body> -->
<canvas id="bg-canvas" style="position:fixed;top:0;left:0;
  width:100%;height:100%;z-index:-1;pointer-events:none"></canvas>

<!-- 2. Include Three.js (CDN) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>

<!-- 3. Body must be transparent so canvas shows through -->
<style>
  body { background: transparent; }
</style>

↓ THREE.JS R134 (CDN) ↓ FULL SOURCE FILE

:: RENDERER INIT // minimal setup

Minimal bootstrap to attach the renderer to an existing canvas element. Paste after your Three.js script tag and adjust colors to match your palette.

const canvas  = document.getElementById('bg-canvas');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x0c0a09, 1);   // background colour

const scene  = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(55, innerWidth/innerHeight, 0.1, 200);
camera.position.set(0, 0, 7);
scene.fog = new THREE.FogExp2(0x0c0a09, 0.042);

window.addEventListener('resize', () => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
});

(function loop() {
  requestAnimationFrame(loop);
  renderer.render(scene, camera);
})();

[ ← RETURN TO PROJECTS ]

// END_OF_FILE · EOF