Three.js Text

threejs-text.png

THREE.TextGeometryという文字を描くためのクラスは用意されていますが、
色々と準備をしないといけなくて、難しくてややこしくて、エラーメッセージも不親切で、私は描けませんでした。
なので、このページではTHREE.TextGeometryを使わずに文字を載せる方法を紹介します

別のcanvasを作ってその上に文字レイヤーを乗せる

<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
<script type='text/javascript' >
function main(){
var scene = new THREE.Scene();
var camera = new THREE.OrthographicCamera ( -1.0, 1.0,1.0, -1.0, 0.1, 2000 )
 
var renderer = new THREE.WebGLRenderer({ alpha: true });//アルファチャンネルを有効化
renderer.setClearColor( 0x533E25, 0.6);//半透明茶色
renderer.setSize( 200, 200);
document.body.appendChild( renderer.domElement );//ここで適当な大きさの<canvas>エレメントが追加されます
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0xA5D9DD} );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
 
//別のcanvasに文字を描画する
var textCanvas = document.getElementById("textCanvas");
var ctx = textCanvas.getContext("2d");
ctx.font = "18px Arial";
ctx.fillStyle = "#FFFFFF";
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.fillText("(0,1)", 30, 40);
ctx.fillText("(1,1)", 130, 40);
ctx.fillText("(0,0)", 30, 170);
ctx.fillText("(1,0)", 130, 170);
function render() {
    requestAnimationFrame( render );
    renderer.render( scene, camera );
}
render();
}
</script>
<body onload="main()">
<canvas id="textCanvas" width="200" height="200" style="position:absolute;top:0px;left:0px;"></canvas>
</script>

今回は位置はべた書きしましたが、
javascript内で座標渡すので、位置あわせに変数が使えるところがいいかも

SVG+Three.js

<style>
#svg{ 
position:absolute;
top:0px;
left:0px;
}
</style>
<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
<script type='text/javascript' >
function main(){
var scene = new THREE.Scene();
var camera = new THREE.OrthographicCamera ( -1.0, 1.0,1.0, -1.0, 0.1, 2000 )
 
var renderer = new THREE.WebGLRenderer({ alpha: true });//アルファチャンネルを有効化
renderer.setClearColor( 0x533E25, 0.6);//半透明茶色
renderer.setSize( 200, 200);
document.body.appendChild( renderer.domElement );//ここで適当な大きさの<canvas>エレメントが追加されます
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0xA5D9DD} );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function render() {
    requestAnimationFrame( render );
    renderer.render( scene, camera );
}
render();
}
 
</script>
<body onload="main()">
<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" height="200" width="200">
<text x="30" y="40" font-size="18" font-family="Arial" fill="white">(0,1)</text>
<text x="130" y="40" font-size="18" font-family="Arial" fill="white">(1,1)</text>
<text x="30" y="170" font-size="18" font-family="Arial" fill="white">(0,0)</text>
<text x="130" y="170" font-size="18" font-family="Arial" fill="white">(1,0)</text>
</svg>
</script>

javascriptコードを一切邪魔しないところがいいかもしれない
が、位置あわせに変数が使えないのが難点。

TextGeometryはややこしくてできなかった(失敗コード)

<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/geometries/TextGeometry.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/utils/FontUtils.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/fonts/helvetiker_regular.typeface.js"></script>
<script type='text/javascript' >
function main(){
var scene = new THREE.Scene();
var camera = new THREE.OrthographicCamera ( -1.0, 1.0,1.0, -1.0, 0.1, 2000 )
 
var renderer = new THREE.WebGLRenderer({ alpha: true });//アルファチャンネルを有効化
renderer.setClearColor( 0x533E25, 0.6);//半透明茶色
renderer.setSize( 200, 200);
document.body.appendChild( renderer.domElement );//ここで適当な大きさの<canvas>エレメントが追加されます
 
var textGeo = new THREE.TextGeometry( "Hello, World!",{} );
var textMat= new THREE.MeshLambertMaterial( { color: 0x00ff00 } );
var textMesh= new THREE.Mesh( textGeo , textMat);
textGeo .computeBoundingBox();
var textWidth = textGeo .boundingBox.max.x - textGeo .boundingBox.min.x;
 
textMesh.position.set( -0.5 * textWidth, 50, 100 );
textMesh.rotation.x = -Math.PI / 4;
scene.add( textMesh);
function render() {
    requestAnimationFrame( render );
    renderer.render( scene, camera );
}
render();
}
 
</script>
<body onload="main()">
</script>

。。。出来なかった。
準備が大量だし、Pixi.jsのテキストの方がずっと簡単
Bibliography

svg-text text

サポートサイト Wikidot.com svg-texttext