目录

介绍

安装与初始化

安装

引用

创建画布

创建各种变量

初始化画布与引擎

创建场景

相机

灯光

渲染场景

监听屏幕尺寸

按顺序执行函数即可

绘制图形

了解坐标方向

绘制线条

绘制正方体

绘制平面方形

绘制圆形

绘制三角形

绘制文字

绘制面板并添加背景图

事件交互

监听点击

射线投射

创建射线

检测射线触碰的物体

检测射线是否与物体相交

介绍

在之前用unity研发过不少游戏，但是都是基于pc或安卓等。而h5这块发现不太好嵌入。最主要是体积太大，加载太慢。所以这次找了一个类似unity的适合web前端开发的游戏插件。为什么选择此插件，不选择three.js呢？因为做过3d游戏的都应该知道，游戏它不仅仅是渲染3d模型，它还需要内置很多交互功能以及模拟的物理功能，如碰撞，射线点击，精灵等。这样才能更好的制作出可交互的游戏出来。

安装与初始化

安装

一大堆命令，慢慢装吧

npm install --save-dev babylonjs npm install --save-dev babylonjs-materials npm install --save-dev babylonjs-loaders npm install --save-dev babylonjs-post-process npm install --save-dev babylonjs-procedural-textures npm install --save-dev babylonjs-serializers npm install --save-dev babylonjs-gui npm install --save-dev babylonjs-viewer

引用

代码如下

import * as BABYLON from 'babylonj