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
                シーン.追加(平面)
            })
        }
        関数レンダリング() {
            レンダラー.レンダリング(シーン、カメラ);
            アニメーションフレームをリクエスト(レンダリング)
        }
        関数開始() {
            レンダラーの初期化()
            シーンを初期化します。
            カメラを初期化します。
            コントロールの初期化()
            ライトの初期化()
            初期化テキスト()
            与える（）
        }
        始める（）
    </スクリプト>