babylonjs 分部加载模型_初学WebGL引擎-BabylonJS:第2篇-基础模型体验
此次学习进度会比之前快很多,有了合适的学习方法后也就会有更多的乐趣产生了。
接上一章代码
上章代码
Babylon - Getting Started
}#renderCanvas{width:100%;height:100%;touch-action:none;
}
varcanvas=document.getElementById('renderCanvas');//加载巴比伦3D引擎
varengine= newBABYLON.Engine(canvas,true);//创建场景
varcreateScene= function() {//通过引擎创建基本场景
varscene= newBABYLON.Scene(engine);//创建一个开放免费的相机,地点位于x:0(横向距离), y:5(高度), z:-10(纵向距离)
varcamera= newBABYLON.FreeCamera('camera1',newBABYLON.Vector3(9,5,-10), scene);//相机到场景的起源
camera.setTarget(BABYLON.Vector3.Zero());//相机放置画布
camera.attachControl(canvas,false);//创建基本光源, 目标位于 x:0,y:1,z:0 -(由天空出现)
varlight= newBABYLON.HemisphericLight('light1',newBABYLON.Vector3(0,1,0), scene);//创建一个内置的“球”的形状,它的构造函数包括5个参数:名称、宽度、深度、细分,场景(例子中仅4个参数)
varsphere=BABYLON.Mesh.CreateSphere('sphere1',16,2, scene);//球向上移动高的二分之一距离
sphere.position.y= 1;//创建一个内置的“地面”,它的构造函数包括5个参数:名称、宽度、深度、细分,场景
varground=BABYLON.Mesh.CreateGround('ground1',6,6,2, scene);//返回该场景
returnscene;
}//赋予该场景于变量
varscene=createScene();//在引擎中循环运行这个场景
engine.runRenderLoop(function(){
scene.render();
});//追加事件:帆布与大小调整程序
window.addEventListener('resize',function(){
engine.resize();
});
});
运行结果
【playground】-basic scene(基础场景)
本部分同上述代码相同。跳过
【playground】-basic elements(基础元素)
本部分引用了新镜头
ArcRotateCamera
该镜头可以锁定一个点成球形观察
以及多个控件的使用
HemisphericLight:灯关
box:箱
sphere:球
plane:平面
cylinder:油缸
torus:环
TorusKnot:环结
lines:线
ribbon:丝带
下面是官方源码:
var createScene = function() {var scene = newBABYLON.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));
}returnpath;
};//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);returnscene;
}
建议调整不同的参数查看不同的效果
学到这里,我的爱人联系到我。突发奇想,写一个英文单词出来如何?
那么我就开始琢磨,就写一个[LOVE]给爱人吧。
由于本人技术拙略,就按照了以下方式处理
L:使用lines完成
O:使用torus完成
V:使用lines完成
E:适用lines完成
镜头:由上至下最好
于是便有了下面的代码
Babylon - Getting Started
}#renderCanvas{width:100%;height:100%;touch-action:none;
}
varcanvas=document.getElementById('renderCanvas');//加载巴比伦3D引擎
varengine= newBABYLON.Engine(canvas,true);//创建场景
varcreateScene= function() {//通过引擎创建基本场景
varscene= newBABYLON.Scene(engine);//创建一个开放免费的相机,地点位于x:0(横向距离), y:5(高度), z:-10(纵向距离)
varcamera= newBABYLON.FreeCamera('camera1',newBABYLON.Vector3(0,10,0), scene);//相机到场景的起源
camera.setTarget(BABYLON.Vector3.Zero());//相机放置画布
camera.attachControl(canvas,false);//创建基本光源, 目标位于 x:0,y:1,z:0 -(由天空出现)
varlight= newBABYLON.HemisphericLight('light1',newBABYLON.Vector3(0,1,0), scene);varlines=BABYLON.Mesh.CreateLines("lines", [newBABYLON.Vector3(0,0,2.5),newBABYLON.Vector3(0,0,0),newBABYLON.Vector3(1,0,0),
], scene);vartorus=BABYLON.Mesh.CreateTorus("torus",2,0.1,16, scene,false);
torus.position.x= 2.3;
torus.position.z= 1;varlines=BABYLON.Mesh.CreateLines("lines", [newBABYLON.Vector3(3.5,0,2.5),newBABYLON.Vector3(4,0,0),newBABYLON.Vector3(5,0,2.5),
], scene);varlines=BABYLON.Mesh.CreateLines("lines", [newBABYLON.Vector3(6,0,2.5),newBABYLON.Vector3(5,0,2.5),newBABYLON.Vector3(5,0,1.75),newBABYLON.Vector3(6,0,1.75),newBABYLON.Vector3(5,0,1.75),newBABYLON.Vector3(5,0,0),newBABYLON.Vector3(6,0,0),
], scene);//返回该场景
returnscene;
}//赋予该场景于变量
varscene=createScene();//在引擎中循环运行这个场景
engine.runRenderLoop(function(){
scene.render();
});//追加事件:帆布与大小调整程序
window.addEventListener('resize',function(){
engine.resize();
});
});
生成后记得左键鼠标,切换镜头。目前还没处理好镜头的初始位置
以下是看到的结果
哈哈,大功告成。这里可以发散思维完成更有趣的东西。
babylonjs 分部加载模型_初学WebGL引擎-BabylonJS:第2篇-基础模型体验相关推荐
- babylonjs 分部加载模型_用基于WebGL的BabylonJS来共享你的3D扫描模型
用基于WebGL的BabylonJS来共享你的3D扫描模型 本文由 极客范 - 杰克祥子 翻译自 Andy Beaulieu.欢迎加入极客翻译小组,同我们一道翻译与分享.转载请参见文章末尾处的要求. ...
- babylonjs 分部加载模型_如何使用BabylonJS加载OBJ或STL模型
BabylonJS(也就是babylon.js,这是一个和three.js类似的WebGL开发框架),更多的用在游戏领域. 本文说明和演示如何使用babylon.js来加载一个标准3d模型文件,如OB ...
- babylonjs 分部加载模型_基于Babylonjs自制WebGL3D模型编辑器
一.总述 当代WebGL编程所使用的3D模型大多是从3DsMax模型或Blender模型转化而来,这种工作模式比较适合3D设计师和3D程序员分工配合的场景.但对于单兵作战的WebGL爱好者来讲这种模式 ...
- babylonjs 分部加载模型_使用 Babylon.js 在 HTML 页面加载 3D 对象
五一 Windwos Blogs 推了一篇博客, Babylon.js v3.2 发布了.因为一直有想要在自己博客上加载 3D 对象的冲动,这两天正好看到了,就动手研究研究.本人之前也并没有接触过 W ...
- babylonjs 分部加载模型_babylonjs使用笔记
目录 一.介绍了解 1.游乐场:playground 2.沙盒:sanbox 1)Nodes 2)Materials 3)Textrues 3.在线例子:examples 二.模型文件 三.项目使用 ...
- babylonjs 分部加载模型_17 Babylonjs入门进阶 使用场景加载器加载glTF,OBJ,STL模型...
Babylon.js内置的模型格式是.babylon,Babylon.js可以不需要其它额外的插件即可加载. 注意:由于你导入的模型可以具有rotationQuaternion的设置,因此再设置rot ...
- babylonjs 分部加载模型_基于babylon3D模型研究3D骨骼动画(1)
3D骨骼动画是实现较为复杂3D场景的重要技术,Babylon.js引擎内置了对骨骼动画的支持,但Babylon.js使用的骨骼动画的模型多是从3DsMax.Blender等3D建模工具转换而来,骨骼动 ...
- java 上下文加载器_【深入理解Java虚拟机 】线程的上下文类加载器
线程上下文类加载器 线程上下文类加载器( Thread Context ClassLoader) 是从JDK1.2 引入的,类Thread 的getContextClassLoader() 与 set ...
- unity 加载关卡_Unity5.0_Application.isLoadingLevel 正在加载关卡_软件教程_资源库
摘要:Unity5.0_Application.isLoadingLevel 正在加载关卡_软件教程_资源库 Application.isLoadingLevel 正在加载关卡? static var ...
最新文章
- android+5系统,Android2.3.5系统+华为UI
- cookie和session的理解
- React Native ios打包
- 2019年华南理工大学程序设计竞赛(春季赛)
- Zynq SOC学习笔记之设备树
- SAP UI5 Input字段live change事件的一个例子
- 毕业设计word 表格标题 图表标题
- 3_03 蛇形填数(数组)
- Windows编程判断是否为该进程的父进程
- 初接触设计模式--简单工厂(二)
- 人有多大懒,才有多大闲 (评论『卓有成效的程序员』)
- 微运行库2015_【即心修订】[微简]win10专业工作站版64位18363.720全能版+纯净版[驱动/软件/Admin]...
- win7如何关闭uac(图文详解)
- 理解JavaScript中的原型与原型链
- 华为无线wifi设备连接到服务器,华为wifi路由器安装上网的方法
- 三面阿里失败,幸获阿里P8大牛指点,奋战三个月30*14薪入职字节
- 大三学生《web课程设计》HTML实例网页代码
- jconsole 使用入门
- 制造业16个点的增值税,怎么降低税负?方法在这里!
- Java定时任务调度详解
热门文章
- Google 广告投放(iOS)
- java原始人生存繁殖的游戏,一款原始人生存繁殖的游戏
- 【Elasticsearch源码】 写入分析
- OkHttp,蚂蚁金服Android架构面试题
- 一种快速生成边界交通场景数据的新方法
- 862计算机学科综合(非专业),2018年北京市培养单位862计算机学科综合(非专业)之计算机操作系统考研基础五套测试题...
- 计组 | 算数移位及其移位后的空位添补规则
- Tensorflow2.1入门 第六章:循环神经网络
- 人是会变的,今天她喜欢听后朋,明天可能喜欢别的
- 午餐不知道吃什么?用 Python 爬美团App评论选餐!