BabylonJS - Kết cấu động
Dynamic Texture của BabylonJS tạo ra một canvas và bạn có thể dễ dàng viết văn bản trên texture. Nó cũng cho phép bạn làm việc với canvas và sử dụng tất cả các tính năng có sẵn với canvas html5 được sử dụng với texture động.
Chúng ta sẽ làm việc trên một ví dụ, sẽ chỉ ra cách viết văn bản trên kết cấu và cũng sẽ vẽ một Đường cong bezier trên lưới mà chúng ta tạo.
Cú pháp
Sau đây là cú pháp để tạo Kết cấu động:
var myDynamicTexture = new BABYLON.DynamicTexture(name, option, scene);Thông số
Sau đây là các tham số bắt buộc để tạo kết cấu động:
name - tên của kết cấu động
option - sẽ có chiều rộng và chiều cao của kết cấu động
scene - cảnh được tạo
Cú pháp
Sau đây là cú pháp để viết văn bản trên kết cấu:
myDynamicTexture.drawText(text, x, y, font, color, canvas color, invertY, update);Thông số
Sau đây là các thông số cần thiết để viết văn bản trên kết cấu:
text - văn bản được viết;
x - khoảng cách từ mép bên trái;
Y - khoảng cách từ cạnh trên hoặc cạnh dưới, tùy thuộc vào invertY;
font - định nghĩa phông chữ ở dạng phông-kiểu, cỡ phông, tên_từ;
invertY - true theo mặc định trong trường hợp này y là khoảng cách từ đỉnh, khi false, y là khoảng cách từ đáy và các chữ cái đảo ngược;
update - true theo mặc định, kết cấu động sẽ ngay lập tức được cập nhật.
Bản giới thiệu
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>MDN Games: Babylon.js demo - shapes</title>
<script src = "https://end3r.github.io/MDN-Games-3D/Babylon.js/js/babylon.js"></script>
<style>
html,body,canvas { margin: 0; padding: 0; width: 100%; height: 100%; font-size: 0; }
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI/2, Math.PI / 3, 25, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;
var box = BABYLON.Mesh.CreateBox("box", 3.0, scene);
box.position = new BABYLON.Vector3(0, 0, -5);
//Create dynamic texture
var textureGround = new BABYLON.DynamicTexture("dynamic texture", {width:512, height:256}, scene);
var textureContext = textureGround.getContext();
var materialGround = new BABYLON.StandardMaterial("Mat", scene);
materialGround.diffuseTexture = textureGround;
box.material = materialGround;
//Add text to dynamic texture
var font = "bold 60px Arial";
textureGround.drawText("Box", 200, 150, font, "green", "white", true, true);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>Đầu ra
Kết cấu động cũng cho phép làm việc với các phương thức và thuộc tính canvas html5 trên kết cấu động như sau:
Cú pháp
var ctx = myDynamicTexture.getContext();Bản giới thiệu
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> Babylon.JS : Demo2</title>
<script src = "babylon.js"></script>
<style>
canvas { width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function () {
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI/2, Math.PI / 3, 25, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;
var ground = BABYLON.MeshBuilder.CreateGround("ground1", {width: 20, height: 10, subdivisions: 25}, scene);
//Create dynamic texture
var textureGround = new BABYLON.DynamicTexture("dynamic texture", 512, scene);
var textureContext = textureGround.getContext();
var materialGround = new BABYLON.StandardMaterial("Mat", scene);
materialGround.diffuseTexture = textureGround;
ground.material = materialGround;
//Draw on canvas
textureContext.beginPath();
textureContext.moveTo(75,40);
textureContext.bezierCurveTo(75,37,70,25,50,25);
textureContext.bezierCurveTo(20,25,20,62.5,20,62.5);
textureContext.bezierCurveTo(20,80,40,102,75,120);
textureContext.bezierCurveTo(110,102,130,80,130,62.5);
textureContext.bezierCurveTo(130,62.5,130,25,100,25);
textureContext.bezierCurveTo(85,25,75,37,75,40);
textureContext.fillStyle = "red";
textureContext.fill();
textureGround.update();
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>Đầu ra
Giải trình
Chúng tôi đã tạo lưới mặt đất và thêm kết cấu động cho nó.
//ground mesh
var ground = BABYLON.MeshBuilder.CreateGround("ground1", {width: 20, height: 10, subdivisions: 25}, scene);
//Create dynamic texture
var textureGround = new BABYLON.DynamicTexture("dynamic texture", 512, scene);
//adding dynamic texture to ground using standard material
var materialGround = new BABYLON.StandardMaterial("Mat", scene);
materialGround.diffuseTexture = textureGround;
ground.material = materialGround;Để làm việc với canvas trên texture động, trước tiên chúng ta cần gọi phương thức canvas:
var textureContext = textureGround.getContext()Vào canvas, chúng ta sẽ thêm bezierCurve như sau:
textureContext.beginPath();
textureContext.moveTo(75,40);
textureContext.bezierCurveTo(75,37,70,25,50,25);
textureContext.bezierCurveTo(20,25,20,62.5,20,62.5);
textureContext.bezierCurveTo(20,80,40,102,75,120);
textureContext.bezierCurveTo(110,102,130,80,130,62.5);
textureContext.bezierCurveTo(130,62.5,130,25,100,25);
textureContext.bezierCurveTo(85,25,75,37,75,40);
textureContext.fillStyle = "red";
textureContext.fill();
textureGround.update();