Q&A
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>
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。