効果まず、必要なコンポーネントを紹介します './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 のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: CSS でフロートとマージンを混合するサンプルコード
>>: タオバオモールのホームページ上の大きな画像のデザイン構造に関する分析と意見(写真)
序文Sass は CSS3 言語の拡張機能です。Sass を使用すると、より良いスタイルシートをより...
次のようなシナリオがあります。円形のコンテナで、最も外側のコンテナの背景が円弧になっています。内側の...
MySQL では lastIndexOf に似た関数を使用する必要がある場合もありますが、すぐに使用...
この記事では、参考までにMySQL 8.0.15圧縮版のインストール方法を紹介します。具体的な内容は...
画像をダウンロード docker プル openjdkデータボリュームの作成java_appデータボ...
<br />この例では、主に onblur と onFocus という 2 つのパラメー...
この記事は、Element公式サイトとQiniu Cloud公式サイトを使用しています。 eleme...
■ ウェブサイトのテーマ計画 ウェブサイトのテーマが断片化しすぎないように注意してください。一般的に...
1.MySQL UPDATE JOIN構文MySQL では、UPDATE ステートメントでJOIN句...
1. ファイルサーバーについてプロジェクトでは、公開ソフトウェアやデータをプロジェクト チーム メン...
HTTPとは何ですか?ウェブサイトを閲覧したいときは、ブラウザのアドレス バーにウェブサイトのアド...
1. VMware 15.5で新しい仮想マシンを作成する1. VMware を開き、ホームページで「...
目次序文コンポーネントライブラリの作成主要な構成の変更ディレクトリレイアウトの調整ライブラリ構築のた...
導入分散システムでは、分散ロックは最も基本的なツール クラスです。たとえば、支払い機能を備えた 2 ...
WeChat 8.0 アップデートの主な特徴は、アニメーション絵文字のサポートです。送信するメッセー...