随着网络的发展，以及5G的出现，Web发展迅速，现在不仅仅只是展示一些二维的内容。
Web的先天优势就是用户只需要浏览器访问，不再需要安装其他软件。
随着3D的发展，那么Web3D 也非常受欢迎。
Web3D开发有各种各样的工具和框架，比如：
Three.js（底层）：three.js – JavaScript 3D library
Aframe（框架）：A-Frame – Make WebVR
白鹭引擎：白鹭科技-Egret
Unity3D（WebGL）：Unity中国官网 - 实时内容开发平台 | Unity中国官网
LayaAir IDE（次时代游戏引擎）： 次世代3D游戏引擎Layabox官方网站 | 2D\3D\AR\VR | 浏览器\APP\小游戏全平台发布|追求极致性能 | LayaAir 2.0 | AS3 JavaScript TypeScript开发语言| LayaAir | 免费引擎
本篇博客主要介绍Aframe、LayaAir IDE（次时代游戏引擎），介绍之前，我们首先要了解Three.js,基本所有的Web3D底层都离不开Three.js。
Three.js ：three.js – JavaScript 3D library
GitHub：GitHub - mrdoob/three.js at master
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 400;
scene = new THREE.Scene();
const texture = new THREE.TextureLoader().load( 'textures/crate.gif' );
可以看出所需要的就是THREE这个类
1.Aframe
A-frame一个用来构建虚拟现实（VR）应用的网页开发框架。由WebVR的发起人Mozilla VR 团队所开发，是当下用来开发WebVR内容主流技术方案。WebVR是一个完全开源的项目。基于HTML，容易上手。但是A-Frame不仅仅是一个3D场景渲染引擎或者一个标记语言。其核心思想是基于Three.js来提供一个声明式、可扩展以及组件化的编程结构。
A-Frame 的开发方式其实就是使用普通的HTML文件，而无需安装任何插件。 同时提供声明式、组件化、可复用的实体组件（entity-component）结构。HTML只是冰山的一角，开发者可以自由的使用JavaScript、DOM API，Three.js，WebVR，和WebGL。
比如：
<html> <head> <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script> </head> <body> <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene> </body></html>
2. LayaAir IDE 次世代3D游戏引擎Layabox官方网站 | 2D\3D\AR\VR | 浏览器\APP\小游戏全平台发布|追求极致性能 | LayaAir 2.0 | AS3 JavaScript TypeScript开发语言| LayaAir | 免费引擎
ayaAir2.0基于webGL的开源引擎，性能与3D是引擎的核心竞争力。配套引擎专属的可视化开发工具，引擎与工具同时支持ActionScript3、JavaScript、TypeScript三种开发语言，并且一次开发可以同时发布APP（安卓与iOS）、HTML5、小游戏（微信小游戏等）。
LayaAir2.0 IDE主要包括项目管理、代码开发编辑器、可视化编辑器、第三方工具链支持工具
比如：
//加载场景文件this.loadScene("test/TestScene.scene");//添加3D场景var scene = Laya.stage.addChild(new Laya.Scene3D());//添加照相机var camera = (scene.addChild(new Laya.Camera(0, 0.1, 100)));camera.transform.translate(new Laya.Vector3(0, 3, 3));camera.transform.rotate(new Laya.Vector3(-30, 0, 0), true, false);camera.clearColor = null;//添加方向光var directionLight = scene.addChild(new Laya.DirectionLight());directionLight.color = new Laya.Vector3(0.6, 0.6, 0.6);directionLight.transform.worldMatrix.setForward(new Laya.Vector3(1, -1, 0));//添加自定义模型var box = scene.addChild(new Laya.MeshSprite3D(Laya.PrimitiveMesh.createBox(1, 1, 1)));box.transform.rotate(new Laya.Vector3(0, 45, 0), false, false);var material = new Laya.BlinnPhongMaterial();Laya.Texture2D.load("res/layabox.png", Laya.Handler.create(null, function(tex) { material.albedoTexture = tex;}));box.meshRenderer.material = material;
Unity3D大家都比较熟悉，跨平台游戏引擎，发布WebGL。
白鹭引擎是国内一款2D/3D开发引擎。
