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();

});

});

生成后记得左键鼠标，切换镜头。目前还没处理好镜头的初始位置

以下是看到的结果

哈哈，大功告成。这里可以发散思维完成更有趣的东西。