threeJSの基本初期化

はじめに:この記事では主にVue.におけるthree.jsの使用方法を紹介します。

インストールと導入

import * as b from 'three';

1. threeのアップデートによる互換性の問題を避けるため、バージョン番号を決定しておくのが最善です

トラックコントローラ、ローダなどを使用する際は、それらも別途導入する必要があります

データの初期化

1. グローバル変数の準備

      scene: null,
      camera: null,
      renderer: null,
      objects: null,

1. コンテナの準備

// データの初期化
    initData() {
      this.container = this.$refs.three; // 
    },

シーンの作成

シーン - three.js ドキュメント

// シーンを作成する
    createScene() {
      this.scene = new THREE.Scene();
      this.scene.environment = 環境マッピング ; //この値がNULLでない場合、テクスチャマップはシーン内のすべての物理マテリアルの環境マップとして設定される。
    },

カメラを作成します

• パースペクティブカメラ:遠くを見れば見るほど、オブジェクトは小さく見えます。これは人間の目をシミュレートしています。

• 直交カメラ:視野円錐は立方体なので、遠近感はありません。これは常に2DシーンまたはUI要素をレンダリングします。

適切なカメラパラメータを設定します。

this.camera.position.set(0, 2, 10);

// 観察対象の座標

this.camera.lookAt(this.scene.position);

this.scene.add(this.camera);

軌道制御の作成 - カメラの制御

軌道制御により、カメラはターゲットの周りを周回します。

軌道制御は lookAt 設定に影響を与えるため、手動で制御を変更する際には注意が必要です。

// コントローラを作成する
    createOrbitControls() {
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      this.controls.enableDamping = true; // ダンピングを有効にする
      this.controls.minPolarAngle = 0.5; // Y軸まわりの最小角度
      this.controls.maxPolarAngle = 1.35; // Y軸まわりの最大角度
      this.controls.zoomSpeed = 0.3; // ズームを遅くする
    },

// をロードする。
    をロードする。 {
      this.renderer.render(this.scene, this.camera);
      this.controls && this.controls.update(); //コントローラを使用した後、それをロードするときに更新する必要がある。
      requestAnimationFrame(この.render);
    },

ライトの作成

• アンビエントライト:アンビエントライトはシーン内のすべてのオブジェクトを均一に照らします。アンビエントライトには方向がないため、影を落とすことはできません。

// ライトを追加する
    createLight() {
      let light1 = new THREE.DirectionalLight(0xffffff, 1); // 光の色と強さのパラメータを持つ指向性ライトを作成する。
      light1.position.set(0, 0, 10);
      this.scene.add(light1);
    },

レンダラーを作成します

// レンダラーを作成する
    createRenderer() {
      this.renderer = new THREE.WebGL1Renderer();
      this.renderer.setSize(
        this.container.clientWidth,
        this.container.clientHeight
      );
      this.renderer.antialisa = true; //  
      //   this.renderer.setClearColor("pink"); // 画面の色を設定する
      this.container.appendChild(this.renderer.domElement);
    },

グリッドフロアを作成します

// グリッド・グラウンドを作成する
    createGridHelper() {
      const gridHelper = new THREE.GridHelper(10, 10); // size divisions
      this.scene.add(gridHelper);
      //   gridHelper.material.transparent = true;
      //   gridHelper.material.opacity = 0.5;
    },

Create axes helper

// 軸ヘルパーを作成する
    createAxesHelper() {
      const axesHelper = new THREE.AxesHelper(5);
      this.scene.add(axesHelper);
    },

モデルをロードします

シーン - three.js ドキュメント

GLTFLoader - three.js ドキュメント

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

const loader = new GLTFLoader();
      loader.load(
        "path/to/model.glb",
        (gltf) => {
        console.log("搭載モデル。...")
          this.scene.add(gltf.scene);
          // モデルを反復処理し、ターゲットのサブモデルを取得する
          glft.scene.traverse((child) => {
          if (child.name === "door_right") {
            this.rightDoor = child;
          }
          })
        },
    
      );

1. 読み込みアドレスはパッケージング後の相対アドレスにする必要があります。そうでないと読み込まれない場合があります。

モデルを読み込んだ後は、モデルに合わせてカメラパラメータを調整することを忘れないでください。

カスタムメッシュ

createMesh () {
      const box = new THREE.BoxGeometry(1, 1, 1);
      // マテリアル：MeshStandardMaterial標準メッシュマテリアルは、物理的なレンダリングに基づいており、物理的なモデルに基づいて照明や影を扱うことができ、実際のシーンの物理的な世界に近い。
      const material = new THREE.MeshStandardMaterial({ color: 0xffff00 })
      //  
      const cube = new THREE.Mesh(box, material);
      cube.castShadow = true; // オブジェクトの影を設定する
      this.scene.add(cube)
    },