# tezero

**Repository Path**: cedar12/tezero

## Basic Information

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

## Statistics

- **Stars**: 5
- **Forks**: 2
- **Created**: 2023-08-10
- **Last Updated**: 2025-06-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Threejs, 3d, Web, editor, TypeScript

## README

# 介绍

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


- 支持快捷键
- 支持自定义物体组件
- 支持拖拽左边物体组件到场景中
- 内置场景大纲视图
- 支持`.dae`、`.fbx`、`.glb`、`.gltf`等模型导入
- 支持位置、旋转、缩放动画配置
- 模型材质属性编辑

# 构建

```shell
cd tezero
yarn
yarn build
```


# 使用

## 浏览器
> 具体请查看[umd](./examples/umd/)
```html
<script src="dist/index.min.js"></script>
<div id="container"></div>
<script>
// 实例化编辑器核心
const tz = new Tezero(document.getElementById('container'));
</script>
```

### 内置编辑器布局

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

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

## Vue3
> 具体请查看[vite-vue3](./examples/vite-vue3/)
```vue
<template>
<div ref="containerRef"></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>
```

## 注册组件
> 组件注册需返回THREE.Object3D|Promise<THREE.Object3D>类型
```javascript
// 注册图表组件
tl.tezero.register({
  echart:(data)=>{
      const dom= document.createElement('div');
      dom.style.backgroundColor='rgba(0,0,0,0.2)';
      var myChart = echarts.init(dom,'dark');
      
      myChart.on('click', function (params) {
        console.log(params);
        tl.tezero.select(object);
      });

      // 绘制图表
      myChart.setOption({
        backgroundColor:'rgba(0,0,0,0.2)',
      title: {
          text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
          {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
          }
      ]
      });


      // DOM 3D网格对象，参数width等同于dom.style.width='600px';height等同于dom.style.height='200px';
      const object=new Tezero.DomObject(dom,{width:600,height:200});
      object.name = '图表';
      object.scale.x=0.02;
      object.scale.y=0.02;
      object.scale.z=0.02;
      return object;
  }
});
```

# 快捷键

| 键 | 说明 |
| --- | --- |
| Ctrl + c | 复制选中物体 |
| Ctrl + v | 粘贴物体 |
| Ctrl + z | 撤销 |
| Ctrl + y | 重做 |
| T | 切换到移动物体模式 |
| S | 切换到缩放物体模式 |
| R | 切换到旋转物体模式 |
| Delete 或 Backspace | 删除选中物体 |
| M | 合并选中组内物体 |
| 鼠标左键双击 | 最佳视图定位物体 |

# 预览

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