threeify

<h1 align="center" style="border-bottom: none;">threeify</h1> <h3 align="center">一个基于three.js松散改编的Typescript库</h3> <p align="center"> <a href="https://www.npmjs.com/package/threeify"> <img alt="npm最新版本" src="https://yellow-cdn.veclightyear.com/0a4dffa0/37678aa2-4720-4ea4-b8a8-429f1181d00a.svg"> </a> <a href="https://www.npmjs.com/package/threeify"> <img alt="npm下一版本" src="https://yellow-cdn.veclightyear.com/0a4dffa0/bdb09be1-bcf3-477b-bd2f-8439a2da39b8.svg"> </a> </p>

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

贡献者

本项目的存在要感谢<a href="https://github.com/bhouston/threeify/graphs/contributors">所有贡献者</a>。

许可证

ISC