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

707 iroger7

Ouvrir dans l'éditeur Publiez votre code

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

Recommandé

30 September 2025

Animation de sphère CSS avec effets de survol

26 December 2024

Un code par efficientcloud646

30 November 2025

Formulaire de connexion HTML (français)

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>

CSS