@cedar12/tezero

介绍

基于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

预览