BabylonJs系列-1.入门
简介
最近公司开发了3D显示效果相关的项目，所以需要学习到BabylonJs/Threejs相关的知识。学到现在也了解了一些，所以打算开一个系列记录一下初学者使用Babylon的教程。这是这个系列的第一篇,我会先写一下demo给大家能很快的运行，之后文章再具体了解一下各个部分，最后再使用一个3D地球实例 本系列demo均为html文章，可直接打开文章预览
1. 准备工作
- 相关网站
先了解一下BabylonJs官网我经常会用到的部分(BabylonJs文档地址)
左边菜单栏为上半部分为一些BabylonJsAPI的使用案例，也会有一些预览效果和源代码可以参考。下半部分的API即为文档，Search可以查找文档，Playground search为案例搜索，可以通过自己的需求去查找不限于代码，API，模糊关键字等的案例，案例中都会有代码可以查找。
BabylonJs案例大全
BabylonJs中文文档,别报太大期望阅读
BabylonJs中文课程
官方在线编辑器
官方v3版本编辑器 - demo准备
- 先准备需要使用到的运行类js，相关js可以在文末的github仓库中找到
<!-- 基础类库 -->
<script src="./js/babylon.js"></script>
- WebGL需要结束Canvas元素作为3D渲染的容器，所以我们插入一个canvas元素
<canvas id="WebGL" style="height: 500px; width: 500px;"/>
- 编写js代码，初始化实例 这部分为创建场景代码。至此3D场景创建完成，之后可以通过代码创造自己的3D世界了
const canvas = document.getElementById('WebGL'); // 1. 获取canvas实例 用于传入Babylon作为渲染容器
const engine = new BABYLON.Engine(canvas, true); // 2. 传入Babylon作为渲染容器 engine为渲染引擎，除非特殊用途，不然一般不会使用到
const scene = new BABYLON.Scene(engine); // 3. 创建一个场景，可以简单理解为一个3D世界
// 4. 创建一个摄像头，webGL中使用摄像头将画面投放到画布中，以此"观察"这个世界
const camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, new BABYLON.Vector3(0, 0, 5), scene);
camera.attachControl(canvas, false);// 让摄像头控制画布，实现摄像头移动效果
scene.clearColor.set(0, 0, 0, 1); // 为了方便查看效果 修改场景背景颜色
const light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), scene);
const light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(0, 1, -1), scene);
// 渲染引擎启动定时循环，在定时循环中更新场景的每一帧
engine.runRenderLoop(function () {
scene.render();
});
- 创建一个球看下效果
// 创建一个球
const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 2 }, scene);
总结
这一篇文章先带大家了解了一下WebGL的初始化过程，大家可以自由看看最终效果，或自由删除一些代码，看一下场景的修改以便加深理解。下一章开始会和大家讲诉一下Babylon常用的一些类和一些基本概念
文末会带有demo的源代码链接，随着文章发布也会多一些测试demo。
大致知道scene、mesh、Material、texture、light、camera这些类的用图和含义 （场景、模型、材质、贴图纹理、灯光、镜头视角）
