Web3D 能够用哪些工具开发

随着网络的发展,以及5G的出现,Web发展迅速,现在不仅仅只是展示一些二维的内容。

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

上一篇:pandas读写csv最简代码


下一篇:006-Python实用功能与函数