# tezero

**Repository Path**: screed/tezero

## Basic Information

- **Project Name**: tezero
- **Description**: tezero是一个可以使用非常简单的方式调用并实例化三维组态编辑器
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 4
- **Created**: 2023-12-05
- **Last Updated**: 2023-12-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 介绍

基于[threejs](https://threejs.org)

- 支持快捷键
- 支持自定义物体组件
- 支持拖动添加物体组件到场景中
- 内置场景大纲视图
- 支持`.dae`、`.fbx`、`.glb`、`.gltf`等模型导入

# 安装

通过 yarn

```shell
yarn add git+https://gitee.com/cedar12/tezero.git
```

通过 npm

```shell
npm install git+https://gitee.com/cedar12/tezero.git
```

# 使用

## 浏览器

```html
<div id="container"></div>
<script>
// 实例化编辑器核心
const tz = new Tezero(document.getElementBy('container'));
</script>
```

### 内置编辑器布局

> 需要引入样式`tezero/dist/style.css`

```javascript
// 实例化编辑器
const tl=new TezeroLayout(document.querySelector('#container'),/*物体组件数据*/,{theme:'light'});
// 编辑器核心
const tz=tl.tezero;
```

## Vue3

```vue
<template>
<div id="container"></div>
</template>
<script setup>
import {ref,onMounted} from 'vue';
import {Tezero} from 'tezero';

const containerRef=ref(null);
onMounted(()=>{
  // 实例化编辑器核心 用于自定义编辑器布局
  const tz = new Tezero(containerRef.value);
})
</script>
```

# 快捷键

| 键 | 说明 |
| --- | --- |
| Ctrl + c | 复制选中物体 |
| Ctrl + v | 粘贴物体 |
| Ctrl + z | 撤销 |
| Ctrl + y | 重做 |
| T | 切换到移动物体模式 |
| S | 切换到缩放物体模式 |
| R | 切换到旋转物体模式 |
| Delete | Backspace | 删除选中物体 |

# 预览

![image.png](README.md.assets/20231101161853.image.png)