此次学习进度会比之前快很多,有了合适的学习方法后也就会有更多的乐趣产生了。
接上一章代码
上章代码
Babylon - Getting Started
运行结果
- 【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完成
镜头:由上至下最好
于是便有了下面的代码
Babylon - Getting Started
生成后记得左键鼠标,切换镜头。目前还没处理好镜头的初始位置
以下是看到的结果
哈哈,大功告成。这里可以发散思维完成更有趣的东西。