初学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的可以在三个方面进行定制: * 主题 * ...
随机推荐
- day6. while双项循环及for循环
一.双向循环经典练习 1.打印十行十列小星星(2个循环) # j 外循环用来控制行数 j = 0 while j<10: # 打印一行十个星星 i = 0 while i <10: # 写 ...
- 【HEOI2015】公约数数列 题解(分块)
前言:毒瘤数据结构题,半个下午都在搞它了…… --------------------------- 题目链接 题目大意:给定一个长度为$n$的序列,有两种操作:1.把$a_x$的值改成$y$.2.求 ...
- time模块 random模块
time模块 time.sys等模块是C语言实现的,内置到了python解释器的.而不是py文件. 导入模块的时候,优先到python解释器,然后才会找py文件. #时间戳 #计算 # print(t ...
- MYSQL 按某个字段分组,然后取每组前3条记录
先初始化一些数据,表名为 test ,字段及数据为: SQL执行结果为:每个 uid 都只有 3 条记录. SQL语句为: SELECT * FROM test main WHERE ...
- day25:魔术方法
目录 1.__del__(析构方法) 2.魔术方法:__str__ 3.魔术方法:__repr__ 4.魔术方法:__call__ 5.魔术方法:__bool__ 6.魔术方法:__add__& ...
- 2020重新出发,JAVA学前了解,Windosws常用快捷键
前言:windows 常用快捷键 标准计算机键盘共104键,除了26个字母键.符号键.数字键外,剩下的都是一些功能键: 键盘功能键 常用功能键:Esc.Tab.Caps Lock.Shift.Ctrl ...
- 一文读懂GaussDB(for Mongo)的计算存储分离架构
摘要:IDC认为,目前阶段来看,企业亟待解决的是数字化能力提升,包括:与业务的深入结合能力:数据处理和挖掘能力:以及IT技术运营和管理能力.特别是数据处理和挖掘能力,因为数字化转型推进企业从以流程为核 ...
- neo4j批量导入数据的两种解决方案
neo4j批量导入数据有两种方法,第一种是使用cypher语法中的LOAD CSV,第二种是使用neo4j自带的工具neo4j-admin import. LOAD CSV 导入的文件必须是csv文件 ...
- 《Windows程序设计(第5版 珍藏版)》配书光盘
https://pan.baidu.com/s/1ro72qQja_xTbf-Ik8b06Ng
- 共享&img (给作者自己
--------------------------------------------------------- ------------------------------------------ ...