<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Babylon.js 日本語テキスト表示 (サイズ修正版)</title>
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#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>
window.addEventListener("DOMContentLoaded", function () {
const canvas = document.getElementById("renderCanvas");
const engine = new BABYLON.Engine(canvas, true);
const createScene = function () {
const scene = new BABYLON.Scene(engine);
// --- 1. カメラ ---
const targetPosition = new BABYLON.Vector3(0, 1, 0);
const camera = new BABYLON.ArcRotateCamera(
"camera", -Math.PI / 2, Math.PI / 2, 3, targetPosition, scene
);
camera.attachControl(canvas, true);
// --- 2. ライト ---
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;
// --- 3. 3Dの板 (メッシュ) ---
// (もし3Dの板自体の大きさを変えたい場合は、ここの 'size: 2' を変更します)
const plane = BABYLON.MeshBuilder.CreatePlane("plane", {
size: 2,
sideOrientation: BABYLON.Mesh.DOUBLESIDE
}, scene);
plane.position.y = 1;
// --- 4. GUIと日本語テキスト ---
const adt = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(plane, 1024, 1024);
// 白い背景 (GUIのRectangle)
const background = new BABYLON.GUI.Rectangle("background");
// ★修正: 1.0 (100%) から 0.8 (80%) に変更
// これで、板メッシュより一回り小さい白い四角になります。
background.width = 0.8;
background.height = 0.8;
background.background = "white";
background.thickness = 0;
adt.addControl(background);
// 日本語テキスト
const textBlock = new BABYLON.GUI.TextBlock();
textBlock.text = "こんにちは、\nBabylon.jsの世界へようこそ！";
textBlock.color = "black";
// ★修正: 文字サイズを 50 に変更
textBlock.fontSize = 50;
textBlock.fontWeight = "bold";
textBlock.textWrapping = true;
textBlock.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
textBlock.textVerticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
adt.addControl(textBlock);
return scene;
};
const scene = createScene();
engine.runRenderLoop(function () {
scene.render();
});
window.addEventListener("resize", function () {
engine.resize();
});
});
</script>
</body>
</html>
使用変数
| -------( Function ) | |
| adt | |
| background | |
| camera | |
| canvas | |
| charset | |
| color | |
| content | |
| createScene | |
| engine | |
| equiv | |
| fontSize | |
| fontWeight | |
| height | |
| id | |
| intensity | |
| light | |
| orizontalAlignment | |
| plane | |
| scene | |
| src | |
| targetPosition | |
| text | |
| textBlock | |
| textWrapping | |
| thickness | |
| tVerticalAlignment | |
| width | |
| y |