JavaScript Three.js でテキストを作成する最初の経験

JavaScript Three.js でテキストを作成する最初の経験

効果

ここに画像の説明を挿入

まず、必要なコンポーネントを紹介します

'./build/three.js' をインポートします。
'./libs/js/controls/OrbitControls.js' をインポートします
'./libs/jsm/loaders/FontLoader.js' から FontLoader をインポートします。
'./libs/jsm/geometries/TextGeometry.js' から { TextGeometry } をインポートします。

次に、シーン、レンダラー、カメラ、コントローラーを初期化する必要があります。

		var レンダラー、シーン、カメラ、コントロール
		// シーンを初期化する function initScene() {
            シーン = 新しい THREE.Scene();
            //シーンに煙の効果を追加// パラメータ: 煙の色、煙の範囲 (近く)、煙の範囲 (遠く)
            scene.fog = 新しい THREE.Fog(0x000000, 0, 3000)
            // シーンに軸を追加します var axes = new THREE.AxesHelper(100)
            シーン.add(軸)
        }
        // レンダラー関数を初期化する initRenderer() {
            // アンチエイリアスがオンかどうか renderer = new THREE.WebGLRenderer({ antialias: true })
            レンダラー.setSize(window.innerWidth, window.innerHeight)
            レンダラー.setClearColor(0xeeeeee)
            document.body.appendChild(レンダラー.domElement);
        }
        // カメラを初期化する関数 initCamera() {
            カメラ = 新しい THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
            カメラの位置x = 50
            カメラの位置 y = 50
            カメラの位置z = 50
        }
        // コントローラを初期化する関数 initControls() {
            コントロール = 新しい THREE.OrbitControls(カメラ、レンダラー.domElement)
            controls.enableZoom = false; //ズームを有効にするかどうか;
            controls.minPolarAngle = Math.PI / 2.5; // 垂直方向の最小回転角度を正の Y 軸上で 0 度に制限します。controls.maxPolarAngle = Math.PI / 2.5; // 垂直方向の最大回転角度を正の Y 軸上で 0 度に制限します。}

光源を初期化する

		// 光源を初期化する function initLight() {
        // 白色光、光強度 1
            var pointLight = new THREE.PointLight(0xffffff, 1);
            ポイントライトの位置を0, 100, 100に設定します。
            シーンにポイントライトを追加します。
            var pointLight = new THREE.PointLight(0xffffff, 1);
            ポイントライトの位置を0, 100, -100に設定します。
            シーンにポイントライトを追加します。
        }

テキストの作成を開始する

まずフォントローダーを作成する

var ローダー = 新しい FontLoader();

フォントライブラリを読み込む

フォントライブラリリソースの読み込みに成功すると、フォントライブラリがコールバック関数に渡されます。

loader.load(src、コールバック)

フォント ライブラリ リソースは、typeface.json を通じて目的の ttf フォント ファイルを選択し、それを json ファイルに変換してから、コールバック関数でフォント ジオメトリを作成できます。

loader.load('./fonts/FZKaTong-M19S_Regular.json', 関数(レスポンス) {
               // ここでテキストを作成します})

テキストジオメトリの作成

				// テキスト バッファー ジオメトリを作成する var textGeometry = new TextGeometry('狗托吴嘉豪', {
                	// フォントタイプ font: response,
                    // フォントサイズ: 15,
                    // フォントの太さ 高さ: 1,
                    // テキスト曲線上のポイントの数。数値が大きいほど、フォント曲線は滑らかになります。curveSegments: 12,
                    // ベベル(エッジとコーナーの滑らかな遷移)をオンにするかどうか
                    ベベル有効: false、
                    // テキストのベベルの深さ bevelThickness: 0.1,
                    // ベベルと元のテキストアウトライン間の延長距離(ベベルサイズ)
                    ベベルサイズ: 0.1,
                    // ベベルセグメント数 bevelSegments: 3
                })
				//テキストマテリアル //マテリアル配列を使用 var textMaterial = [
                    // 最初の項目はテキストの前面と背面を変更します new THREE.MeshPhongMaterial( { color: 0x00ff00, flatShading: true } ), // 前面
                    // 2番目の項目はテキストの側(上と下)を変更します
					new THREE.MeshPhongMaterial( { color: 0x0000ff, flatShading: true } ) // サイド
                    // Phong メッシュ マテリアルは、鏡面反射ハイライトのある光沢のある表面 (塗装された木材など) をシミュレートできます。
				] 
				// テキストを作成する var text = new THREE.Mesh(textGeometry, textMaterial)

テキストジオメトリの境界矩形を計算する

幾何学的ボディは目に見えない長方形の立方体コンテナに格納されており、このコンテナのデフォルトの位置は原点であり、x 軸と z 軸の正の方向に沿って外側に伸びているため、テキストは視野の中央にないと考えられます。
この時点で、ジオメトリの外側の境界矩形を計算し、ジオメトリの位置を設定して、ジオメトリがどれだけ長くなっても常に視野の中央に配置されるように、ジオメトリの長さの半分を反対方向に移動することができます。

				// computeBoundingBox() は、現在のジオメトリの外側の境界矩形を計算します。textGeometry.computeBoundingBox();
                // console.log(textGeometry.boundingBox); 外側の境界四角形の頂点の位置を確認します // テキストの位置をテキストの長さの半分だけ左に移動します var centerOffset = -0.5*(textGeometry.boundingBox.max.x-textGeometry.boundingBox.min.x)
                text.position.x = 中心オフセット
                テキスト位置z = 0  
                シーンにテキストを追加します。

