初学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的可以在三个方面进行定制: * 主题 * ...
随机推荐
- 利用Data Vault对数据仓库进行建模（二）
写在前面 本篇先不讨论Data Vault其本身,因为不见得所有人都接受这个.但是里边有一些很不错的东西跟主流的数据仓库方法是有共同点的,所以这里主要讨论这些共同的方法,在笔者看来,无论是Kimbal ...
- static关键字设计原理
语法只是表象,原理才是关键!!! 灵魂static关键字 Java规定:方法只能由对象来调用. 换句话来说,在面向对象的思维下,方法与对象存在一种强耦合. 方法在没有对象的情况下无法调用,于是上帝派来 ...
- .net core MongoDB 初试
是这样的,我们有一个场景,另一个服务器是写到MongoDB里面,我们的MVC页面要展示,需要分页展示 自己写了一个DAL public class MongoConnect { public stri ...
- 【SCOI2008】奖励关 题解（状压DP+期望）
题目链接 题目大意:给定$n$个宝物,每次随机抛出一个宝物,奖励分数为$p_i$.但如果选这个宝物必须选过它的前置宝物集合.共进行$K$轮问最优策略下的期望. $n\leq 15,-10^6\leq ...
- Java助教工作总结
很荣幸在步入在研究生之际,有机会能协助代老师完成面向对象程序设计(java)课程的教学工作.这也是我人生中第一次接触助教工作,好多东西不太清楚,也没经验,有什么做的不好的,还望老师同学及时指出. 上周 ...
- Linux系统安装MySQL详细教程
首先进入MySQL官网下载rpm安装包 用yum install mysql80-community-release-el7-3.noarch.rpm 安装 yum repolist all|grep ...
- C#设计模式之18-备忘录模式
备忘录模式(Memento Pattern) 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/421 访问. 备忘录模式属 ...
- Linux中.bashrc与.bash_profile的对比
如果你平时在命令行上花费了大量时间,那么你可能会萌生出希望定制 Shell 环境的想法.今天本文就和大家讲解该如何实现你们的这个想法.其实可以通过创建别名.向环境变量 $PATH 添加新目录或更改 S ...
- Python 读取word中表格数据、读取word修改并保存、替换word中词汇、读取word中每段内容，读取一段话中相同样式内容，理解Document中run
from docx import Document path = r'D:\pywork\12' # word信息表所在文件夹 w = Document(path + '/' + 'word信息表.d ...
- 数据 恢复----判断Raid盘序及校验方向
重组Raid(如何判断校验方向及盘序) 1. 常规左异结构[backward parity(反向奇偶校验--(静态))] 校验块:校验块从最后一块物理盘开始写起,然后依次往前面的盘中写入,当写到第一块 ...