Home > Developer > Web Develop
Base scene with two shapes
Before you start, make sure you have a WEBGL-enabled browser (such as: ie11+, Firefox 4+, Google Chrome +, opera15+, etc.).
HTML sectionFirst, create a basic HTML5 Web page:
<! DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-type" Content="text/html; Charset=utf-8 "/> <title>Babylon-base Scenario</title> </head> <body> </body></html>inside, add this CSS to maximize the canvas view:
<style>HTML,Body { overflow: hidden; width: %; height: %; margin: 0; padding: 0; } #renderCanvas { width: %; height: %; touch-action: none; }</style>Included external JavaScript section (frame)Now load our framework file. Behind the CSS, (and also inside), add:
<script src="Babylon.js"></script><script src="Hand.js"></script><script src="Cannon.js"></script> <!--optional physics engine--<!--<script src= "Oimo.js" ></script> new physics engine--
(If you don't have these files, you can find them here: Https://github.com/BabylonJS/Babylon.js, and here: http://handjs.codeplex.com/)
Next, we go inside the page ... <body> Then add a HTML5 canvas element and we'll use it to draw our scene.
<canvas id="renderCanvas"></canvas>
Now, we're jumping from HTML5 into JavaScript. Still in <body> -house, please add:
<script>// 从上面的HTML里获取我们的画布元素 var canvas = document.getElementById("renderCanvas");// 加载BABYLON 3D引擎 varnewtrue);
After that, you'll add code to create the scene. To keep your code and Babylon.js casino compatible, we recommend that you insert a ' createscene ' function here. In addition to generating a Babylon scene object, you also add the scene's other needs in this createscene () function: A camera, a light source, one or more shapes/meshes.
So now, add the entire createscene function here to your Web page:
//This is the beginning of the creation function that calls T immediately after it is built varCreatescene = function () { ///Create a Babylon Scene object now varScene =NewBABYLON. Scene (engine);//Change the background color of the scene to green.Scene.clearcolor =NewBABYLON. Color3 (0,1,0);//Create and place a free camera varCamera =NewBABYLON. Freecamera ("Camera1",NewBABYLON. Vector3 (0,5, -Ten), scene);//Align the camera towards the scene origin.Camera.settarget (BABYLON. Vector3.zero ());//Attaching the camera to the canvasCamera.attachcontrol (Canvas,false);//Create a light source at the 0,1,0 point toward the sky. varLight =NewBABYLON. Hemisphericlight ("Light1",NewBABYLON. Vector3 (0,1,0), scene);//Dim the Light Source LightLight.intensity =. 5;//Let's try Babylonjs built-in ' ball ' shape. Parameters: Name, subdivision, size, scene varSphere = BABYLON. Mesh.createsphere ("Sphere1", -,2, scene);//will move the ball up 1/2 its heightSPHERE.POSITION.Y =1;//Let's try Babylonjs built-in ' ground ' shape. Parameters: Name, width, depth, subdivision, Scene varGround = BABYLON. Mesh.createground ("Ground1",6,6,2, scene);//Leave the function returnScene;};//Createscene function End
Yes, this is a function, but don't be frightened by it. Later in this tutorial you will learn more about the parameters and properties of light sources, cameras, built-in shapes. The most important point is that our createscene function has all that is required. It includes:
- A Babylon Scene object
- Attach a camera
- A light source that sets the target
- A sphere placed at the 0,1,0 (we moved it on the y-axis)
- A ground that is placed at the 0,0,0 (default place)
There are three other things to add to your page. First, add this to the call to the newly completed Createscene function:
// 现在, 调用刚创建完的createScene函数 var scene = createScene();
Then, the most important rendering loop. Add this:
// 注册一个渲染循环已重复的渲染场景 engine.runRenderLoop(function () { scene.render(); });
Finally, an optional but handy handler for changing the canvas/window resizing event. Add this:
// 监测浏览器/画布大小改变事件 window.addEventListener("resize", 函数 () { engine.resize(); });
All of the JavaScript code has been written to this end. Make sure you have the script, body, and HTML tag elements of the HTML closed. The last 3 lines of the HTML5 page should be:
</script></body></html>
You did it! Save your files (in the same folder as Babylon.js, Hand.js, and cannon.js files) and view them in a browser that already supports WEBGL. You'll see your new 3-D scene on the canvas.
And this almost similar createscene function in this tutorial can be seen here in the Babylon.js casino. You can also see that the scene is rendered online in real time! If you want to download the index.html file by ' Get. zip archive ', please click the download button in the casino.
Having problems?Here's what the whole page looks like:
<!doctype html><html><head> <meta charset="Utf-8"> <title>Babylon-base Scenario</title> <style> HTML,Body { overflow: hidden; width: %; height: %; margin: 0; padding: 0; } #renderCanvas { width: %; height: %; touch-action: none; } </style> <script src="Babylon.js"></script> <script src="Hand.js"></script> <script src="Cannon.js"></script> <!--optional physics engine --</head><body> <canvas id="Rendercanvas"></Canvas> <script type="Text/javascript"> //Get the canvas elements from the HTML below varCanvas = Document.queryselector ("#renderCanvas");//Load Babylon 3D engine varEngine =NewBABYLON. Engine (Canvas,true);// ------------------------------------------------------------- ///Here to start defining the function, which is called after the build is finished varCreatescene = function () { ///Create a Babylon Scene object now varScene =NewBABYLON. Scene (engine);//Change the background color of the scene to green.Scene.clearcolor =NewBABYLON. Color3 (0,1,0);//Create and place a free camera varCamera =NewBABYLON. Freecamera ("Camera1",NewBABYLON. Vector3 (0,5, -Ten), scene);//Align the camera towards the scene origin.Camera.settarget (BABYLON. Vector3.zero ());//Attaching the camera to the canvasCamera.attachcontrol (Canvas,false);//Create a light source at the 0,1,0 point toward the sky. varLight =NewBABYLON. Hemisphericlight ("Light1",NewBABYLON. Vector3 (0,1,0), scene);//Dim the Light Source LightLight.intensity =. 5;//Let's try Babylonjs built-in ' ball ' shape. Parameters: Name, subdivision, size, scene varSphere = BABYLON. Mesh.createsphere ("Sphere1", -,2, scene);//will move the ball up 1/2 its heightSPHERE.POSITION.Y =1;//Let's try Babylonjs built-in ' ground ' shape. Parameters: Name, width, depth, subdivision, Scene varGround = BABYLON. Mesh.createground ("Ground1",6,6,2, scene);//Leave the function returnScene };//End of Createscene function // ------------------------------------------------------------- ///Now, call the Createscene function that you just created varScene = Createscene ();//Register a render cycle for repeated rendered scenesEngine.runrenderloop ( function () {Scene.render (); });//Monitor browser/canvas size change eventsWindow.addeventlistener ("Resize", function () {engine.resize (); });</script></body></html>
Keep movingStarting at this point in this basic series tutorial, I'll focus on the contents of the Createscene function (the part between the dashes). I assume you already know how to insert the Createscene function of the babylonjs scene into the HTML5 page document (like the one above).
Try to remember the layout of this page and figure out that the Createscene function is its core. When you use the Babylon.js casino for a period of time, you will understand how convenient createscene () is, and you can simply paste and copy the content into and out of the editor window. This will allow others to help you solve the problem, but also allow you to help others solve the problem.
NextNow you can learn more about how to create more elements, such as spheres, cylinders, boxes, etc.
In the next Lianbi series- basic elements
Original website
The translation on GitHub
Create a basic scenario---webgl-based H5 3D game engine Babylonjs
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
