Dashboard

Edit "spinning-fun"

Slug

URL-friendly identifier (a-z, 0-9, -, _).

Description

HTML or React Content

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rotating Voxel Sphere with See-Through Wireframe in Three.js</title>
    <style>
        body { margin: 0; overflow: hidden; background-color: #000; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three@0.167.1/build/three.module.js?module",
                "three/addons/": "https://unpkg.com/three@0.167.1/examples/jsm/"
            }
        }
    </script>
    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// Scene setup
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

// Add fog for immersion effect (distant parts fade to black)
        scene.fog = new THREE.Fog(0x000000, 3, 10);

// Group for the sphere
        const sphereGroup = new THREE.Group();

// Parameters: diameter ~5 cubes, so radius ~2.5
        const radius = 2.5;
        const cubeSize = 1;
        const min = -Math.floor(radius);
        const max = Math.floor(radius);

// Create voxel cubes for the sphere
        const geometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
        for (let x = min; x <= max; x++) {
            for (let y = min; y <= max; y++) {
                for (let z = min; z <= max; z++) {
                    const dist = Math.sqrt(x*x + y*y + z*z);
                    if (dist <= radius) {
                        // Color dimmer based on distance from center (further from center = dimmer)
                        const brightness = 1 - (dist / radius) * 0.7; // Adjust 0.7 for dimming strength
                        const color = new THREE.Color(0x00ffff).multiplyScalar(brightness); // Neon cyan, dimmed
                        
                        // Semi-transparent solid material for see-through effect
                        const solidMaterial = new THREE.MeshBasicMaterial({
                            color: color,
                            transparent: true,
                            opacity: 0.3 // Low opacity to allow seeing inner cubes
                        });
                        const cube = new THREE.Mesh(geometry, solidMaterial);
                        cube.position.set(x * cubeSize, y * cubeSize, z * cubeSize);
                        sphereGroup.add(cube);

// Plus wireframe for futuristic outline
                        const edges = new THREE.EdgesGeometry(geometry);
                        const lineMaterial = new THREE.LineBasicMaterial({ color: color }); // Dimmed wireframe to match
                        const lines = new THREE.LineSegments(edges, lineMaterial);
                        lines.position.copy(cube.position);
                        sphereGroup.add(lines);
                    }
                }
            }
        }
        scene.add(sphereGroup);

// Add a point light for additional depth
        const light = new THREE.PointLight(0xffffff, 1, 100);
        light.position.set(10, 10, 10);
        scene.add(light);

// Camera position
        camera.position.z = 8; // Further back to view the larger sphere

// Orbit controls for manual rotation
        const controls = new OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.05;

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

// Animation loop with auto-rotation
        function animate() {
            requestAnimationFrame(animate);

// Auto-rotate the sphere group
            sphereGroup.rotation.x += 0.005;
            sphereGroup.rotation.y += 0.01;

controls.update();
            renderer.render(scene, camera);
        }

animate();
    </script>
</body>
</html>

Paste raw HTML or kick off with a React component (first line referencing React) and we'll scaffold the render call automatically.

Cancel