Three.js が Facebook Metaverse 3D ダイナミック ロゴ効果を実現

// ...
var controls = 新しい関数 () {
  //ポイント座標 this.deafultpoints = [
    [0, 0.4, -0.4],
    [0.4, 0, 0],
    [0.4, 0.8, 0.4],
    [0, 0.4, 0.4],
    [-0.4, 0, 0],
    [-0.4, 0.8, -0.4],
    [0, 0.4, -0.4]
  ]
  this.セグメント = 64;
  this.radius = 1;
  this.radiusSegments = 8;
  this.closed = true;
  ポイントは[]です。
  this.newPoints = 関数 () {
    var ポイント = [];
    (var i = 0; i < controls.deafultpoints.length; i++) {
      var _x = controls.defaultpoints[i][0] * 22;
      var _y = controls.defaultpoints[i][1] * 22;
      var _z = controls.defaultpoints[i][2] * 22;
      points.push(新しいTHREE.Vector3(_x, _y, _z));
    }
    controls.points = ポイント;
    コントロールを再度描画します。
  };
  this.redraw = 関数 () {
    redrawGeometryAndUpdateUI(gui、シーン、コントロール、関数() {
      generatePoints(controls.points, controls.segments, controls.radius, controls.radiusSegments, を返します。
        コントロールを閉じます);
    });
  };
};
コントロール。新しいポイント();
関数 generatePoints(ポイント、セグメント、半径、半径セグメント、閉じた) {
  if (spGroup) scene.remove(spGroup);
  spGroup = 新しい THREE.Object3D();
  var material = new THREE.MeshBasicMaterial({ color: 0xff0000, transparent: false });
  points.forEach(関数(ポイント) {
    var spGeom = new THREE.SphereGeometry(0.1);
    var spMesh = new THREE.Mesh(spGeom, マテリアル);
    spMesh.position.copy(ポイント);
    spGroup を追加します。
  });
  シーンを追加します(spGroup);
  新しい THREE.TubeGeometry(新しい THREE.CatmullRomCurve3(points), segments, radius, radiusSegments, closed) を返します。
}
// ...

<script src="./assets/libs/three.js"></script>
<script src="./assets/libs/loaders/FBXLoader.js"></script>
<script src="./assets/libs/inflate.min.js"></script>
<script src="./assets/libs/OrbitControls.js"></script>
<script src="./assets/libs/stats.js"></script>

var container、stats、controls、compose、camera、scene、renderer、light、clickableObjects = []、mixer、mixerArr = []、manMixer;
var clock = new THREE.Clock();
初期化();
アニメーション化();
関数init() {
  コンテナ = document.createElement('div');
  document.body.appendChild(コンテナ);
  // シーン scene = new THREE.Scene();
  シーンを透明にする
  scene.fog = 新しい THREE.Fog(0xa0a0a0, 200, 1000);
  // パースペクティブ カメラ: 視野、アスペクト比、近い平面、遠い平面 camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
  カメラの位置を設定します(0, 4, 16);
  カメラ.lookAt(新しいTHREE.Vector3(0, 0, 0));
  // 半球光源: 屋外効果のためのより自然な光源を作成します。light = new THREE.HemisphereLight(0xefefef);
  ライトの位置を設定します(0, 20, 0);
  シーンにライトを追加します。
  // 指向性ライト light = new THREE.DirectionalLight(0x2d2d2d);
  ライトの位置を設定します(0, 20, 10);
  ライトをキャストします。
  シーンにライトを追加します。
  // アンビエントライト var ambientLight = new THREE.AmbientLight(0xffffff, .5);
  シーンにアンビエントライトを追加します。
  // グリッド var grid = new THREE.GridHelper(100, 100, 0xffffff, 0xffffff);
  グリッドの位置を設定します(0, -10, 0);
  グリッドの不透明度 = 0.3;
  グリッドのマテリアルを透明にする
  シーンにグリッドを追加します。
  レンダラー = 新しい THREE.WebGLRenderer({ アンチエイリアス: true、アルファ: true });
  レンダラーのピクセル比を設定します。
  レンダラーの出力エンコーディング = THREE.sRGBEncoding;
  レンダラーのサイズを設定します。
  //背景色を透明に設定しますrenderer.setClearAlpha(0);
  // 有効にする shadowrenderer.shadowMap.enabled = true;
  コンテナに子要素を追加します。
  // レンズ コントローラーを追加します。controls = new THREE.OrbitControls(camera, renderer.domElement);
  コントロールのターゲットを設定します(0, 0, 0);
  コントロールを更新します。
  window.addEventListener('resize', onWindowResize, false);
  // パフォーマンスプラグインを初期化します。stats = new Stats();
  コンテナに子要素を追加します。
}
// 画面ズーム関数 onWindowResize() {
  カメラのアスペクト比は window.innerWidth または window.innerHeight です。
  カメラの投影マトリックスを更新します。
  レンダラーのサイズを設定します。
}

