初学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的可以在三个方面进行定制: * 主题 * ...
随机推荐
- C++Primer学习日记
计划:4.27-4.30 完成IO库.顺序容器两章 4/28 ------------------------------------------------- 为什么要使用using namespa ...
- python1.2元组与字典:
#定义元组(),元组与列表类似但元素不可以更改a=(1,2,3,4,5,6,"a","b","c","d"," ...
- Qt信号参数中使用QVariantList时编译问题
今天调试代码时遇到一个奇怪的问题,不过一般感觉比较奇怪的问题,最后查到原因时,原因都比较简单! 编译问题 先来看一下qt的编译错误,提示一堆错误: In file included from D:\Q ...
- Python面向对象,站在更高的角度来思考
开篇 面向过程编程和面向对象编程是两种基本的编程思想. 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做案例的人,却不知道如何去 ...
- C#-Func<>
与C#-Action十分相似, Func<> 也是c#内置的委托类型,不同的是, Func<> 只能用来引用具有返回值的方法,也就是说,在使用它时,至少需要在尖括号内指定一种类 ...
- 【Java】AES加机解密工具类代码
import java.security.NoSuchAlgorithmException; import java.security.SecureRandom; import javax.crypt ...
- 用python爬虫监控CSDN博客阅读量
作为一个博客新人,对自己博客的访问量也是很在意的,刚好在学python爬虫,所以正好利用一下,写一个python程序来监控博客文章访问量 效果 代码会自动爬取文章列表,并且获取标题和访问量,写入exc ...
- 简单的main方法调用一个加减法函数背后的细节
测试程序 /* * AddTest.c * * Created on: 2019年10月13日 * Author: appweb */ #include <stdio.h> int add ...
- 太厉害了,阿里大牛居然把Git,GitHub总结的这么全面,撸源码去
“版本控制系统”( Version Control System, vcs)是程序代码管理软件的通称,是用来保存程序文件的修改记录以及历史版本,以便日后查看或是使用.Vcs已经有数十年的发展历史,最早 ...
- golang slice 简单排序
原文链接:https://www.jianshu.com/p/603be4962a62 demo package main import ( "fmt" "sort&qu ...