<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Babylon.js 日本語テキスト</title>
<style>
html,body{width:100%;height:100%;margin:0;overflow:hidden}
#renderCanvas{width:100%;height:100%;touch-action:none}
</style>
<script src="https://cdn.babylonjs.com/v8.31.0/babylon.js"></script>
<script src="https://cdn.babylonjs.com/v8.31.0/gui/babylon.gui.min.js"></script>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script>
const canvas=document.getElementById("renderCanvas"),engine=new BABYLON.Engine(canvas,true);
const scene=new BABYLON.Scene(engine);
new BABYLON.ArcRotateCamera("cam",-Math.PI/2,Math.PI/2,3,new BABYLON.Vector3(0,1,0),scene).attachControl(canvas,true);
new BABYLON.HemisphericLight("light",new BABYLON.Vector3(0,1,0),scene).intensity=.7;
const plane=BABYLON.MeshBuilder.CreatePlane("p",{size:2,sideOrientation:BABYLON.Mesh.DOUBLESIDE},scene);
plane.position.y=1;
const adt=BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(plane,1024,1024),
bg=new BABYLON.GUI.Rectangle();
bg.width=bg.height=.8;bg.background="white";bg.thickness=0;adt.addControl(bg);
const txt=new BABYLON.GUI.TextBlock();
txt.text="こんにちは、\nBabylon.jsの世界へようこそ！";
Object.assign(txt,{color:"black",fontSize:50,fontWeight:"bold",textWrapping:true,
textHorizontalAlignment:BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER,
textVerticalAlignment:BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER});
adt.addControl(txt);
engine.runRenderLoop(()=>scene.render());
addEventListener("resize",()=>engine.resize());
</script>
</body>
</html>
使用変数
| adt | |
| background | |
| bg | |
| canvas | |
| charset | |
| engine | |
| height | |
| id | |
| intensity | |
| lang | |
| plane | |
| scene | |
| src | |
| text | |
| thickness | |
| txt | |
| width | |
| y |