WebGL：BabylonJS入门

您所在的位置：网站首页 › 我的世界加载js › WebGL：BabylonJS入门

WebGL：BabylonJS入门

2024-07-17 13:25:02| 来源: 网络整理| 查看: 265

WebGL：BabylonJS入门——初探：我的世界走进BabylonJS快速入门BabylonJS实战模型准备加载与展示效果更多

走进BabylonJS

上一篇文章罗列了比较常见的WebGL应用，接下来将对babylonJS进行专项实践。

快速入门

想要快速的了解并使用BabylonJS，在官网上就可以找到答案babylonjs入门，按照上面的示例就可以构造出一个世界了来自BabylonJS官网

BabylonJS实战模型准备

想要建造一个空间，要预先准备好需要的模型，官网上有个工具BabylonJS Editor，个人感觉并不好用，保存的文件容易丢，必须要“另存为…”，而且编辑视角也不是很好切换，导入模型位置太大时，想要找到模型就有点费劲了，根本找不到自己在哪…… 在这里插入图片描述但是微软的视频却是使用Blender，不过最终是要.glb/.gltf文件，用3dmax，unity，auto desk都是有插件支持的，不过这些都是付费的，这样看起来Blender比较适合，而且Blender的更新速度很快，免安装，空间小（增长的空间在设置里面“2min自动保存”，要注意控制下就好了），社区、B站都有很多借鉴，简单的入门是非常够的。在这里插入图片描述不过，想着省事，先用3D Builder操作一下，win10自带的小工具，简单的方块还是很棒的。但是存在一个问题，那就是在3D Builder合并的模型导出为.glb文件时，并不会将合并的模型关联到一个父节点，当在使用的时候，可能想要移动的是一个小车，但是不得不移动车轮、车架、车厢等多个部件，而且全是自动生成的id，完全无法做到一一对应，虽然3D Builder操作简便，但是不小心给自己挖了一个小坑，最后还是要用Blender或者BabylonJS Editor处理一下（我使用的BabylonJS Editor，不得不说这个工具太恶心了，保存不了，尝试了很久，也就导出的那一份可以用，想再次编辑已经没办法了）。

加载与展示

下一步就是将刚刚做好的模型展示了，两个重要.js文件： babylon.js babylonjs.loaders.min.js 下面是主要结构，是不是挺简单的，官网上有直接的代码贴出来：在这里插入图片描述接下来就是在画布中创建场景了。

var createScene = function () { // N建立基本场景 var scene = new BABYLON.Scene(engine); // 创建并放置一个自由相机 var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene); // 设置相机朝向一个特定的位置 camera.setTarget(new BABYLON.Vector3(0, 10, -10)); // 设置相机对移动和旋转的灵敏度 camera.angularSensibility = 10; camera.moveSensibility = 10; // 将相机事件绑定到canvas上面 camera.attachControl(canvas, true); // 将相机的目标指向场景的原点 camera.setTarget(BABYLON.Vector3.Zero()); // 为相机添加一个基于canvas的控制器 camera.attachControl(canvas, true); // 建立一个光源，指向0,1,0方向——竖直朝上。 var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene); // 令光源变得稍微昏暗 light.intensity = .5; //加入VR支持 var vrHelper = scene.createDefaultVRExperience(); //导入模型 BABYLON.SceneLoader.ImportMesh("", "../assets/uploads/", "fac.glb", scene, function (meshes, particleSystems, skeletons) {} }); return scene; };

这样就能加载前面做好的模型了，是不是很简单，对于模型的引用，最关键的就是这一句：

BABYLON.SceneLoader.ImportMesh("", “…/assets/uploads/”, “fac.glb”, scene, function (meshes, particleSystems, skeletons) {} });

当然对于模型文件的加载还有多种方法，不过.cn的这个网站没有内容网站链接，我也是看了别人的文章地址在这里插入图片描述

效果

下面看看实绩效果 ***示例演示***，模型比较大，网速不好的需要多等一下。在这里插入图片描述

上一篇：WebGL探索——抉择：实践方向，twgl.js、Filament、Claygl、BabylonJS、ThreeJS、LayaboxJS、SceneJS、ThinkJS、ThingJS 下一篇：BabylonJS入门——初探：注入活力

【本文地址】

公司简介

联系我们

今日新闻

点击排行

实验室常用的仪器、试剂和: 说到实验室常用到的东西，主要就分为仪器、试剂和耗

不用再找了，全球10大实验: 01、赛默飞世尔科技（热电）Thermo Fisher Scientif

三代水柜的量产巅峰T-72坦: 作者：寞寒最近，西边闹腾挺大，本来小寞以为忙完这

通风柜跟实验室通风系统有: 说到通风柜跟实验室通风，不少人都纠结二者到底是不

集消毒杀菌、烘干收纳为一: 厨房是家里细菌较多的地方，潮湿的环境、没有完全密

实验室设备之全钢实验台如: 全钢实验台是实验室家具中较为重要的家具之一，很多

图片新闻

实验室药品柜的特性有哪些: 实验室药品柜是实验室家具的重要组成部分之一，主要

小学科学实验中有哪些教学: 计算机计算器一般打孔器打气筒仪器车显微镜

实验室各种仪器原理动图讲: 1.紫外分光光谱UV分析原理：吸收紫外光能量，引起分

高中化学常见仪器及实验装: 1、可加热仪器：2、计量仪器：（1）仪器A的名称：量

微生物操作主要设备和器具: 今天盘点一下微生物操作主要设备和器具，别嫌我啰嗦

浅谈通风柜使用基本常识: 　众所周知，通风柜功能中最主要的就是排气功能。在

WebGL：BabylonJS入门

WebGL：BabylonJS入门

今日新闻

点击排行

推荐新闻

图片新闻

专题文章