# tezero

**Repository Path**: chillley/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-09-20
- **Last Updated**: 2023-09-20

## 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>
```
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>
```

# 大纲视图
> 需要引入样式`tezero/dist/style.css`
```javascript
// 实例化编辑器
const tz = new Tezero(document.getElementBy('container'));
// 获取场景大纲元素并添加到.outline-container元素
document.querySelector('.outline-container').appendChild(ts.editor.outline.dom);

```

# 快捷键
> 需场景视图获取焦点才有效

|键|说明|
|--|---|
|Ctrl + C|复制选中物体|
|Ctrl + V|粘贴物体|
|Ctrl + Z|撤销|
|Ctrl + Y|重做|
|T|切换到移动物体模式|
|S|切换到缩放物体模式|
|R|切换到旋转物体模式|
|DELETE \\| BACKSPACE  |删除选中物体|