babylonJs webGL 3D babylon.js -- 04 做个简单的fps

有了世界有了颜色有了光,我们要在场景里走起来,这个在每个渲染引擎里都可以实现,不过 babylon 的这个像 fps 一样移动,碰到障碍物会停,实在是比 three.js 简单太多,至少在官方例子中没有一个完备的解决方案

FPS游戏中模拟相机运动: 放在地板上的相机,与地面发生的碰撞,以及可能与场景中的任何物体发生的碰撞,这样让我们感觉和真人在场景上行动一样。

下面我们来实现一下

首先在前面的 TestGeometries 文件中我们创建了很多模型,现在就把这些模型全部都存成一个数组,让外部可以访问到,

self.bodys = [box, sphere, plane, disc, cylinder, torus, knot]

同时加入一个 self 来取代 this,方便以后我们进一步的修改,完整代码如下

'use strict';
function TestGeometries (scene) {
  let self = {}
  self.bodys = []

  // 创建一堆材质
  const material1 = new BABYLON.StandardMaterial("texture1", scene);
  material1.diffuseColor = new BABYLON.Color3(0.0, 0.7, 0.95); //漫射色

  const material2 = material1.clone()
  // material2.emissiveColor = new BABYLON.Color3(.2, .8, .3); //发光色
  material2.ambientColor = new BABYLON.Color3(.1, .3, .0); //发光色
  material2.bumpTexture = new BABYLON.Texture("img/bump.png", scene);  //凹凸贴图





  const material3 = material1.clone()
  material3.specularColor = new BABYLON.Color3(0.8, 0.2, 0.7);  //反射色
  material3.alpha = 0.6;  //调整透明度

  const material4 = material1.clone()
  material4.diffuseTexture = new BABYLON.Texture('http://www.babylonjs-playground.com/textures/tree.png', scene)
  material4.diffuseTexture.hasAlpha = true; //显示为透明
  material4.backFaceCulling = false; //使透明在背面也显示贴图,而不是裁切后显示为空


  const material5 = material1.clone()
  material5.diffuseColor = new BABYLON.Color3(1.0, 0.2, 0.15); //漫射色
  material5.reflectionTexture = new BABYLON.Texture("http://www.babylonjs-playground.com/textures/tree.png", scene); // 反射贴图
  material5.reflectionTexture.coordinatesMode = BABYLON.Texture.SPHERICAL_MODE; // 反射模式


  const materialWireframe = new BABYLON.StandardMaterial("materialWireframe", scene);
  materialWireframe.wireframe = true  // 显示网格


  const materialGrass = new BABYLON.StandardMaterial("materialGrass", scene);
  materialGrass.diffuseTexture = new BABYLON.Texture("http://www.babylonjs-playground.com/textures/grass.jpg", scene);
  materialGrass.diffuseTexture.uScale = 5.0;//垂直方向重复5次
  materialGrass.diffuseTexture.vScale = 5.0;//水平方向重复5次


  // 创建一个盒子
  //参数为: 名字,盒子大小, 它们将放到场景, 是否可更新?(如果该网格后面必须被更新) 和可选的面朝向(参见下面). 如果你需要默认表现那么最后两个参数可以忽略: BABYLON.Mesh.CreateBox("box", 6.0, scene);
  const box = BABYLON.Mesh.CreateBox("box", 1.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);
  // box.position.x = -1;  //移动一下它的默认位置,x轴移到-3的位置


  //Apply the materials to meshes
  box.material = material1;


  // 创建一个球体
//参数为: 名字, 细分段数 (高度细节或不需), 大小, 将被放到的场景, 是否可更新?(如果该网格后面必须被更新) 和可选的面朝向(参见下面). 如果你需要默认的表现那么最后两个参数可以忽略: BABYLON.Mesh.CreateSphere("sphere", 10.0, 10.0, scene);
  const sphere = BABYLON.Mesh.CreateSphere("sphere", 8.0, 1.0, scene, false,  BABYLON.Mesh.DEFAULTSIDE);
  sphere.position.x = -1.5;  //移动一下x轴的默认位置
  sphere.material = material2


  // 创建一个平面 (注意这个面是竖立着的)
  //参数为: 名字, 大小, 和将被放到的场景, 是否可更新?(如果该网格后面必须被更新) 和可选的面朝向
  const plane = BABYLON.Mesh.CreatePlane("plane", 100.0, scene, false, BABYLON.Mesh.DOUBLESIDE);  //这里怕看不出来用了双面贴图
  // const plane = BABYLON.Mesh.CreatePlane("plane", 10.0, scene);
  plane.position.y = -1;
  plane.rotation.x = Math.PI / 2  //转动x轴成平面
  plane.material = materialGrass


  // 创建一个盘片 或着一个规则多边形 这里创建了一个8边型
  const disc = BABYLON.Mesh.CreateDisc("disc", 1, 8, scene, false, BABYLON.Mesh.DOUBLESIDE);
  // 参数为: 名字, 半径, 边数, 场景, 可更新否和可选的朝向(参见下面). 如果你需要默认的表现,那么最后两个参数参数可以忽略:
  // const disc = BABYLON.Mesh.CreateDisc("disc", 1, 8, scene);
  disc.position.x = -3;
  disc.rotation.x = Math.PI / 2  //转动x轴成平面
  disc.material = material3


  //创建一个圆柱体
  // 参数为: 名称, 高度, 顶直径, 底直径, 边数, 高向细分度, 场景, 可更新否和可选的朝向(参见下面). 如果你需要默认表现,那么最后两个参数可以忽略:
  const cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 1, 1, 6, 1, scene);
  cylinder.position.x = 1.5;
  cylinder.material = material4

  // 创建一个环体
  // var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false, BABYLON.Mesh.DEFAULTSIDE);
  // 参数为: 名称, 直径, 厚度, 边数(高度细节或不是), 场景, 可更新否和可选的朝向(参见下面). 如果你使用默认表现那么最后两个参数可忽略 :
  const torus = BABYLON.Mesh.CreateTorus("torus", 1, 0.5, 10, scene);
  torus.position.x = 3;
  torus.material = material5

  // 创建一个结
  // const knot = BABYLON.Mesh.CreateTorusKnot("knot", 2, 0.5, 128, 64, 2, 3, scene, false, BABYLON.Mesh.DEFAULTSIDE);
  // 参数为: 名称, 半径, tube, 半径上分段数, tubularSegments, p, q, 场景, 可更新否和可选的朝向(参见下面). 如果你使用默认的表现那么最后的两个参数可以忽略 :
  const knot = BABYLON.Mesh.CreateTorusKnot("knot", 1, 0.2, 32, 16, 2, 3, scene);
  knot.position.x = 5.5;
  knot.material = materialWireframe  // 赋予材质


  // 创建线
  // 参数为: 名称, [都好分隔的向量数组], 场景.
  const lines = BABYLON.Mesh.CreateLines("lines", [
    new BABYLON.Vector3(-2, 0, 0),
    new BABYLON.Vector3(2, 0, 0),
    new BABYLON.Vector3(0, 0, -2),
    new BABYLON.Vector3(0, 0, 2),
    new BABYLON.Vector3(-2, 0, 0)
  ], scene);
  lines.position.y = 3


  //绘制点划线
  // 参数为 : 名称, [三元向量数组], 划线大小, 间隙大小, 段划线数, 场景. 作为许多线段, 每条段先都是以三元向量组的方式呈现在空间里. 上面函数设置了这条点划线里线段的数量, 每段都是由两个连续三元向量定义. 划线大小 和 间隙大小 是指点划线里每个划线和之间间隙的相对大小.
  const dashedlines = BABYLON.Mesh.CreateDashedLines("dashedLines",
    [
      new BABYLON.Vector3(-2, 0, 0),
      new BABYLON.Vector3(2, 0, 0),
      new BABYLON.Vector3(0, 0, -2),
      new BABYLON.Vector3(0, 0, 2)
    ]
    , 1, 1, 100, scene);
  dashedlines.position.x = -4
  dashedlines.position.y = 3


  self.bodys = [box, sphere, plane, disc, cylinder, torus, knot]
    return self
}

