JavaScript を使用して 3D モデルと視覚効果を作成および表示する

科学技術の進歩に伴い、3D技術はさまざまな分野で広く活用されています。インターネット時代では、ユーザーの注目を集めるために、Web サイトのデザインや表示にも 3D 技術を使用する必要があります。この記事では、JavaScript を使用して 3D モデルと視覚効果を作成および表示する方法を紹介します。

1. Three.js ライブラリを使用して 3D モデルを作成する

Three.js は、WebGL に基づいた JavaScript 3D グラフィック ライブラリです。これにより、開発者はさまざまな 3D シーンやモデルを簡単に作成できます。

以下に示すように、Three.js ライブラリを導入することで 3D シーンを作成できます:

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

上記のコードは、緑色の立方体が入った単純な 3D シーンを実装しています。マウスで回転させました。

3Dモデルを作成する際には、各オブジェクトの形状や素材を設計する必要があります。 Three.js は、立方体、球、円柱などのさまざまな基本的なジオメトリを提供します。コンピュータ支援設計 (CAD) ツールを使用してカスタム ジオメトリを作成することもできます。

同時に、各オブジェクトのマテリアルも設定する必要があります。 Three.js には、基本マテリアル、光沢マテリアル、パーティクル マテリアルなどを含む、多くのマテリアル オプションが用意されています。

2. CSS3DRenderer を使用して CSS 3D 視覚効果を作成する

WebGL を使用して 3D モデルを実装するだけでなく、CSS3DRenderer を使用してインタラクティブな CSS 3D 効果を作成することもできます。

CSS3DRenderer を使用する場合は、まず対応する HTML 構造を作成してから、それを CSS 3D 要素に変換する必要があります。たとえば、次のコードは 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>

上記のコードは、流星群エフェクトを実装します。 CSS3DRenderer では、CSS スタイルを使用して要素の視覚効果をデザインし、CSS3DObject を使用して要素を 3D 要素に変換して 3D 効果を実現します。

3. 結論

JavaScript を使用して 3D モデルと視覚効果を実装すると、パーソナライズされた Web デザインをより簡単に実装できます。 Three.js と CSS3DRenderer は 3D 効果を実現するための強力なツールであり、これらを自由に組み合わせて、よりユニークな視覚効果を作成できます。

以上がJavaScript を使用して 3D モデルと視覚効果を作成および表示するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。