介绍

基于threejs

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

安装

通过 yarn

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

通过 npm

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

使用

浏览器

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

内置编辑器布局

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

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

Vue3

<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 | 删除选中物体 |

预览