three.路径动画

引入three.path

import { PathGeometry,PathPointList} from 'three.path'

创建路线

/* 路径 */
let curposArr = [
    new THREE.Vector3(0, 20, 0),
    new THREE.Vector3(5, 20, 1),
    new THREE.Vector3(10, 20, 0),
];

let up = new THREE.Vector3(0,1,0);
let pathPointList = new PathPointList();
pathPointList.set(curposArr,0.5,10,up,false);

添加纹理

/* 精灵图 */
const texLoader = new THREE.TextureLoader();
let texture = texLoader.load('/public/image/mod-img/箭头路线.png');
// texture.repeat.x = n; 重复数量
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;  // u-v阵列重复模式-数量
texture.anisotropy = renderer.capabilities.getMaxAnisotropy();  //最大可用各向异性

let geometry = new PathGeometry();
geometry.update(pathPointList,{
    width:1, // 宽度
    arrow:false
})

let material = new THREE.MeshPhongMaterial({
    color:0xFFFFFF,
    depthWrite:true,
    transparent:true,
    opacity:1,
    side:THREE.DoubleSide,
    map:texture
})

let firePath = new THREE.Mesh(geometry,material);
scene.add(firePath)

渲染

• 动画一

let gsapkill = gsap.to(texture.offset,{
    x:-1,
    repeat:-1,
    ease:'none'
})
gsapkill.kill()

• 动画二

let renderStop:any;
const render = ()=> {
    texture.offset.x -= 0.05;
    renderStop = requestAnimationFrame(render);
}
render();
cancelAnimationFrame(renderStop)


let render = ()=>{};

render =()=>{
    texture.offset.x -= 0.05;
    requestAnimationFrame(render);
}

render = ()=>{};