Tinoe

TINOE: Tinoe Is Not Only an Engine

介绍

Tinoe 是一款前端友好的高性能跨平台互动引擎，旨在为前端开发者提供一套高效、完善的 2D、3D 互动开发解决方案。

官网

点击这里;

优势

• 友好的 API 设计，内置舞台、场景、灯光、相机等标准概念，快速完成场景的搭建
• 符合前端认知的动画和事件系统设计，降低前端开发者的理解成本
• 支持跨平台渲染，通过内置的适配层实现一套代码同时支持 H5、小程序端
• 支持使用 TypeScript 语法来编写着色器，极大降低 web3D 门槛
• 完善的交互和生命周期系统，让开发者能够无障碍开发富交互的互动场景、互动游戏

使用

安装

# 互动引擎
npm install tinoe
# 配套插件库
npm install @tinoe/glk

一个例子

import { Stage, Scene, PerspectiveCamera, AmbientLight } from 'tinoe';
import { Texture2DLoader } from '@tinoe/glk';

/** 1.创建舞台 */
const stage = new Stage({ canvas });

/** 2. 创建场景  */
const scene = new Scene();

/** 3. 创建相机，并将相机加入到场景中  */
const camera = new PerspectiveCamera({
  position: [0, 0, 2], // 位置
  aspectRatio: stage.canvas.clientWidth / stage.canvas.clientHeight, // 宽高比
});
scene.cameraManager.addCameras(camera);

/** 4. 创建光源，并将光源加入到场景中  */
const ambientLight = new AmbientLight({ color: '#fff' });
scene.lightManager.addLights(ambientLight);

/** 5. 创建3D地球 */
const geom = new SphereGeometry(); //创建球形几何体
const mat = new BlinnPhongMaterial(); // 创建材质
mat.diffuseTexture = await Texture2DLoader.load('url'); // 加载并上传地球纹理贴图
const earth = new Mesh(geom, mat); // 创建地球
scene.addChildren(earth); // 加入到场景中

/** 6. 开启渲染 */
stage.loop(scene); // 开启循环渲染