3डी आकार दृश्य: घन, गोला, त्रिभुज, समचतुर्भुज

अनुशंसित

11 December 2025

नियंत्रणों के साथ Three.js कण आकार मॉर्फिंग

HTML

<!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>

3डी आकार दृश्य: घन, गोला, त्रिभुज, समचतुर्भुज

अनुशंसित

3डी क्यूब एचटीएमएल व्यूअर

3डी हेडफ़ोन

नियंत्रणों के साथ Three.js कण आकार मॉर्फिंग

HTML

CSS

JS

अनुशंसित

3डी क्यूब एचटीएमएल व्यूअर

3डी हेडफ़ोन

नियंत्रणों के साथ Three.js कण आकार मॉर्फिंग

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS