three.js を使用してクールなアシッドスタイルの 3D ページ効果を実現します

シーン = 新しい THREE.Scene();

カメラ = 新しい THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
// カメラの位置を設定します。camera.position.set(600, 20, -200);
// カメラは画面の中央に焦点を合わせます camera.lookAt(new THREE.Vector3(0, 0, 0));

ライト = 新しい THREE.HemisphereLight(0xffffff, 0x444444);
ライトの位置を設定します(0, 20, 0);
シーンにライトを追加します。
ライト = 新しい THREE.DirectionalLight(0xffffff);
ライトの位置を設定します(0, 20, 10);
ライトをキャストします。
シーンにライトを追加します。

var ambiColor = '#0C0C0C';
var ambientLight = new THREE.AmbientLight(ambiColor);
シーンにアンビエントライトを追加します。

var グリッド = new THREE.GridHelper(1000, 100, 0x000000, 0x000000);
グリッドの不透明度 = 0.1;
グリッドのマテリアルを透明にする
グリッドの位置を 0, -240, 0 に設定します。
シーンにグリッドを追加します。

コントロール = 新しい THREE.OrbitControls(カメラ、レンダラー.domElement);
コントロールのターゲットを設定します(0, 0, 0);
コントロールを更新します。

統計 = 新しい統計();
コンテナに子要素を追加します。

// var loader = new THREE.FBXLoader();
var ローダー = new THREE.OBJLoader();
loader.load(モデル、関数(オブジェクト) {
  object.traverse(関数 (子) {
    子がメッシュである場合
      子.castShadow = true;
      子.receiveShadow = true;
    }
  });
  オブジェクトの回転y = Math.PI / 2;
  オブジェクトの位置を 0, -200, 0 に設定します。
  オブジェクトのスケールを0.32に設定します。
  モデル = オブジェクト;
  シーン.add(オブジェクト);
});

var ローダー = new THREE.GLTFLoader();
loader.load(モデル、関数(オブジェクト) {
  object.scene.traverse(関数(子) {
    子がメッシュである場合
      子.castShadow = true;
      子.receiveShadow = true;
    }
  });
  object.scene.rotation.y = Math.PI / 2;
  オブジェクトのシーンの位置を設定します(0, -240, 0);
  オブジェクトのシーンスケールを設定します(0.33, 0.33, 0.33);
  モデル = オブジェクト.シーン;
  シーンを追加します。
});

関数アニメーション（）{
  アニメーションフレームをリクエストします(アニメーション化します);
  // ページが再描画されると、シーンの rotation.y が継続的に変更され、回転が実現されます。scene.rotation.y -= 0.015;
  レンダラー.レンダリング(シーン、カメラ);
}

// raycaster とマウス変数を宣言します var raycaster = new THREE.Raycaster();
var マウス = new THREE.Vector2();
onMouseClick = イベント => {
  // マウスクリック位置の画面座標を、画面の中心を原点とし、値の範囲が -1 ～ 1 となる threejs の標準座標に変換します。
  マウスのx = (イベントのクライアントX / ウィンドウのインナー幅) * 2 - 1;
  mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
  // マウスポイントの位置と現在のカメラマトリックスに基づいてレイキャスターを計算します
  raycaster.setFromCamera(マウス、カメラ);
  // レイキャスターのラインとすべてのモデルとの交差点の配列コレクションを取得します。let intersects = raycaster.intersectObjects(scene.children);
  交差する長さが0より大きい場合
    アラート('HELLO WORLD')
    // 異なるメッシュをクリックして、トラバースすることでさまざまなインタラクションをトリガーできます。
    selectedObj = intersects[0].objectとします。
    選択されたオブジェクト名が「車」の場合
      アラート('車🚗')
    }
  }
}
window.addEventListener('click', onMouseClick, false);

var loader = new THREE.FontLoader();
loader.load('gentilis_regular.typeface.json', 関数(フォント) {
  var textGeo = new THREE.TextGeometry('HELLO WORLD', {
    フォント: フォント、
    サイズ: .8,
    高さ: .8,
    曲線セグメント: .05、
    ベベル厚さ: .05、
    ベベルサイズ: .05,
    ベベル有効: true
  });
  var textMaterial = new THREE.MeshPhongMaterial({ color: 0x03c03c });
  var mesh = new THREE.Mesh(textGeo, textMaterial);
  メッシュの位置を設定します(0, 3.8, 0);
  シーンを追加します(メッシュ);
}); 

var モデル = require('@/assets/models/kas.gltf');
var コンテナ、統計、コントロール;
var カメラ、シーン、レンダラー、ライト、モデル;
クラスKasはReact.Componentを拡張します{
  与える （） {
    戻る （
      <div id="kas"></div>
    ）
  }
  コンポーネントマウント() {
    3 番目のメソッドは、次のとおりです。
  }
  initThree() {
    初期化();
    アニメーション化();
    関数init() {
      コンテナ = document.getElementById('kas');
      シーン = 新しい THREE.Scene();
      scene.fog = 新しい THREE.Fog(0xa0a0a0, 200, 1000);
      // パースペクティブ カメラ: 視野、アスペクト比、近い平面、遠い平面 camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
      カメラの位置を600, 20, -200に設定します。
      カメラ.lookAt(新しいTHREE.Vector3(0, 0, 0));
      // 半球光源: 屋外効果のためのより自然な光源を作成します。 light = new THREE.HemisphereLight(0xffffff, 0x444444);
      ライトの位置を設定します(0, 20, 0);
      シーンにライトを追加します。
      ライト = 新しい THREE.DirectionalLight(0xffffff);
      ライトの位置を設定します(0, 20, 10);
      ライトをキャストします。
      シーンにライトを追加します。
      // 周囲光 var ambiColor = '#0C0C0C';
      var ambientLight = new THREE.AmbientLight(ambiColor);
      シーンにアンビエントライトを追加します。
      // グリッド var grid = new THREE.GridHelper(1000, 100, 0x000000, 0x000000);
      グリッドの不透明度 = 0.1;
      グリッドのマテリアルを透明にする
      グリッドの位置を0, -240, 0に設定します。
      シーンにグリッドを追加します。
      // gltf モデルをロードします var loader = new THREE.GLTFLoader();
      loader.load(モデル、関数(オブジェクト) {
        object.scene.traverse(関数(子) {
          子がメッシュである場合
            子.castShadow = true;
            子.receiveShadow = true;
          }
        });
        object.scene.rotation.y = Math.PI / 2;
        オブジェクトのシーンの位置を設定します(0, -240, 0);
        オブジェクトのシーンスケールを設定します(0.33, 0.33, 0.33);
        モデル = オブジェクト.シーン;
        シーンを追加します。
      });
      レンダラー = 新しい THREE.WebGLRenderer({ アンチエイリアス: true、アルファ: true });
      レンダラーのピクセル比を設定します。
      レンダラーのサイズを設定します。
      レンダラー.setClearAlpha(0);
      レンダラー.shadowMap.enabled = true;
      コンテナに子要素を追加します。
      window.addEventListener('サイズ変更', () => {
        カメラのアスペクト比は window.innerWidth または window.innerHeight です。
        カメラの投影マトリックスを更新します。
        レンダラーのサイズを設定します。
      }、 間違い）;
      統計 = 新しい統計();
      コンテナに子要素を追加します。
    }
    関数アニメーション（）{
      var クロック = 新しい THREE.Clock()
      アニメーションフレームをリクエストします(アニメーション化します);
      var delta = clock.getDelta();
      シーン回転y -= 0.015;
      レンダラー.レンダリング(シーン、カメラ);
      統計情報を更新します。
    }
    // クリック イベントを追加します // raycaster およびマウス変数を宣言します var raycaster = new THREE.Raycaster();
    var マウス = new THREE.Vector2();
    関数 onMouseClick(イベント) {
      // マウスのクリック位置からレイキャスターが必要とするポイントの位置を計算します。画面の中心を原点とし、値の範囲は -1 ～ 1 です。
      マウスのx = (イベントのクライアントX / ウィンドウのインナー幅) * 2 - 1;
      mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
      // マウスポイントの位置と現在のカメラマトリックスに基づいてレイキャスターを計算します
      raycaster.setFromCamera(マウス、カメラ);
      // レイキャスター ラインとすべてのモデル間の交差点の配列コレクションを取得します。var intersects = raycaster.intersectObjects(scene.children);
      交差する長さが0より大きい場合
        アラート('HELLO WORLD')
      }
    }
    window.addEventListener('click', onMouseClick, false);
  }
}