ミラーテキストを作成する

				// テキストミラーを作成する var mirror = new THREE.Mesh(textGeometry, textMaterial)
                // 180度反転 mirror.rotation.x = Math.PI
                mirror.position.x = 中心オフセット
                ミラー位置 y = -8
                シーン.add(ミラー)

半透明の平面を作成する

				// テキストミラーを作成する var mirror = new THREE.Mesh(textGeometry, textMaterial)
                // 180度反転 mirror.rotation.x = Math.PI
                mirror.position.x = 中心オフセット
                ミラー位置 y = -8
                シーン.add(ミラー)

レンダリング

		関数レンダリング() {
            レンダラー.レンダリング(シーン、カメラ);
            アニメーションフレームをリクエスト(レンダリング)
        }
        関数開始() {
            レンダラーの初期化()
            シーンを初期化します。
            カメラを初期化します。
            コントロールの初期化()
            ライトの初期化()
            初期化テキスト()
            与える()
        }
        始める()

テキストコンストラクタパラメータについて

曲線セグメントを低く設定すると、テキストがそれほど滑らかではないことがわかります。

// テキスト曲線上の点の数。点が高いほど曲線は滑らかになります。curveSegments: 1,

ここに画像の説明を挿入

ベベルをオンにすると、フォントの端が丸くなり、鋭くなくなることがわかります。

// ベベル(エッジとコーナーの滑らかな遷移)をオンにするかどうか
ベベル有効: true、

ここに画像の説明を挿入

ベベルパラメータの設定

// テキストのベベルの深さ bevelThickness: 0.1,
// ベベルと元のテキストアウトライン間の延長距離(ベベルサイズ)
ベベルサイズ: .1,
// ベベルセグメント数 bevelSegments: 3

完全なコード

<スクリプトタイプ="モジュール">
        './build/three.js' をインポートします。
        './libs/js/controls/OrbitControls.js' をインポートします
        './libs/jsm/loaders/FontLoader.js' から FontLoader をインポートします。
        './libs/jsm/geometries/TextGeometry.js' から { TextGeometry } をインポートします。
        var レンダラー、シーン、カメラ、コントロール
        // レンダラー関数を初期化する initRenderer() {
            // アンチエイリアスがオンかどうか renderer = new THREE.WebGLRenderer({ antialias: true })
            レンダラー.setSize(window.innerWidth, window.innerHeight)
            レンダラー.setClearColor(0xeeeeee)
            document.body.appendChild(レンダラー.domElement);
        }
        // シーンを初期化する function initScene() {
            シーン = 新しい THREE.Scene();
            //シーンに煙の効果を追加// パラメータ: 煙の色、煙の範囲 (近く)、煙の範囲 (遠く)
            scene.fog = 新しい THREE.Fog(0x000000, 0, 3000)
            // シーンに軸を追加します var axes = new THREE.AxesHelper(100)
            シーン.add(軸)
        }
        // カメラを初期化する関数 initCamera() {
            カメラ = 新しい THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
            カメラの位置x = 50
            カメラの位置 y = 50
            カメラの位置.z = 50
        }
        // コントローラを初期化する関数 initControls() {
            コントロール = 新しい THREE.OrbitControls(カメラ、レンダラー.domElement)
        }
        // 光源を初期化する function initLight() {
            var pointLight = new THREE.PointLight(0xffffff, 1);
            ポイントライトの位置を0, 100, 100に設定します。
            シーンにポイントライトを追加します。
            var pointLight = new THREE.PointLight(0xffffff, 1);
            ポイントライトの位置を0, 100, -100に設定します。
            シーンにポイントライトを追加します。
        }
        関数initText() {
            var ローダー = 新しい FontLoader();
            loader.load('./fonts/FZKaTong-M19S_Regular.json', 関数(レスポンス) {
                // テキストジオメトリを作成する var textGeometry = new TextGeometry('狗托吴嘉豪', {
                    フォント: 応答、
                    // フォントサイズ: 15,
                    // フォントの太さ 高さ: 4,
                    // テキスト曲線上の点の数。点が高いほど曲線は滑らかになります。curveSegments: 12、
                    // ベベル(エッジとコーナーの滑らかな遷移)をオンにするかどうか
                    ベベル有効: true、
                    // テキストのベベルの深さ bevelThickness: 0.1,
                    // ベベルと元のテキストアウトライン間の延長距離(ベベルサイズ)
                    ベベルサイズ: .1,
                    // ベベルセグメント数 bevelSegments: 3
                })
                //テキストマテリアル //マテリアル配列を使用 var textMaterial = [
                    // 最初の項目はテキストの前面と背面を変更します new THREE.MeshPhongMaterial( { color: 0x00ff00, flatShading: true } ), // 前面
                    // 2番目の項目はテキスト側(上と下)を変更します
					new THREE.MeshPhongMaterial( { color: 0x0000ff, flatShading: true } ) // サイド
                    // Phong メッシュ マテリアルは、鏡面反射ハイライトのある光沢のある表面 (塗装された木材など) をシミュレートできます。
				] 
                var テキスト = 新しい THREE.Mesh(textGeometry, textMaterial)
                // computeBoundingBox() は現在のジオメトリの境界矩形を計算します textGeometry.computeBoundingBox();
                // console.log(textGeometry.boundingBox);
                var centerOffset = -0.5*(textGeometry.boundingBox.max.x-textGeometry.boundingBox.min.x)
                text.position.x = 中心オフセット
                テキスト位置z = 0  
                シーンにテキストを追加します。
                // テキストミラーを作成する var mirror = new THREE.Mesh(textGeometry, textMaterial)
                ミラー回転x = Math.PI
                mirror.position.x = 中心オフセット
                ミラー位置 y = -8
                シーン.add(ミラー)
                // 半透明の平面を作成します。var plane = new THREE.Mesh(new THREE.PlaneBufferGeometry(200,200),new THREE.MeshBasicMaterial({color:0xffffff,opacity:.5,transparent:true}))
                平面回転x = -Math.PI / 2
                平面の位置 y = -3
                シーン.追加(平面)
            })
        }
        関数レンダリング() {
            レンダラー.レンダリング(シーン、カメラ);
            アニメーションフレームをリクエスト(レンダリング)
        }
        関数開始() {
            レンダラーの初期化()
            シーンを初期化します。
            カメラを初期化します。
            コントロールの初期化()
            ライトの初期化()
            初期化テキスト()
            与える()
        }
        始める()
    </スクリプト>

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Three.js が Facebook Metaverse 3D ダイナミック ロゴ効果を実現
  • three.js を使って立体的な矢印線を描く詳細な手順
  • three.js を使用してクールなアシッドスタイルの 3D ページ効果を実現します
  • three.js で 3D ダイナミック テキスト効果を実現する方法
  • 露滴アニメーション効果を実装するための Three.js サンプル コード
  • three.js でのマルチスレッドの使用とパフォーマンステストの詳細な説明

