Gunakan JavaScript untuk mencipta dan memaparkan model 3D dan kesan visual-tutorial js-php.cn

Gunakan JavaScript untuk mencipta dan memaparkan model 3D dan kesan visual

王林

Lepaskan： 2023-06-16 17:25:48

asal

2690 orang telah melayarinya

Dengan kemajuan teknologi yang berterusan, teknologi 3D digunakan secara meluas dalam pelbagai bidang. Dalam era Internet, reka bentuk dan paparan laman web juga perlu menggunakan teknologi 3D untuk menarik perhatian pengguna. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mencipta dan memaparkan model 3D dan kesan visual.

1. Gunakan perpustakaan Three.js untuk mencipta model 3D

Three.js ialah perpustakaan grafik 3D JavaScript berdasarkan WebGL. Ia membolehkan pembangun mencipta pelbagai adegan dan model 3D dengan mudah.

Kami boleh mencipta pemandangan 3D dengan memperkenalkan perpustakaan Three.js, seperti yang ditunjukkan di bawah:

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

Salin selepas log masuk

Kod di atas melaksanakan pemandangan 3D yang mudah dengan kiub hijau di dalamnya Boleh diseret dan diputar dengan tetikus.

Apabila mencipta model 3D, kita perlu mereka bentuk dan bahan setiap objek. Three.js menyediakan pelbagai geometri asas, seperti kiub, sfera, silinder, dll. Anda juga boleh menggunakan alatan reka bentuk bantuan komputer (CAD) untuk mencipta geometri tersuai.

Pada masa yang sama, kita juga perlu menetapkan bahan setiap objek. Three.js menyediakan banyak pilihan bahan, termasuk bahan asas, bahan berkilat, bahan zarah dan banyak lagi.

2. Gunakan CSS3DRenderer untuk mencipta kesan visual 3D CSS

Selain menggunakan WebGL untuk melaksanakan model 3D, anda juga boleh menggunakan CSS3DRenderer untuk mencipta kesan 3D CSS interaktif.

Apabila menggunakan CSS3DRenderer, kita perlu mencipta struktur HTML yang sepadan dahulu dan kemudian menukarnya kepada elemen 3D CSS. Contohnya, kod berikut mencipta kesan pancuran meteor 3D CSS:

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

Salin selepas log masuk

Kod di atas melaksanakan kesan pancuran meteor. Dalam CSS3DRenderer, kami menggunakan gaya CSS untuk mereka bentuk kesan visual elemen dan menggunakan CSS3DObject untuk menukarnya kepada elemen 3D untuk mencapai kesan 3D.

3. Kesimpulan

Menggunakan JavaScript untuk melaksanakan model 3D dan kesan visual boleh memudahkan kami melaksanakan reka bentuk web yang diperibadikan. Three.js dan CSS3DRenderer ialah alat yang berkuasa untuk mencapai kesan 3D dan kami boleh menggabungkannya secara bebas untuk mencipta kesan visual yang lebih unik.

Atas ialah kandungan terperinci Gunakan JavaScript untuk mencipta dan memaparkan model 3D dan kesan visual. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!