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

接上一章代码


上章代码

<!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篇-基础模型体验的更多相关文章

  1. 初学WebGL引擎-BabylonJS:第0篇-起因

    学习WebGL的BabylonJS是在一次偶然的情况下进行的,主要为了满足个人对全栈开发的欲望. 言归正传,下面开始简单说说相关过程 WebGL是什么?WebGL是基于html的客户端页面技术,基于h ...

  2. 初学WebGL引擎-BabylonJS:第1篇-基础构造

    继续上篇随笔 步骤如下: 一:http://www.babylonjs.com/中下载源码.获取其中babylon.2.2.js.建立gulp项目

  3. 初学WebGL引擎-BabylonJS:第8篇-阴影网格与活动

    [playground]-shadows(阴影) 源码 var createScene = function () { var scene = new BABYLON.Scene(engine); / ...

  4. 初学WebGL引擎-BabylonJS:第6篇-碰撞交错与挑选

    [playground]-collisions(碰撞) 先贴官方源码(机器翻译版本) var createScene = function () { var scene = new BABYLON.S ...

  5. 初学WebGL引擎-BabylonJS:第4篇-灯光动画与丛林场景

    前几章接触的案例都是接近静态的,由这张开始开始接触大量动态的内容,包括 球体灯光,变动的形体,以及一个虚拟的丛林场景 下章我会试着结合1-9案例的内容做出一个demo出来 [playground]-l ...

  6. 初学WebGL引擎-BabylonJS:第3篇-方向纹理与相机

    [playground]-rotatuib abd scaling(方向) 源码 var createScene = function () { var scene = new BABYLON.Sce ...

  7. 用基于WebGL的BabylonJS来共享你的3D扫描模型

    转自:http://www.geekfan.net/6578/ 用基于WebGL的BabylonJS来共享你的3D扫描模型 杰克祥子 2014 年 2 月 26 日 0 条评论 标签:3D扫描 , B ...

  8. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

  9. [译]PrestaShop开发者指南 第一篇 基础

    # 第一篇 基础 PS(PrestaShop简称)一开始就设定了能够在它的基础上很简单的构建第三方模块的机制,让它成为一款具有极高定制性的电子商务软件. PS的可以在三个方面进行定制: * 主题 * ...

随机推荐

  1. C++Primer学习日记

    计划:4.27-4.30 完成IO库.顺序容器两章 4/28 ------------------------------------------------- 为什么要使用using namespa ...

  2. python1.2元组与字典:

    #定义元组(),元组与列表类似但元素不可以更改a=(1,2,3,4,5,6,"a","b","c","d"," ...

  3. Qt信号参数中使用QVariantList时编译问题

    今天调试代码时遇到一个奇怪的问题,不过一般感觉比较奇怪的问题,最后查到原因时,原因都比较简单! 编译问题 先来看一下qt的编译错误,提示一堆错误: In file included from D:\Q ...

  4. Python面向对象,站在更高的角度来思考

    开篇 面向过程编程和面向对象编程是两种基本的编程思想. 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做案例的人,却不知道如何去 ...

  5. C#-Func<>

    与C#-Action十分相似, Func<> 也是c#内置的委托类型,不同的是, Func<> 只能用来引用具有返回值的方法,也就是说,在使用它时,至少需要在尖括号内指定一种类 ...

  6. 【Java】AES加机解密工具类代码

    import java.security.NoSuchAlgorithmException; import java.security.SecureRandom; import javax.crypt ...

  7. 用python爬虫监控CSDN博客阅读量

    作为一个博客新人,对自己博客的访问量也是很在意的,刚好在学python爬虫,所以正好利用一下,写一个python程序来监控博客文章访问量 效果 代码会自动爬取文章列表,并且获取标题和访问量,写入exc ...

  8. 简单的main方法调用一个加减法函数背后的细节

    测试程序 /* * AddTest.c * * Created on: 2019年10月13日 * Author: appweb */ #include <stdio.h> int add ...

  9. 太厉害了,阿里大牛居然把Git,GitHub总结的这么全面,撸源码去

    “版本控制系统”( Version Control System, vcs)是程序代码管理软件的通称,是用来保存程序文件的修改记录以及历史版本,以便日后查看或是使用.Vcs已经有数十年的发展历史,最早 ...

  10. golang slice 简单排序

    原文链接:https://www.jianshu.com/p/603be4962a62 demo package main import ( "fmt" "sort&qu ...