快速上手
简介
Tinoe(Tinoe is not only an engine)是字节自研的一款前端友好的高性能跨平台 3D 渲染引擎，我们参考和对比了行业内大量的 3D 渲染引擎，在设计上充分考虑前端开发者习惯，大大降低了前端开发 3D 门槛。
优势
- 用户侧 API 沿用业内标准，内置了场景、相机、光照等标准 3D 概念模块，降低用户迁移和理解成本。
- 支持使用 TypeScript 语法来编写 Shader 逻辑，让前端同学不再惧怕 Shader。
- 支持大部分 CSS3 中的动画，让前端同学能够在 3D 场景中轻松实现熟悉的动画效果。
- 支持 3D 世界中的事件体系，设计上符合前端习惯。
- 支持跨平台渲染，通过抽象适配层抹平底层图形引擎的差异。
开始
安装
// 使用npm
npm install tinoe
// 使用yarn
yarn add tinoe
使用
让我们以一个简单的 3D 地球为例，了解使用 Tinoe 创建并更新 3D 场景的全过程。
首先，我们需要做一些准备工作，即创建场景，并向场景中添加相机、光源。
/** 1.创建舞台 */
const stage = new Stage({
canvas: 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);
然后，我们需要创建出一个 3D 地球。这一步中，我们需要借助地球纹理图片，你可以在这里下载到。
/** 5. 创建3D地球 */
const geom = new SphereGeometry(); //创建球形几何体
const mat = new BlinnPhongMaterial(); // 创建材质
// 加载并上传地球纹理贴图
mat.diffuseTexture = await tinoe.loader.loadTexture2D(
'https://s3-us-west-2.amazonaws.com/s.cdpn.io/141228/earthmap1k.jpg',
);
// 创建地球，并将其加入到场景中
const earth = new Mesh(geom, mat);
scene.addChildren(earth);
地球场景已经搭建完成！接下来，我们将创建好的场景加入舞台，并启动渲染。
stage.run(scene); // 非循环，仅渲染一帧
stage.loop(scene); // 循环，支持逻辑扩展，比如下面👇
stage.loop(() => {
stage.loop(scene);
});
现在，我们已经可以在画布上看到一个地球，通过Scene上的scriptManager，我们可以为场景添加 updater，模仿地球的自转运动。
/** 添加旋转效果 */
scene.scriptManager.addUpdater(dt => {
earth.rotateY(dt * 10);
});
此外，还可以开启 Tinoe 自带的轨道控制功能，方便用户通过鼠标控制画面。
/** 开启OrbitControl */
stage.enableControl();
更多
受生产力限制，我们的文档中没有提供过多 3D 基础概念的内容，如果你在这些基础概念上有疑惑，我们强烈推荐 webGL 官方文档作为补充学习的资料，非常抱歉~