<!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 () {
// Get the canvas element
const canvas = document.getElementById("renderCanvas");
// Generate the BABYLON 3D engine
const engine = new BABYLON.Engine(canvas, true);
const createScene = function () {
const scene = new BABYLON.Scene(engine);
// 1. カメラの作成
// ArcRotateCameraは、ターゲットを中心に周回するカメラです。
// 引数: name, alpha(Y軸回転), beta(X軸回転), radius(距離), target, scene
const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true); // マウス操作でカメラを動かせるようにする
// 2. ライトの作成
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;
// 3. 白い板（Plane）の作成
const plane = BABYLON.MeshBuilder.CreatePlane("plane", { size: 2 }, scene);
plane.position.y = 1; // 地面から少し浮かせる
plane.position.z = 1; // カメラの少し手前に配置
plane.rotation.y = Math.PI; // テキストがカメラに向くように回転
// 板のマテリアル（白色）
const planeMaterial = new BABYLON.StandardMaterial("planeMat", scene);
planeMaterial.diffuseColor = new BABYLON.Color3(1, 1, 1); // 白
plane.material = planeMaterial;
// 4. GUIテクスチャを作成し、板に適用して日本語テキストを表示
const adt = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(plane, 1024, 1024);
const textBlock = new BABYLON.GUI.TextBlock();
textBlock.text = "こんにちは、\nBabylon.jsの世界へようこそ！"; // 表示したい日本語テキスト
textBlock.color = "black"; // テキストの色
textBlock.fontSize = 120; // フォントサイズ
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();
// Register a render loop to repeatedly render the scene
engine.runRenderLoop(function () {
scene.render();
});
// Watch for browser/canvas resize events
window.addEventListener("resize", function () {
engine.resize();
});
});
</script>
</body>
</html>
使用変数
| -------( Function ) | |
| adt | |
| camera | |
| canvas | |
| charset | |
| color | |
| content | |
| createScene | |
| diffuseColor | |
| engine | |
| equiv | |
| fontSize | |
| id | |
| intensity | |
| light | |
| material | |
| orizontalAlignment | |
| plane | |
| planeMaterial | |
| scene | |
| src | |
| text | |
| textBlock | |
| textWrapping | |
| tVerticalAlignment | |
| y | |
| z |