Babylon.JS是使用HTML5 canvas元素在Web上编写3D环境的好方法。
这是制作自己场景的最快捷,最简单的方法。创建一个3D场景很简单,只需添加一个摄像头,灯光和3D形状(网格)就可以了。
该 游乐场 是一个网站,其中有你需要创建自己的场景或编辑现有的一切。更多关于游乐场。 更多关于游乐场.
在操场内创建场景的模板是:
var createScene = function () {
// Create the scene space
var scene = new BABYLON.Scene(engine);
// Add a camera to the scene and attach it to the canvas
var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
// Add lights to the scene
var light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), scene);
var light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(0, 1, -1), scene);
// This is where you create and manipulate meshes
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {}, scene);
return scene;
};
您需要的其他一切都在游乐场内得到照顾。
在编写自己的HTML时,您只需要将createScene函数嵌入到带有 < script > 标记的HTML页面结构中,以及其他一些项目。您需要加载BabylonJS JavaScript代码。还可以在平板电脑和手机上使用BabylonJS使用指针事件而不是鼠标事件,因此也需要加载PEP事件系统。
此外,必须将canvas元素添加到body中,因为这是渲染3D场景的位置,并在代码中添加了引用变量canvas。您还需要在创建场景的函数之前生成BabylonJS引擎。
最后,添加代码来调用场景。这使得引擎能够在循环中连续渲染场景,并在浏览器调整大小时调整其大小。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Babylon Template</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://preview.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
</head>
<body>
<canvas id="renderCanvas" touch-action="none"></canvas> //touch-action="none" for best results from PEP
<script>
var canvas = document.getElementById("renderCanvas"); // Get the canvas element
var engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine
/******* Add the create scene function ******/
var createScene = function () {
// Create the scene space
var scene = new BABYLON.Scene(engine);
// Add a camera to the scene and attach it to the canvas
var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, new BABYLON.Vector3(0,0,5), scene);
camera.attachControl(canvas, true);
// Add lights to the scene
var light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), scene);
var light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(0, 1, -1), scene);
// Add and manipulate meshes in the scene
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter:2}, scene);
return scene;
};
/******* End of the create scene function ******/
var scene = createScene(); //Call the createScene function
// 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>
上面的示例使用较新的MeshBuilder方法创建形状,其中形状的变量在options对象参数中设置,并且比旧形式的BABYLON.Mesh.Create ....具有一些优势,它使用形状变量的参数列表。大多数Playground都使用旧方法,因为许多是在MeshBuilder存在之前创建的。
PEP用于指针事件是最近的建议,较早的建议是使用名为hand.js的系统。尽管hand.js不再维护,但两者都有效。您仍然可以在文档中找到对hand.js的引用。
现在,您已准备好进一步了解如何通过访问 Set Shapes创建更多形状,如球体,圆柱体,盒子等
BabylonJS 主要网站
BabylonJS Playground
PEP Github
hand.js Github