3D Shape Viewer: Cube, Sphere, Triangle in Browser

827 iroger7

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3D Shape Viewer</title>
  <style>
    body {
      background: #282c34;
      color: #fff;
      font-family: sans-serif;
      text-align: center;
      margin: 0;
      padding: 0;
    }
    #viewer-container {
      width: 100vw;
      height: 80vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #controls {
      margin: 20px 0;
    }
    button {
      margin: 0 10px;
      padding: 12px 24px;
      font-size: 1.1em;
      border: none;
      border-radius: 6px;
      background: #61dafb;
      color: #222;
      cursor: pointer;
      transition: background 0.2s;
    }
    button:hover {
      background: #21a1f3;
      color: #fff;
    }
  </style>
</head>
<body>
  <h1>3D Shape Viewer</h1>
  <div id="controls">
    <button onclick="showShape('cube')">Cube</button>
    <button onclick="showShape('sphere')">Sphere</button>
    <button onclick="showShape('triangle')">Triangle</button>
    <button onclick="showShape('rhombus')">Rhombus</button>
  </div>
  <div id="viewer-container"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script>
  <script>
    let scene, camera, renderer, controls;
    let currentMesh = null;

function initViewer() {
      scene = new THREE.Scene();
      camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight*0.8, 0.1, 1000);
      renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
      renderer.setSize(window.innerWidth, window.innerHeight * 0.8);
      document.getElementById('viewer-container').appendChild(renderer.domElement);

// Lighting
      const ambient = new THREE.AmbientLight(0xffffff, 0.8);
      scene.add(ambient);
      const dirLight = new THREE.DirectionalLight(0xffffff, 0.6);
      dirLight.position.set(5, 10, 7);
      scene.add(dirLight);

camera.position.set(2.5, 2.5, 5);

controls = new THREE.OrbitControls(camera, renderer.domElement);
      controls.enableDamping = true;
      controls.dampingFactor = 0.1;

showShape('cube');
      animate();
    }

function clearShape() {
      if(currentMesh) {
        scene.remove(currentMesh);
        currentMesh.geometry.dispose();
        currentMesh.material.dispose();
        currentMesh = null;
      }
    }

function showShape(shape) {
      clearShape();
      let geometry, material;
      material = new THREE.MeshStandardMaterial({ color: 0x61dafb, flatShading: true, metalness: 0.2, roughness: 0.7 });

if (shape === 'cube') {
        geometry = new THREE.BoxGeometry(2, 2, 2);
      } else if (shape === 'sphere') {
        geometry = new THREE.SphereGeometry(1.5, 32, 24);
      } else if (shape === 'triangle') {
        // Tetrahedron (triangular pyramid)
        geometry = new THREE.TetrahedronGeometry(1.7);
      } else if (shape === 'rhombus') {
        // Rhombic prism: custom geometry
        geometry = new THREE.BufferGeometry();
        // Vertices for a rhombic prism
        const w = 1.5, h = 1.5, d = 0.6;
        const verts = new Float32Array([
          // Bottom face (rhombus)
          -w,    0, -d,
           0,   -h, -d,
           w,    0, -d,
           0,    h, -d,
          // Top face (rhombus)
          -w,    0,  d,
           0,   -h,  d,
           w,    0,  d,
           0,    h,  d,
        ]);
        // Faces
        const idx = [
          // bottom rhombus
          0, 1, 2,    0, 2, 3,
          // top rhombus
          4, 6, 5,    4, 7, 6,
          // sides
          0, 1, 5,    0, 5, 4,
          1, 2, 6,    1, 6, 5,
          2, 3, 7,    2, 7, 6,
          3, 0, 4,    3, 4, 7,
        ];
        geometry.setAttribute('position', new THREE.BufferAttribute(verts, 3));
        geometry.setIndex(idx);
        geometry.computeVertexNormals();
      }
      currentMesh = new THREE.Mesh(geometry, material);
      scene.add(currentMesh);
    }

function animate() {
      requestAnimationFrame(animate);
      controls.update();
      renderer.render(scene, camera);
    }

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

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

CSS

3D Shape Viewer: Cube, Sphere, Triangle in Browser

Recommended