Verwenden Sie JavaScript, um 3D-Modelle und visuelle Effekte zu erstellen und anzuzeigen

Mit der kontinuierlichen Weiterentwicklung der Technologie wird die 3D-Technologie in verschiedenen Bereichen häufig eingesetzt. Im Internetzeitalter muss bei der Gestaltung und Darstellung von Websites auch 3D-Technologie zum Einsatz kommen, um die Aufmerksamkeit der Benutzer zu erregen. In diesem Artikel wird erläutert, wie Sie mit JavaScript 3D-Modelle und visuelle Effekte erstellen und anzeigen.

1. Verwenden Sie die Three.js-Bibliothek, um 3D-Modelle zu erstellen.

Three.js ist eine JavaScript-3D-Grafikbibliothek, die auf WebGL basiert. Es ermöglicht Entwicklern die einfache Erstellung verschiedener 3D-Szenen und -Modelle.

Wir können eine 3D-Szene erstellen, indem wir die Three.js-Bibliothek einführen, wie unten gezeigt:

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

Der obige Code implementiert eine einfache 3D-Szene. In der Szene befindet sich ein grüner Würfel, der mit der Maus gezogen und gedreht werden kann. .

Beim Erstellen eines 3D-Modells müssen wir die Form und das Material jedes Objekts entwerfen. Three.js bietet eine Vielzahl grundlegender Geometrien wie Würfel, Kugeln, Zylinder usw. Sie können auch CAD-Tools (Computer Aided Design) verwenden, um benutzerdefinierte Geometrien zu erstellen.

Gleichzeitig müssen wir auch das Material jedes Objekts festlegen. Three.js bietet viele Materialoptionen, darunter Grundmaterialien, glänzende Materialien, Partikelmaterialien und mehr.

2. Verwenden Sie CSS3DRenderer, um visuelle CSS-3D-Effekte zu erstellen.

Zusätzlich zur Verwendung von WebGL zum Implementieren von 3D-Modellen können Sie CSS3DRenderer auch zum Erstellen interaktiver CSS-3D-Effekte verwenden.

Bei der Verwendung von CSS3DRenderer müssen wir zunächst die entsprechende HTML-Struktur erstellen und diese dann in CSS-3D-Elemente konvertieren. Der folgende Code erstellt beispielsweise einen CSS-3D-Meteorschauereffekt:

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

Der obige Code implementiert einen Meteorschauereffekt. In CSS3DRenderer verwenden wir CSS-Stile, um die visuellen Effekte von Elementen zu entwerfen, und verwenden CSS3DObject, um sie in 3D-Elemente umzuwandeln, um 3D-Effekte zu erzielen.

3. Fazit

Die Verwendung von JavaScript zur Implementierung von 3D-Modellen und visuellen Effekten kann es uns erleichtern, personalisiertes Webdesign zu erreichen. Three.js und CSS3DRenderer sind leistungsstarke Tools zum Erzielen von 3D-Effekten, und wir können sie frei kombinieren, um einzigartigere visuelle Effekte zu erzielen.

Das obige ist der detaillierte Inhalt vonVerwenden Sie JavaScript, um 3D-Modelle und visuelle Effekte zu erstellen und anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!