この記事では、主にReact + three.jsテクノロジースタックを使用して3Dモデルの読み込み、3Dテキストの追加、アニメーションの増加、クリックインタラクションなどを行い、スタイルデザインと連携してデザインが充実した🤢`acidスタイルのページを実現する方法を紹介します。 背景最近 基礎
アシッドデザイン
つまり、 成果を達成するオンラインプレビュー: https://tricell.fun 成し遂げる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(オブジェクト); }); gltf モデルの読み込み
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); 3Dテキストを追加する
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); シーンを追加します(メッシュ); }); 最適化現在、モデルの読み込みは基本的に完了していますが、 インストール
objモデルを次のディレクトリにコピーします
トランスコード命令を実行する
図に示すように、上記の内容が表示され、トランスコードが完了します。変換前後のファイルサイズを比較すると、この例では、 完全なコード 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); } } その他のデザイン要素この記事では、主に 流動的な背景
メタル、ネオン、グリッチ効果などのアシッド効果フォントについては、私の別の記事「わずか数ステップの CSS でサイバーパンク 2077 スタイルの視覚効果を実現する」をお読みいただくか、デザイン生成をご利用ください。時間の制約により、このプロジェクトのメタル効果テキストとこの記事のバナー ヘッダーのテキストはすべて、オンライン アート フォント生成 Web サイトを使用して生成されています。興味のある学生は自分でデザインしてみることができます。 今後のさらなる最適化
最後に、皆さんが一緒に体験し、学べる素晴らしい github ホームページ: kodeclubs: 低ポリゴン スニーカーディスプレイ:スニーカーを 砂の彫刻ダンス:砂の彫刻動物ダンサー。 Zenly ソフトウェア: 参考文献 3.js: https://threejs.org obj2gltf: https://github.com/CesiumGS/obj2gltf 200 ページ以上の無料 3D モデル https://www.turbosquid.com 無料の 3D 彫像: https://threedscans.com 無料の 3D モデル: https://free3d.com 芸術的なフォントのオンライン生成: https://cooltext.com アシッドデザインとは: https://www.shejipi.com/361258.html 著者: dragonir 記事URL: https://www.cnblogs.com/dragonir/p/15350537.html three.js を使用してクールなアシッド スタイルの 3D ページを実装する方法についての記事はこれで終わりです。three.js アシッド スタイルの 3D ページに関するその他の関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: Docker-compose チュートリアルのインストールとクイックスタート
領事の基本概念サーバーモードとクライアントモードサーバー モードとクライアント モードは、consu...
この記事では、Navicatを使用してcsvデータをmysqlにインポートする方法を参考までに紹介し...
今日、私は <a href="#13"></a> につい...
最近、プロジェクトで写真をアップロードする要件があるのですが、顧客がアップロードする写真のサイズがま...
作成したイメージを一元管理し、サービスの展開を容易にするために、プライベート Docker リポジト...
序文プロジェクト内のパズルゲーム(デジタル華容路とも呼ばれる)を再構築するのに 2 日かかりました。...
MySQLダウンロードアドレス: https://obs.cn-north-4.myhuaweicl...
I. はじめに1: SSL証明書私のドメイン名は Tencent Cloud にあります。第 3 レ...
以下のように表示されます。リモート サーバーのファイルをローカルにコピーします。 scp -r -P...
この記事では、例を使用して、MySQL マスター/スレーブ レプリケーションと読み取り/書き込み分離...
概要zabbix バージョン 5.0 以降では、zabbix-agent2 という新しい機能が追加さ...
目次概要フィルターの定義フィルターの使用カスタムグローバルフィルターローカルフィルター予防例1(ロー...
目次1. テンプレート文字列とは何ですか? 2. 複数行のテンプレート文字列2.1 式付きテンプレー...
勉強や仕事で FTP サーバーを頻繁に使用する場合は、起動時に自動的に起動するように設定できます。設...
仮想化1. 環境セントオス7.3 selinuxとファイアウォールを無効にする2. 仮想化環境の構成...