gx3-kit

Vue 3 + TresJS + Three.js 可视化组件和工具包。首版包含飞线组件 ArrowFlyLine 和相机平滑移动工具 CameraSmoothTransition。

安装

直接安装本包即可，vue、three、@tresjs/core、@tresjs/cientos 会作为依赖一起安装：

npm i gx3-kit

也可以使用 pnpm：

pnpm add gx3-kit

依赖环境

gx3-kit 是基于 Vue 3、TresJS、Three.js 封装的组件库，安装本包时会自动安装以下依赖：

| 依赖 | 版本要求 | 说明 | | --- | --- | --- | | vue | ^3.4.0 | Vue 3 项目环境 | | three | >=0.150.0 <1.0.0 | Three.js 核心依赖 | | @tresjs/core | ^5.0.0 | 在 Vue 中使用 Three.js 的核心库 | | @tresjs/cientos | ^5.0.0 | TresJS 常用辅助组件库 |

相关资料

• TresJS 官方文档

• Three.js 官方文档

• Cientos 官方文档

配置环境

//需要在 main.js 中引入所需要依赖
import { createApp } from 'vue'

import Tres from '@tresjs/core'
const app = createApp(App);
app.use(Tres);
app.mount('#app')

使用飞线组件

<script setup>
  import { ArrowFlyLine } from 'gx3-kit'
  import { Billboard, Box, OrbitControls } from '@tresjs/cientos'
  const linePoints = [
    [100, 0, 100],
    [0, 0, 0],
  ]
</script>

<template>
  <TresCanvas>
    <OrbitControls :fov="45" :near="0.1" :far="1000000"/>
    <TresGridHelper :args="[500, 500]" />
    <ArrowFlyLine
        :line-points="linePoints"
        :style="1"
        color="#00eaff"
        :opacity="0.9"
        :speed="0.01"
        :height="330"
        :line-width="40"
    />
  </TresCanvas>
</template>

<style scoped lang="scss">

</style>

ArrowFlyLine Props

| Prop | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | linePoints | [number, number, number][] | [[500, 0, 500], [0, 0, 0]] | 飞线起点和终点 | | textures | string[] | 内置 5 张飞线纹理 | 自定义纹理 URL 列表 | | speed | number | 0.01 | 流动速度 | | style | number | 1 | 使用第几张纹理，越界会自动收敛 | | color | string | #fff | 飞线颜色 | | opacity | number | 1 | 透明度 | | height | number | 330 | 贝塞尔曲线高度 | | lineWidth | number | 40 | 线宽 |

自定义纹理

<ArrowFlyLine :textures="['/textures/fly-a.png', '/textures/fly-b.png']" :style="0" />

也可以直接导入包内默认纹理：

import { flyLineTextures } from 'gx3-kit'

使用相机平滑移动

import { CameraSmoothTransition } from 'gx3-kit'
import { useLoop, useTres } from '@tresjs/core'

const { camera, controls } = useTres()
const smoothCamera = new CameraSmoothTransition(camera.value, controls, {
  transitionSpeed: 0.05,
  onComplete: () => {
    console.log('相机移动完成')
  },
})

const { onBeforeRender } = useLoop()
onBeforeRender(() => smoothCamera.smoothMove())

await smoothCamera.setTarget([10, 5, 20], [0, 0, 0])

常用 API

• setTarget(position, lookAt?)：平滑移动到目标位置。
• setPreset(name)：移动到预设位置，内置 front、back、left、right、top、bottom、diagonal、original。
• addPreset(name, position)：新增预设位置。
• smoothMove()：每帧调用，驱动移动。
• moveImmediately(position?)：立即移动。
• setTransitionSpeed(speed)：设置过渡速度。
• resetToOriginal()：回到初始位置。
• stop()：停止移动。
• dispose()：销毁实例。

后续计划

后续可以继续抽取：

• streamLine
• flexiblePipe
• wave
• rippleMesh
• ribbonArrow
• digitalGround
• Cesium 相关组件