https://github.com/mizy/three-layers
https://github.com/mizy/three-layers
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/mizy/three-layers
- Owner: mizy
- License: gpl-3.0
- Created: 2020-07-01T06:44:23.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-04-29T07:01:35.000Z (over 1 year ago)
- Last Synced: 2025-03-20T09:11:37.269Z (7 months ago)
- Language: JavaScript
- Size: 10.6 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Three-Layers
some useful graphic layer with three.js. you can use
# 使用方法
```
npm i @tntv/layers
```
# 引用
```
import {FlyLine} from '@tntv/layers';
```
# demo
# api
## flyline
```js
//constructor() 构造函数
new FlyLine({
addLineTimeout:100,// 线动画间隔
materialConfig:{
startColor:new THREE.Vector4(0,0,1,0), // 材质颜色
endColor:new THREE.Vector4(0,1,1,1), // 材质结束颜色
}
})
setData([{start:{x,y,z},end:{x,y,z}}]) //配置数据
start() //开始动画
```
## flytube,flymesh
```js
new FlyTube({
addLineTimeout:100,// 线动画间隔
materialConfig:{
lineWidth:5,
useMap:true,
map:texture,//材质
//color:0xff00aa,
repeat:new THREE.Vector2(20/5,1),//重复
resolution:new THREE.Vector2(window.innerWidth,window.innerHeight)// 画布比例
}
})
setData( [{start:{x,y,z},end:{x,y,z}}]) //配置数据
start() //开始动画
```
## MoveingLine
```js
new MoveingLine({
speed:1,// 线动画间隔
smoothNumber:1,//线顺滑度密度，最高为1
materialConfig:{
flowSpeed：0.01 //流动速度
}
})
setData([
{
color:"#0f9",
points:[{x,y,z},{x,y,z}]
}
]) //配置数据
```
## Points
```js
new Points({
materialConfig:{
size:2,
map:textrue,//材质
scale:100,//缩放比例，和相机和物体常用距离相关
}
})
setData([
{
position:{x,y,z},// 坐标
color:new THREE.Color(1,1,0) //颜色
}
]) //配置数据
```