var ローダー = new THREE.FBXLoader();
loader.load('assets/models/meta.fbx', 関数(メッシュ) {
  mesh.traverse(関数(子) {
    子がメッシュである場合
      子.castShadow = true;
      子.receiveShadow = true;
    }
  });
  メッシュの回転y = Math.PI / 2;
  メッシュの位置を設定します(0, 1, 0);
  メッシュスケールを0.05に設定します。
  シーンを追加します(メッシュ);
});

var texLoader = new THREE.TextureLoader();
loader.load('assets/models/meta.fbx', 関数(メッシュ) {
  mesh.traverse(関数(子) {
    子がメッシュである場合
      if (child.name === 'ベジェ円') {
        child.material = 新しい THREE.MeshPhysicalMaterial({
          マップ: texLoader.load("./assets/images/metal.png"),
          金属度: .2,
          粗さ: 0.1、
          露出: 0.4
        });
      }
    }
  });
})

loader.load('assets/models/meta.fbx', 関数(メッシュ) {
  メッシュ.アニメーション.マップ(アイテム => {
    メッシュ.traverse(子 => {
      // モデルには複数のオブジェクトがあり、それぞれに異なるアニメーションがあるため、この例ではベジェ円メッシュにのみアニメーションを追加します if (child.name === 'Bezier circle') {
        ミキサーを新しい THREE.AnimationMixer(child); にします。
        ミキサーArr.push(ミキサー);
        アニメーションクリップを item にします。
        アニメーションクリップの継続時間 = 8;
        clipAction を mixer.clipAction(animationClip).play() にします。
        アニメーションクリップ = clipAction.getClip();
      }
    })
  })
});

関数アニメーション() {
  レンダラー.レンダリング(シーン、カメラ);
  // このメソッドの 2 回の実行間の時間間隔を取得します。let time = clock.getDelta();
  // ロゴアニメーションを更新 mixerArr.map(mixer => {
    ミキサー && mixer.update(時間);
  });
  // キャラクターアニメーションを更新 manMixer && manMixer.update(time);
  統計情報を更新します。
  アニメーションフレームをリクエストします(アニメーション化します);
}

<div class="読み込み中" id="読み込み中">
  <p class="text">読み込みの進行状況<span id="progress">0%</span></p>
<div>

var ローダー = new THREE.FBXLoader();
loader.load('assets/models/meta.fbx', メッシュ => {
}, 解像度 => {
  // 読み込みの進行状況 let progress = (res.loaded / res.total * 100).toFixed(0);
  document.getElementById('progress').innerText = progress;
  （進捗状況 === 100）の場合{
    document.getElementById('loading').style.display = 'なし';
  }
}, エラー => {
  // ロード失敗 console.log(err)
});

// 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(マウス、カメラ);
  // レイキャスターのラインがすべてのモデルと交差する配列コレクションを取得します。let intersects = raycaster.intersectObjects(clickableObjects);
  交差する長さが0より大きい場合
    console.log(交差[0].オブジェクト)
    selectedObj = intersects[0].objectとします。
    selectedObj.material = 新しい THREE.MeshStandardMaterial({
      色: `#${Math.random().toString(16).slice(-6)}`,
      金属性: Math.random(),
      粗さ: Math.random()
    })
  }
}
window.addEventListener('click', onMouseClick, false);

loader.load('assets/models/man.fbx', 関数(メッシュ) {
  mesh.traverse(関数(子) {
    子がメッシュである場合
      子.castShadow = true;
      子.receiveShadow = true;
    }
  });
  メッシュの回転y = Math.PI / 2;
  メッシュの位置を設定します(-14, -8.4, -3);
  メッシュスケールを設定します(0.085, 0.085, 0.085);
  シーンを追加します(メッシュ);
  manMixer = 新しい THREE.AnimationMixer(メッシュ);
  animationClip = mesh.animations[0] とします。
  clipAction を manMixer.clipAction(animationClip).play() にします。
  アニメーションクリップ = clipAction.getClip();
}, 解像度 => {
  進捗状況を (res.loaded / res.total * 100).toFixed(0) とします。
  document.getElementById('progress').innerText = progress + '%';
  if (数値(進捗) === 100) {
    document.getElementById('loading').style.display = 'なし';
  }
}, エラー => {
  コンソール.log(エラー)
});