Displaying Japanese Text in Three.js[r145]
Want to display Japanese text in Three.js but looking for a simple method?
The common approach to displaying text in Three.js is to use FontLoader and TextGeometry to render 3D text.
In the extracted three.js folder “/examples/fonts” you will find font files such as gentilis_regular.typeface.json, helvetiker_regular.typeface.json, and optimer_regular.typeface.json, but these do not support Japanese.
In addition, loading font files can take time.
This article explains in detail how to render flexible text without using TextGeometry!
The method dynamically generates a transparent image from the text you want to display using JavaScript, then applies that transparent image as a texture to a plane, allowing you to show 2D characters in 3D space.
Example
Left mouse drag rotates, right mouse drag moves the camera, and the wheel zooms in/out.
Swipe to rotate, drag with two fingers on the screen to move the camera, and pinch in/out to zoom.
Source Code
・・・
// ■ Process to display text
// Convert text to image
png=CreateTextPng("Display Text","96px","#ffffff");
// Load the texture from the text image
textureText = new THREE.TextureLoader().load( png.img );
// Create material
materialText=new THREE.MeshBasicMaterial({
color:0xffffff, map:textureText ,side:THREE.FrontSide,
transparent:true, opacity:1.0,
});
// Create plane geometry
planeGeo=new THREE.PlaneGeometry(png.w/10, png.h/10,1,1);
// Create mesh
meshText=new THREE.Mesh(planeGeo,materialText);
meshText.position.set(0, 0, 10.1);
scene.add(meshText);
・・・
// Specify (string, font size, font color) and return {img:png image, w:width, h:height}
function CreateTextPng(text,size,color){
let can=document.createElement("canvas");
let ctx=can.getContext("2d", {willReadFrequently:true});
family=
'Verdana,Roboto,"Droid Sans","游ゴシック",YuGothic,"メイリオ",Meiryo,'+
'"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","ＭＳ Ｐゴシック",sans-serif';
ctx.font=size+" "+family;
ctx.baseLine="top";
ctx.textAlign="left";
let measure=ctx.measureText(text);
can.width=measure.width;
can.height=measure.fontBoundingBoxAscent+measure.fontBoundingBoxDescent;
// When width/height is changed, font needs to be reset
ctx.font=size+" "+family;
ctx.baseLine="top";
ctx.textAlign="left";
// Make transparent
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle="rgb(255,255,255)";
ctx.fillRect(0,0,can.width,can.height);
// Switch back to normal drawing
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle=color;
ctx.fillText(text,Math.abs(measure.actualBoundingBoxLeft),measure.actualBoundingBoxAscent);
let png=can.toDataURL('image/png');
return {img:png, w:can.width, h:can.height};
}