threeify

一个基于three.js松散改编的Typescript库

threeify是一个基于three.js松散改编的Typescript 3D库。

功能概述：

现代化：Typescript、可摇树优化、小型构建文件
渲染：WebGL 2和WebGPU（即将推出）
材质：基于物理的材质
后期效果：景深（即将推出）、动态模糊（即将推出）、环境光遮蔽（即将推出）、时域抗锯齿（即将推出）
动画：剪辑（即将推出）、混合器（即将推出）
资源：glTF（即将推出）、Draco（即将推出）和Basis（即将推出）
XR：通过WebXR实现增强现实和虚拟现实（即将推出）
文档化（TSDocs）和测试（Jest）

警告

正在开发中，尚未准备好供任何形式使用

该库目前处于alpha阶段，正在进行重大开发。它甚至可能无法正确编译。请注意。

安装和导入

Threeify及其模块已在npm上发布，提供完整的类型支持。要安装，请使用：

npm install threeify --save

或

yarn add threeify

这将允许您完全导入Threeify：

import * as THREEIFY from 'threeify'; // 尚不支持

或导入单个类：

import { RenderContext, Vector3 } from 'threeify';

使用

此代码创建了一个场景、一个相机和一个几何立方体，并将立方体添加到场景中。然后为场景和相机创建一个WebGL渲染器上下文，并将该视口添加到document.body元素中。最后，它在场景中为相机动画显示立方体。

import { box } from '@threeify/geometry/primitives/Box';
import { MaterialOutputs } from '@threeify/materials/MaterialOutputs';
import { PhysicalMaterial } from '@threeify/materials/PhysicalMaterial';
import { PerspectiveCamera } from '@threeify/nodes/cameras/PerspectiveCamera';
import { Mesh } from '@threeify/nodes/Mesh';
import { Node } from '@threeify/nodes/Node';
import { RenderingContext } from '@threeify/renderers/webgl2';

const camera = new PerspectiveCamera(70, 0.01, 10);
camera.position.x = 1;

const geometry = box(0.2, 0.2, 0.2);
const material = new PhysicalMaterial();
material.outputs = MaterialOutputs.Normal;

const mesh = new Mesh(geometry, material);

const scene = new Node();
scene.children.add(mesh);

const context = new RenderingContext();
const canvasFramebuffer = context.canvasFramebuffer;
document.body.appendChild(canvasFramebuffer.canvas);

function animate(): void {
  requestAnimationFrame(animate);

  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.02;
  mesh.dirty();

  canvasFramebuffer.render(scene, camera, true);
}

animate();

开发

本地开发设置

运行步骤：

检出git仓库

git clone git@github.com:bhouston/threeify.git

安装依赖

npm install

以监视模式运行

npm run dev

启动示例服务器

npm run start -w=examples-server

构建生产版本

npm run build

贡献者

本项目的存在要感谢所有贡献者。

许可证

ISC