Web3D 能够用哪些工具开发

随着网络的发展，以及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 – 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。

比如：

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开发引擎。