Visualizzatore di forme 3D: cubo, sfera, triangolo nel browser

325 iroger7

Apri nell'Editor Video Pubblica il Tuo Codice

Visualizzatore di forme 3D: cubo, sfera, triangolo nel browser

Consigliato

24 April 2025

Un codice di Metehan

18 December 2025

Codice di incorporamento del gioco HTML5 BitLife Life Simulator

27 September 2025

Sfondo animato CSS con forme e testo

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>

Consigliato

Un codice di Metehan

Codice di incorporamento del gioco HTML5 BitLife Life Simulator

Sfondo animato CSS con forme e testo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS