初学WebGL引擎-BabylonJS：第2篇-基础模型体验
此次学习进度会比之前快很多，有了合适的学习方法后也就会有更多的乐趣产生了。
接上一章代码
上章代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/> <title>Babylon - Getting Started</title> <!-- link to the last version of babylon --> <script src="babylon.2.2.max.js"></script> </head> <style> html, body { overflow: hidden; width : 100%; height : 100%; margin : 0; padding : 0; } #renderCanvas { width : 100%; height : 100%; touch-action: none; } </style> <body> <canvas id="renderCanvas"></canvas> <script> window.addEventListener('DOMContentLoaded', function() { //获取画布对象 var canvas = document.getElementById('renderCanvas'); //加载巴比伦3D引擎 var engine = new BABYLON.Engine(canvas, true); //创建场景 var createScene = function() { // 通过引擎创建基本场景 var scene = new BABYLON.Scene(engine); // 创建一个开放免费的相机，地点位于x:0(横向距离), y:5(高度), z:-10(纵向距离) var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(9, 5,-10), scene); // 相机到场景的起源 camera.setTarget(BABYLON.Vector3.Zero()); // 相机放置画布 camera.attachControl(canvas, false); // 创建基本光源, 目标位于 x:0,y:1,z:0 -(由天空出现) var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene); // 创建一个内置的“球”的形状,它的构造函数包括5个参数:名称、宽度、深度、细分,场景(例子中仅4个参数) var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene); // 球向上移动高的二分之一距离 sphere.position.y = 1; // 创建一个内置的“地面”，它的构造函数包括5个参数:名称、宽度、深度、细分,场景 var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene); // 返回该场景 return scene; } //赋予该场景于变量 var scene = createScene(); //在引擎中循环运行这个场景 engine.runRenderLoop(function(){ scene.render(); }); //追加事件：帆布与大小调整程序 window.addEventListener('resize', function(){ engine.resize(); }); }); </script> </body> </html>
运行结果
- 【playground】-basic scene（基础场景）
本部分同上述代码相同。跳过
- 【playground】-basic elements（基础元素）
本部分引用了新镜头
ArcRotateCamera
该镜头可以锁定一个点成球形观察
以及多个控件的使用
HemisphericLight：灯关
box：箱
sphere：球
plane：平面
cylinder：油缸
torus：环
TorusKnot：环结
lines：线
ribbon：丝带
下面是官方源码：
var createScene = function () { var scene = new BABYLON.Scene(engine); var camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, Math.PI / 8, 50, BABYLON.Vector3.Zero(), scene); camera.attachControl(canvas, true); var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene); //Creation of a box //(name of the box, size, scene) var box = BABYLON.Mesh.CreateBox("box", 6.0, scene); //Creation of a sphere //(name of the sphere, segments, diameter, scene) var sphere = BABYLON.Mesh.CreateSphere("sphere", 10.0, 10.0, scene); //Creation of a plan //(name of the plane, size, scene) var plan = BABYLON.Mesh.CreatePlane("plane", 10.0, scene); //Creation of a cylinder //(name, height, diameter, tessellation, scene, updatable) var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false); // Creation of a torus // (name, diameter, thickness, tessellation, scene, updatable) var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false); // Creation of a knot // (name, radius, tube, radialSegments, tubularSegments, p, q, scene, updatable) var knot = BABYLON.Mesh.CreateTorusKnot("knot", 2, 0.5, 128, 64, 2, 3, scene); // Creation of a lines mesh var lines = BABYLON.Mesh.CreateLines("lines", [ new BABYLON.Vector3(-10, 0, 0), new BABYLON.Vector3(10, 0, 0), new BABYLON.Vector3(0, 0, -10), new BABYLON.Vector3(0, 0, 10) ], scene); // Creation of a ribbon // let's first create many paths along a maths exponential function as an example var exponentialPath = function (p) { var path = []; for (var i = -10; i < 10; i++) { path.push(new BABYLON.Vector3(p, i, Math.sin(p / 3) * 5 * Math.exp(-(i - p) * (i - p) / 60) + i / 3)); } return path; }; // let's populate arrayOfPaths with all these different paths var arrayOfPaths = []; for (var p = 0; p < 20; p++) { arrayOfPaths[p] = exponentialPath(p); } // (name, array of paths, closeArray, closePath, offset, scene) var ribbon = BABYLON.Mesh.CreateRibbon("ribbon", arrayOfPaths, false, false, 0, scene); // Moving elements box.position = new BABYLON.Vector3(-10, 0, 0); // Using a vector sphere.position = new BABYLON.Vector3(0, 10, 0); // Using a vector plan.position.z = 10; // Using a single coordinate component cylinder.position.z = -10; torus.position.x = 10; knot.position.y = -10; ribbon.position = new BABYLON.Vector3(-10, -10, 20); return scene; }
建议调整不同的参数查看不同的效果
学到这里，我的爱人联系到我。突发奇想，写一个英文单词出来如何？
那么我就开始琢磨，就写一个[LOVE]给爱人吧。
由于本人技术拙略，就按照了以下方式处理
L：使用lines完成
O：使用torus完成
V：使用lines完成
E：适用lines完成
镜头：由上至下最好
于是便有了下面的代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/> <title>Babylon - Getting Started</title> <!-- link to the last version of babylon --> <script src="babylon.2.2.max.js"></script> </head> <style> html, body { overflow: hidden; width : 100%; height : 100%; margin : 0; padding : 0; } #renderCanvas { width : 100%; height : 100%; touch-action: none; } </style> <body> <canvas id="renderCanvas"></canvas> <script> window.addEventListener('DOMContentLoaded', function() { //获取画布对象 var canvas = document.getElementById('renderCanvas'); //加载巴比伦3D引擎 var engine = new BABYLON.Engine(canvas, true); //创建场景 var createScene = function() { // 通过引擎创建基本场景 var scene = new BABYLON.Scene(engine); // 创建一个开放免费的相机，地点位于x:0(横向距离), y:5(高度), z:-10(纵向距离) var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 10,0), scene); // 相机到场景的起源 camera.setTarget(BABYLON.Vector3.Zero()); // 相机放置画布 camera.attachControl(canvas, false); // 创建基本光源, 目标位于 x:0,y:1,z:0 -(由天空出现) var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene); var lines = BABYLON.Mesh.CreateLines("lines", [ new BABYLON.Vector3(0, 0, 2.5), new BABYLON.Vector3(0, 0, 0), new BABYLON.Vector3(1, 0, 0), ], scene); var torus = BABYLON.Mesh.CreateTorus("torus", 2, 0.1, 16, scene, false); torus.position.x = 2.3; torus.position.z = 1; var lines = BABYLON.Mesh.CreateLines("lines", [ new BABYLON.Vector3(3.5, 0, 2.5), new BABYLON.Vector3(4, 0, 0), new BABYLON.Vector3(5, 0, 2.5), ], scene); var lines = BABYLON.Mesh.CreateLines("lines", [ new BABYLON.Vector3(6, 0, 2.5), new BABYLON.Vector3(5, 0, 2.5), new BABYLON.Vector3(5, 0, 1.75), new BABYLON.Vector3(6, 0, 1.75), new BABYLON.Vector3(5, 0, 1.75), new BABYLON.Vector3(5, 0, 0), new BABYLON.Vector3(6, 0, 0), ], scene); // 返回该场景 return scene; } //赋予该场景于变量 var scene = createScene(); //在引擎中循环运行这个场景 engine.runRenderLoop(function(){ scene.render(); }); //追加事件：帆布与大小调整程序 window.addEventListener('resize', function(){ engine.resize(); }); }); </script> </body> </html>
生成后记得左键鼠标，切换镜头。目前还没处理好镜头的初始位置
以下是看到的结果
哈哈，大功告成。这里可以发散思维完成更有趣的东西。
