質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

three.jsのTextGeometryで文字が表示されない

egpro
egpro

総合スコア5

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0グッド

0クリップ

349閲覧

投稿2022/11/20 15:09

three.jsのTextGeometryで文字が表示されない

three.jsを使ってWebGLのモデルを作成しています。
TextGeometryを使って3D文字を作成したいのですが、文字が表示されません
エラーも出ないので、なぜ表示されないのかわからず、困っています。
方法1と方法2、二つの方法で試しましたが、どちらもエラーは出ず、文字も出ません。
ローカル上にサーバーを立ててファイルを開く方法も試しましたが解決しませんでした。
解決方法をご教授いただければ幸いです。

該当のソースコード

HTML

1<html> 2 <head> 3 <meta charset="utf-8" /> 4 <script src="https://unpkg.com/three@0.140.2/build/three.min.js"></script> 5 <script type="text/javascript" src="./file/helvetiker_regular.typeface.js"></script> 6 <script type="text/javascript" src="./file/helvetiker_bold.typeface.js"></script> 7 <script type="text/javascript" src="./file/bitstream_vera_sans_mono_roman.typeface.js"></script> 8 <script type="text/javascript" src="./file/TextGeometry.js"></script> 9 <script type="text/javascript" src="./file/FontLoader.js"></script> 10 <script> 11 // ページの読み込み 12 window.addEventListener('DOMContentLoaded', init); 13 14 function init() { 15 // サイズを指定 16 const width = 960; 17 const height = 540; 18 let rot = 0; 19 20 // レンダラーを作成 21 const renderer = new THREE.WebGLRenderer({ 22 canvas: document.querySelector('#myCanvas'), 23 }); 24 renderer.setSize(width, height); 25 26 // シーンを作成 27 const scene = new THREE.Scene(); 28 29 // カメラを作成 30 const camera = new THREE.PerspectiveCamera(45, width / height); 31 32 // 平行光源を作成 33 const directionalLight = new THREE.DirectionalLight(0xffffff); 34 directionalLight.position.set(1, 1, 1); 35 scene.add(directionalLight); 36 37 //方法1 38 // const text_geometry = new THREE.TextGeometry('test', { 39 // size: 80, 40 // height: 80, 41 // weight: 'normal', 42 // font: 'helvetiker', 43 // bevelThickness: 9, 44 // bevelSize: 4, 45 // bevelSegments: 3, 46 // bevelEnabled: true, 47 // curveSegments: 12, 48 // steps: 1 49 // }); 50 51 // text_geometry.center(); 52 // const text_material = new THREE.MeshNormalMaterial(); 53 // const text_mesh = new THREE.Mesh(text_geometry, text_material); 54 // // text_mesh.position.set(0, 18, 0); 55 // scene.add(text_mesh); 56 57 58 59 //方法2 60 const fontLoader = new THREE.FontLoader(); 61 62 fontLoader.load('./helvetiker_bold.typeface.json', (font) => { // typeface.jsを読み込む 63 const textGeometry = new THREE.TextGeometry('test', { 64 font: 'helvetiker', 65 size: 80, 66 height: 80 67 }); 68 69 textGeometry.center(); 70 71 const textMaterial = new THREE.MeshNormalMaterial(); 72 const text = new THREE.Mesh(textGeometry, textMaterial); 73 74 scene.add(text); 75 }); 76 77 78 tick(); 79 function tick() { 80 81 // レンダリング 82 renderer.render(scene, camera); 83 84 requestAnimationFrame(tick); 85 } 86 } 87 </script> 88 </head> 89 <body> 90 <canvas id="myCanvas"></canvas> 91 </body> 92</html>

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

ベストアンサー

まずは原因の切り分けとして three.js の公式サンプルをローカルで動かして表示できるか確認してみるのが良いかと思います。

■ TextGeometry サンプル
https://threejs.org/examples/webgl_geometry_text.html
■ サンプルのソースコード
https://github.com/mrdoob/three.js/blob/dev/examples/webgl_geometry_text.html

質問にあるコードを試しては無いですが、camera 周りの設定が足りていないように思いました。
・near / far の指定
・camera の位置指定
・lookAt の指定
など

投稿2022/11/20 21:50

cx20

総合スコア4295

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。