効果まず、必要なコンポーネントを紹介します './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 でフロートとマージンを混合するサンプルコード
>>: タオバオモールのホームページ上の大きな画像のデザイン構造に関する分析と意見(写真)
Mysql が CPU を占有しすぎる場合、どこから最適化を開始すればよいでしょうか? CPU 使...
序文:この記事は、jackyzm のブログ https://www.cnblogs.com/jack...
async_hooks モジュールは、Node.js バージョン 8.0.0 に正式に追加された実験...
目次502 不正なゲートウェイ エラーの発生1. 502 不正なゲートウェイ エラーとは何ですか? ...
今日はたまたま友人のサーバーの移転を手伝うことになり、サーバーの基本的な設備の設定を行ったのですが、...
目次導入Tomcatへの接続方法APR と Tomcat ネイティブtomcat で APR を使用...
Ubuntu コマンドライン ウィンドウで次の操作を実行します。 1. 仮想環境をインストールする...
最近、プロジェクトの開発時に MySql データベースを使用しました。MySql に関する記事をいく...
HTML でよく使用されるエスケープ文字をまとめると次のようになります。 改行...
1. 背景実際のプロジェクトでは、分散スケジュールされたタスク実行の状況に遭遇することがあります。ス...
シナリオ昨日、システムは dbAll.sql.gz という名前の特定のデータベースのすべてのテーブル...
閉鎖サービス nginx 停止systemctl 停止 nginx起動するサービス nginx 開始...
RocketMQ は、Alibaba が設計した分散型のキューベースのメッセージング ミドルウェア...
1. JDKをインストールする コンピュータの動作桁を確認します。 uname -ar 2017 x...
イメージをダウンロードします(オプションの手順です。省略した場合は、手順 3 と 4 で自動的にイン...