Oasis EngineWeb 3D 引擎

联合创作 · 2023-09-29 19:10

Oasis Engine 引擎是一款以 Web 为先,移动为先的互动/创作平台,使用组件系统架构、逻辑编写采用脚本系统、引擎源码使用 TypeScript 编写,并且追求易用和轻量。

Oasis Engine 主要包含 Oasis Runtime、Oasis Editor 和 Oasis Store 三部分。

主要功能

  • 平台 - 支持 HTML5 和支付宝小程序
  • 图形 - 先进的 2D + 3D 图形引擎
  • 动画 - 强大的动画系统
  • 脚本 - 使用 TypeScript 高效地编写逻辑

使用示例

通过传入 HTMLCanvasElement 名称创建引擎并获取根实体

// Create engine by passing in the HTMLCanvasElement name and get root entity.
const engine = new WebGLEngine("canvas");
const canvas = engine.canvas;
const rootEntity = engine.sceneManager.activeScene.createRootEntity("Root");
canvas.width = window.innerWidth * SystemInfo.devicePixelRatio;
canvas.height = window.innerHeight * SystemInfo.devicePixelRatio;

// Create light.
const lightEntity = rootEntity.createChild("Light");
const ambient = lightEntity.addComponent(AmbientLight);
const directLight = lightEntity.addComponent(DirectLight);
ambient.color = new Color(0.5, 0.5, 0.5);
directLight.color = new Color(0.3, 0.4, 0.4);

// Create camera.
const cameraEntity = rootEntity.createChild("Camera");
cameraEntity.transform.setPosition(0, 6, 10);
cameraEntity.transform.lookAt(new Vector3(0, 0, 0));
cameraEntity.addComponent(Camera);

// Create cube.
const cubeEntity = rootEntity.createChild("Cube");
const cubeRenderer = cubeEntity.addComponent(GeometryRenderer);
const material = new BlinnPhongMaterial(engine);
cubeEntity.transform.rotate(0, 60, 0);
material.ambientColor = new Color(0.6, 0.6, 0.6, 1);
cubeRenderer.geometry = new CuboidGeometry(engine, 1, 1, 1);
cubeRenderer.material = material;

// Run engine.
engine.run();

使用案例

支付宝2021年五福活动

浏览 11
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报