<<:  CSS でフロートとマージンを混合するサンプルコード

>>:  タオバオモールのホームページ上の大きな画像のデザイン構造に関する分析と意見(写真)

推薦する

SCSS スタイルのコードを 50% 削減する 14 の実践的な経験

序文Sass は CSS3 言語の拡張機能です。Sass を使用すると、より良いスタイルシートをより...

CSSは、他のレイヤーを変更せずに、多層ネスト構造の最外層を回転させる効果を実現します。

次のようなシナリオがあります。円形のコンテナで、最も外側のコンテナの背景が円弧になっています。内側の...

lastInfdexOf 関数の MySQL 実装例

MySQL では lastIndexOf に似た関数を使用する必要がある場合もありますが、すぐに使用...

MySQL 8.0.15 圧縮版インストール グラフィック チュートリアル

この記事では、参考までにMySQL 8.0.15圧縮版のインストール方法を紹介します。具体的な内容は...

docker に openjdk をインストールして jar パッケージを実行する方法

画像をダウンロード docker プル openjdkデータボリュームの作成java_appデータボ...

ウェブページ入力ボックスのスタイルトリガー効果

<br />この例では、主に onblur と onFocus という 2 つのパラメー...

エレメントアバターアップロード練習

この記事は、Element公式サイトとQiniu Cloud公式サイトを使用しています。 eleme...

ウェブデザインの経験とスキルの概要

■ ウェブサイトのテーマ計画 ウェブサイトのテーマが断片化しすぎないように注意してください。一般的に...

MySQL ジョイントテーブル更新デー​​タの詳細な例

1.MySQL UPDATE JOIN構文MySQL では、UPDATE ステートメントでJOIN句...

Linux で Apache を使用してファイル サーバーを構築する手順

1. ファイルサーバーについてプロジェクトでは、公開ソフトウェアやデータをプロジェクト チーム メン...

基礎知識: ウェブサイトのアドレスの前の http はどういう意味ですか?

HTTPとは何ですか?ウェブサイトを閲覧したいときは、ブラウザのアドレス バーにウェブサイトのアド...

VMware 15.5 に CentOS7 をインストールするためのグラフィック チュートリアル

1. VMware 15.5で新しい仮想マシンを作成する1. VMware を開き、ホームページで「...

DevUI で独自の Angular コンポーネント ライブラリを構築する方法

目次序文コンポーネントライブラリの作成主要な構成の変更ディレクトリレイアウトの調整ライブラリ構築のた...

MySQL を使用した分散ロックの実装

導入分散システムでは、分散ロックは最も基本的なツール クラスです。たとえば、支払い機能を備えた 2 ...

WeChat 8.0の爆発的な特殊効果を実現するために300行以上のCSSコードが必要

WeChat 8.0 アップデートの主な特徴は、アニメーション絵文字のサポートです。送信するメッセー...