接下来在 scene 文件中要将相机替换成freecamera

    // 创建一个 FreeCamera,设置位置到 (x:0, y:5, z:-10)
    var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene);
    // camera.setTarget(BABYLON.Vector3.Zero()); //指向原点 这里会冲突 所以我们先取消

    // 原来的围绕相机在这里先取消
    // var camera = new BABYLON.ArcRotateCamera("Camera", 1.0, 1.0, 12, BABYLON.Vector3.Zero(), scene);

为了区分这种碰撞和不碰撞的情况,所以我们专门建立一个 Physic 处理需要给相机加入 FPS碰撞效果的情况

const Physic = function (sceneObj) {

  let self = {}

  function init() {

    // 传入整个场景参数

    sceneObj.scene.gravity = new BABYLON.Vector3(0, -9.81, 0);
    sceneObj.camera.applyGravity = true;

    //Set the ellipsoid around the camera (e.g. your player's size)
    sceneObj.camera.ellipsoid = new BABYLON.Vector3(1, 1, 1);

    // Enable Collisions
    sceneObj.scene.collisionsEnabled = true;
    sceneObj.camera.checkCollisions = true;
  }


  self.addCollision = function (o) {  // 将物体加入和相机碰撞
    o.checkCollisions = true;
  }

  init()
  return self
}

接下来记得在html中引入这个文件

同时main 文件也要作出一点点内容的增加

'use strict';
let DB = {}  //全局可控内容

window.addEventListener('DOMContentLoaded', function() {
  var canvas = document.getElementById('renderCanvas'); // 获取html的元素
  start(canvas)
});


function start (canvas) {
  const s = new Scene(canvas)
  const phy = new Physic(s)
  DB.engine = s.engine  //保存两个内容到全局
  DB.scene = s.scene

  const objs = new TestGeometries(DB.scene)  // 创建基本元素

  for(let i = 0; i<objs.bodys.length; i++){
    phy.addCollision(objs.bodys[i])
  }
}


哒哒,现在可以像 FPS 游戏一样自由遨游我们创建的场景了

image.png

注意要鼠标点击左键才能切换镜头角度,方向键控制前进后退,这里 WASD 还不起作用

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容