Visualiseur de formes 3D : cube, sphère, triangle dans le navigateur

56 iroger7

Ouvrir dans l'éditeur Publiez votre code

Visualiseur de formes 3D : cube, sphère, triangle dans le navigateur

Recommandé

29 August 2025

Extrait d'animation de mémoire CSS

10 July 2025

Exemple d'écran de chargement animé CSS HTML

25 September 2025

Disposition de carte CSS avec arrière-plan dégradé

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>

Recommandé

Extrait d'animation de mémoire CSS

Exemple d'écran de chargement animé CSS HTML

Disposition de carte CSS avec arrière-plan dégradé

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS