博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
初学WebGL引擎-BabylonJS:第2篇-基础模型体验
阅读量:6976 次
发布时间:2019-06-27

本文共 3300 字,大约阅读时间需要 11 分钟。

    此次学习进度会比之前快很多,有了合适的学习方法后也就会有更多的乐趣产生了。

    接上一章代码


    上章代码

    
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

生成后记得左键鼠标,切换镜头。目前还没处理好镜头的初始位置

以下是看到的结果

哈哈,大功告成。这里可以发散思维完成更有趣的东西。

转载于:https://www.cnblogs.com/slxb/p/5149685.html

你可能感兴趣的文章
try finally 中的return
查看>>
HBase scan setBatch和setCaching的区别
查看>>
The Ultimate Guide To iPhone Resolutions
查看>>
Ubuntu 12.10 拨号上网及停用方法
查看>>
apkplug插件托管服务简化与简介-05
查看>>
Lucene.net: the main concepts
查看>>
EXP/EXPDP, IMP/IMPDP应用
查看>>
Eclipse create git repository failure(egit)
查看>>
mongodb学习笔记6--杂项与补充
查看>>
solrcloud Read and Write Side Fault Tolerance
查看>>
ADF12C 在线预览PDF文件 afinlineFrame
查看>>
python urllib2 开启调试
查看>>
总结 20 个开发细节
查看>>
面向中小企业的视频云服务 视频托管
查看>>
软件开发流程包含哪些内容
查看>>
JAVA增删改查XML文件
查看>>
JSON入门基础知识
查看>>
解决ubuntu14.04下Qt 5.3.1下的QtCreator fcitx,ibus不能输入中文
查看>>
什么是MOS ?
查看>>
linux发送email错误 501 Syntax: HELO hostname
查看>>