Web3D 能够用哪些工具开发

2024-01-02 08:53:28

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

码农公寓

相关文章