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); // 开启循环渲染