← Mike Higgins Home
Custom Code Experiment •

Snub Dodecahedron

Source Code View HTML / CSS / JavaScript
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <style>body{margin:0;overflow:hidden;}</style>
</head>
<body>
    <script>
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(45, innerWidth/innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(innerWidth, innerHeight);
        document.body.appendChild(renderer.domElement);

        scene.add(new THREE.AmbientLight(0xffffff, 0.5));
        const light = new THREE.DirectionalLight(0xffffff, 0.8);
        light.position.set(10, 10, 5);
        scene.add(light);

        const group = new THREE.Group();

        const ico = new THREE.IcosahedronGeometry(2, 2);
        const icoMat = new THREE.MeshPhongMaterial({
            color: 0x2196f3,
            transparent: true,
            opacity: 0.7,
            wireframe: false
        });
        const icosahedron = new THREE.Mesh(ico, icoMat);
        group.add(icosahedron);

        const wireframe = new THREE.WireframeGeometry(ico);
        const wireMat = new THREE.LineBasicMaterial({color: 0xffffff, linewidth: 1});
        const wireframeMesh = new THREE.LineSegments(wireframe, wireMat);
        group.add(wireframeMesh);

        const sphereGeo = new THREE.SphereGeometry(0.1, 8, 8);
        const sphereMat = new THREE.MeshBasicMaterial({color: 0xff9800});
        const vertices = ico.attributes.position.array;
        for(let i = 0; i < vertices.length; i += 3) {
            const sphere = new THREE.Mesh(sphereGeo, sphereMat);
            sphere.position.set(vertices[i], vertices[i+1], vertices[i+2]);
            group.add(sphere);
        }

        scene.add(group);
        camera.position.z = 8;

        function animate() {
            requestAnimationFrame(animate);
            group.rotation.x += 0.005;
            group.rotation.y += 0.01;
            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>
</html>