Utilisez JavaScript pour créer et afficher des modèles 3D et des effets visuels

Avec les progrès continus de la technologie, la technologie 3D est largement utilisée dans divers domaines. À l'ère d'Internet, la conception et l'affichage des sites Web doivent également utiliser la technologie 3D pour attirer l'attention des utilisateurs. Cet article explique comment utiliser JavaScript pour créer et afficher des modèles 3D et des effets visuels.

1. Utilisez la bibliothèque Three.js pour créer des modèles 3D

Three.js est une bibliothèque graphique 3D JavaScript basée sur WebGL. Il permet aux développeurs de créer facilement diverses scènes et modèles 3D.

Nous pouvons créer une scène 3D en introduisant la bibliothèque Three.js, comme indiqué ci-dessous :

<script src="https://cdn.jsdelivr.net/npm/three@0.110.0/build/three.min.js"></script>

<div id="scene"></div>

<script>
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.getElementById('scene').appendChild(renderer.domElement);

  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  camera.position.z = 5;

  function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
  }
  animate();
</script>

Le code ci-dessus implémente une scène 3D simple. Il y a un cube vert dans la scène qui peut être déplacé et tourné avec la souris. .

Lors de la création d'un modèle 3D, nous devons concevoir la forme et le matériau de chaque objet. Three.js fournit une variété de géométries de base, telles que des cubes, des sphères, des cylindres, etc. Vous pouvez également utiliser des outils de conception assistée par ordinateur (CAO) pour créer des géométries personnalisées.

En même temps, nous devons également définir le matériau de chaque objet. Three.js propose de nombreuses options de matériaux, notamment des matériaux de base, des matériaux brillants, des matériaux particulaires, etc.

2. Utilisez CSS3DRenderer pour créer des effets visuels CSS 3D

En plus d'utiliser WebGL pour implémenter des modèles 3D, vous pouvez également utiliser CSS3DRenderer pour créer des effets 3D CSS interactifs.

Lors de l'utilisation de CSS3DRenderer, nous devons d'abord créer la structure HTML correspondante, puis la convertir en éléments CSS 3D. Par exemple, le code suivant crée un effet de pluie de météores CSS 3D :

<script src="https://cdn.jsdelivr.net/npm/three@0.110.0/build/three.min.js"></script>

<div id="container"></div>

<script>
  // 创建3D场景
  const scene = new THREE.Scene();

  // 创建相机
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 300;

  // 创建渲染器
  const renderer = new THREE.CSS3DRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.getElementById('container').appendChild(renderer.domElement);

  // 创建流星元素
  const divs = [];
  for (let i = 0; i < 50; i++) {
    const div = document.createElement('div');
    div.style.width = '10px';
    div.style.height = '10px';
    div.style.background = 'white';
    div.style.borderRadius = '50%';
    div.style.opacity = '0';
    document.body.appendChild(div);

    const object = new THREE.CSS3DObject(div);
    object.position.set(Math.random() * window.innerWidth - window.innerWidth / 2, Math.random() * window.innerHeight - window.innerHeight / 2, -Math.random() * 500);
    scene.add(object);

    divs.push(object);
  }

  // 动画效果
  const animate = () => {
    requestAnimationFrame(animate);

    divs.forEach((div) => {
      if (div.position.z > 0) {
        div.position.set(Math.random() * window.innerWidth - window.innerWidth / 2, Math.random() * window.innerHeight - window.innerHeight / 2, -Math.random() * 500);
        div.element.style.opacity = '0';
      }
      div.position.z += 10;
      div.rotation.z += Math.PI / 50;
      div.element.style.opacity = Number(div.element.style.opacity) + 0.02;
    });

    renderer.render(scene, camera);
  };

  animate();
</script>

Le code ci-dessus implémente un effet de pluie de météores. Dans CSS3DRenderer, nous utilisons des styles CSS pour concevoir les effets visuels des éléments et utilisons CSS3DObject pour les convertir en éléments 3D afin d'obtenir des effets 3D.

3. Conclusion

L'utilisation de JavaScript pour implémenter des modèles 3D et des effets visuels peut nous permettre de réaliser plus facilement une conception Web personnalisée. Three.js et CSS3DRenderer sont des outils puissants pour obtenir des effets 3D, et nous pouvons les combiner librement pour créer des effets visuels plus uniques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!