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>