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 でフロートとマージンを混合するサンプルコード

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

推薦する

Mysql が CPU を過剰に占有する場合の最適化方法 (必読)

Mysql が CPU を占有しすぎる場合、どこから最適化を開始すればよいでしょうか? CPU 使...

Alibaba Cloud CentOS7 サーバーの nginx 構成と FAQ の分析

序文:この記事は、jackyzm のブログ https://www.cnblogs.com/jack...

Nodeはリクエスト追跡にasync_hooksモジュールを使用します

async_hooks モジュールは、Node.js バージョン 8.0.0 に正式に追加された実験...

フロントエンド例外 502 不正なゲートウェイの原因と解決策

目次502 不正なゲートウェイ エラーの発生1. 502 不正なゲートウェイ エラーとは何ですか? ...

Docker nginx + https サブドメイン設定の詳細なチュートリアル

今日はたまたま友人のサーバーの移転を手伝うことになり、サーバーの基本的な設備の設定を行ったのですが、...

Tomcat Nativeを使用してTomcat IO効率を向上させる方法の詳細な説明

目次導入Tomcatへの接続方法APR と Tomcat ネイティブtomcat で APR を使用...

Ubuntu の仮想環境に Django をインストールする方法

Ubuntu コマンドライン ウィンドウで次の操作を実行します。 1. 仮想環境をインストールする...

MySQL5.6.17データベースをインストールするときにMy.iniファイルを構成する方法

最近、プロジェクトの開発時に MySql データベースを使用しました。MySql に関する記事をいく...

HTML でよく使用されるエスケープ文字の概要

HTML でよく使用されるエスケープ文字をまとめると次のようになります。 &nbsp; 改行...

MySQLで現在の時間間隔の前日のデータをクエリする

1. 背景実際のプロジェクトでは、分散スケジュールされたタスク実行の状況に遭遇することがあります。ス...

mysqlはエクスポートされたデータのsqlファイルから指定されたテーブルのみをインポートすることを実装します

シナリオ昨日、システムは dbAll.sql.gz という名前の特定のデータベースのすべてのテーブル...

nginx をシャットダウン/再起動/起動する方法

閉鎖サービス nginx 停止systemctl 停止 nginx起動するサービス nginx 開始...

Docker インストール rocketMQ チュートリアル (最も詳細)

RocketMQ は、Alibaba が設計した分散型のキューベースのメッセージング ミドルウェア...

Linux でシェル スクリプトを使用して jar パッケージ プロジェクトを展開するための完全な手順

1. JDKをインストールする コンピュータの動作桁を確認します。 uname -ar 2017 x...

Redmine の Docker インストール手順

イメージをダウンロードします(オプションの手順です。省略した場合は、手順 3 と 4 で自動的にイン...