Web的先天优势就是用户只需要浏览器访问，不再需要安装其他软件。
随着3D的发展，那么Web3D 也非常受欢迎。
Web3D开发有各种各样的工具和框架，比如：
Three.js（底层）：Three.js
Aframe（框架）：A-Frame
白鹭引擎：白鹭科技
Unity3D（WebGL）：Unity3D
LayaAir IDE（次时代游戏引擎）： 次世代3D游戏引擎Layabox
本篇博客主要介绍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 – Make WebVR
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官方网
LayaAir2.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开发引擎。