初学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>

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

以下是看到的结果

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

初学WebGL引擎-BabylonJS：第2篇-基础模型体验的更多相关文章

初学WebGL引擎-BabylonJS：第0篇-起因
学习WebGL的BabylonJS是在一次偶然的情况下进行的,主要为了满足个人对全栈开发的欲望. 言归正传,下面开始简单说说相关过程 WebGL是什么?WebGL是基于html的客户端页面技术,基于h ...
初学WebGL引擎-BabylonJS：第1篇-基础构造
继续上篇随笔步骤如下: 一:http://www.babylonjs.com/中下载源码.获取其中babylon.2.2.js.建立gulp项目
初学WebGL引擎-BabylonJS：第8篇-阴影网格与活动
[playground]-shadows(阴影) 源码 var createScene = function () { var scene = new BABYLON.Scene(engine); / ...
初学WebGL引擎-BabylonJS：第6篇-碰撞交错与挑选
[playground]-collisions(碰撞) 先贴官方源码(机器翻译版本) var createScene = function () { var scene = new BABYLON.S ...
初学WebGL引擎-BabylonJS：第4篇-灯光动画与丛林场景
前几章接触的案例都是接近静态的,由这张开始开始接触大量动态的内容,包括球体灯光,变动的形体,以及一个虚拟的丛林场景下章我会试着结合1-9案例的内容做出一个demo出来 [playground]-l ...
初学WebGL引擎-BabylonJS：第3篇-方向纹理与相机
[playground]-rotatuib abd scaling(方向) 源码 var createScene = function () { var scene = new BABYLON.Sce ...
用基于WebGL的BabylonJS来共享你的3D扫描模型
转自:http://www.geekfan.net/6578/ 用基于WebGL的BabylonJS来共享你的3D扫描模型杰克祥子 2014 年 2 月 26 日 0 条评论标签:3D扫描 , B ...
深入学习jQuery选择器系列第一篇——基础选择器和层级选择器
× 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器前面的话选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...
[译]PrestaShop开发者指南第一篇基础
# 第一篇基础 PS(PrestaShop简称)一开始就设定了能够在它的基础上很简单的构建第三方模块的机制,让它成为一款具有极高定制性的电子商务软件. PS的可以在三个方面进行定制: * 主题 * ...

随机推荐

【BZOJ3307】雨天的尾巴题解（树链剖分+树上差分）
题目链接题目大意:给定一颗含有$n$个结点的树,每次选择两个结点$x$和$y$,对从$x$到$y$的路径上发放一带$z$类型的物品.问完成所有操作后每个结点发放最多的时哪种物品. 普通的树链剖分貌似 ...
TestFlight无法访问怎么办？TF如何链接AppStoreConnect解决教程
最近苹果商店半天下架近3万款应用的新闻闹的沸沸扬扬,很多被下架应用的运营商转将APP上架了TestFlight内测商店(TF签名上架),但是从7月31日起很多用户就开始反映TestFlight内测应用 ...
H5移动端手势密码组件
项目简介最近参加了2017年360前端星计划,完成了一个有趣的UI组件开发大作业,借机和大家分享一下移动端开发的技术啦~~ 本项目采用原生JS和Canvas实现移动端手势密码组件,支持手势密码设置和 ...
【源码】Python3使用Requests抓取和检测电光代理API,并查询ip代理是否成功
电光代理成立后,做一篇笔记,记录我使用Requests抓取和测试电光代理的方法很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做 ...
java中ThrealLocal的理解
目录 java中threadlocal的理解一.threadlocal的生命周期和ThreadLocalMap的生命周期二.ThreadLocal的作用三.threadlocal示例四.Inh ...
2020-04-22：谈谈JDK1.8下的HashMap在并发情况下链表成环的过程。（挖）
福哥答案2020-04-22: jdk1.8下的hashmap采用的是尾插法,不会有链表成环的问题.jdk1.7下采用的头插***有链表成环的问题. hashmap成环原因的代码出现在transfer ...
VS Code 黑宝书背后的故事
自开售以来,<Visual Studio Code 权威指南>就受到了许多读者朋友的青睐.在京东和当当两大平台上,都分别取得了不错的绩: 当当:计算机新书热卖榜第一名京东:科技IT新书榜 ...
题解 P1407
建图方式:旧关系女人连男人,现关系男人连女人(当然,反过来也可以) 原因可以这样考虑: 如果一个男的把女的绿了,那么这个女人就会去找一个她曾经交往过的男人,也就是在这种情况下,某种"影响&q ...
【AHOI2009】维护序列 - 线段树
题目描述老师交给小可可一个维护数列的任务,现在小可可希望你来帮他完成. 有长为N的数列,不妨设为a1,a2,…,aN .有如下三种操作形式: (1)把数列中的一段数全部乘一个值; (2)把数列中的一 ...
【SDOI2009】 HH的项链 - 莫队
题目描述 HH 有一串由各种漂亮的贝壳组成的项链.HH 相信不同的贝壳会带来好运,所以每次散步完后,他都会随意取出一段贝壳,思考它们所表达的含义.HH 不断地收集新的贝壳,因此,他的项链变得越来越长. ...

初学WebGL引擎-BabylonJS：第2篇-基础模型体验

初学WebGL引擎-BabylonJS：第2篇-基础模型体验的更多相关文章

随机推荐

热门专题