在网上看到的这种流光效果，在某宝买了源码后，决定把这个效果封装成js文件，以后用起来就很方便了。
flyCurve.js文件代码如下：
import * as THREE from 'three'
var uniforms = {
u_time: { value: 0.0 }
};
var clock = new THREE.Clock();
export const timerFlyCurve = setInterval(()=>{
const elapsed = clock.getElapsedTime();
uniforms.u_time.value = elapsed;
},20);
// 着色器设置
const vertexShader = `
varying vec2 vUv;
attribute float percent;
uniform float u_time;
uniform float number;
uniform float speed;
uniform float length;
varying float opacity;
uniform float size;
void main()
{
vUv = uv;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
float l = clamp(1.0-length,0.0,1.0);
gl_PointSize = clamp(fract(percent*number + l - u_time*number*speed)-l ,0.0,1.) * size * (1./length);
opacity = gl_PointSize/size;
gl_Position = projectionMatrix * mvPosition;
}
`
const fragmentShader = `
#ifdef GL_ES
precision mediump float;
#endif
varying float opacity;
uniform vec3 color;
void main(){
if(opacity <=0.2){
discard;
}
gl_FragColor = vec4(color,1.0);
}
`
export function createFlyCurve(points, closed) {
var curve = new THREE.CatmullRomCurve3(points, closed);
// 流光的颜色，三个数字分别代表rgb的值，不过注意，需要除以255
// 比如浅绿色的rgb是(0,255,127)，那么这里的Vector3就等于(0,1,127/255)也就是(0,1,0.49803921)
var color = new THREE.Vector3( 0.5999758518718452, 0.7798940272761521, 0.6181903838257632 );
var flyLine = initFlyLine( curve, {
speed: 0.4,
color: color,
number: 3, //同时跑动的流光数量
length: 0.2, //流光线条长度
size: 3 //粗细
}, 5000 );
return flyLine;
}
function initFlyLine( curve, matSetting, pointsNumber ) {
var points = curve.getPoints( pointsNumber );
var geometry = new THREE.BufferGeometry().setFromPoints( points );
const length = points.length;
var percents = new Float32Array( length );
for (let i = 0; i < points.length; i += 1) {
percents[i] = ( i / length );
}
geometry.setAttribute( 'percent', new THREE.BufferAttribute( percents, 1 ) );
const lineMaterial = initLineMaterial( matSetting );
var flyLine = new THREE.Points( geometry, lineMaterial );
return flyLine;
}
function initLineMaterial( setting ) {
const number = setting ? ( Number( setting.number ) || 1.0 ) : 1.0;
const speed = setting ? ( Number( setting.speed ) || 1.0 ) : 1.0;
const length = setting ? ( Number( setting.length ) || 0.5 ) : 0.5;
const size = setting ? ( Number( setting.size ) || 3.0 ) : 3.0;
const color = setting ? setting.color || new THREE.Vector3( 0, 1, 1 ) : new THREE.Vector3( 0, 1, 1 );
const singleUniforms = {
u_time: uniforms.u_time,
number: { type: 'f', value: number },
speed: { type: 'f', value: speed },
length: { type: 'f', value: length },
size: { type: 'f', value: size },
color: { type: 'v3', value: color }
};
const lineMaterial = new THREE.ShaderMaterial( {
uniforms: singleUniforms,
vertexShader: vertexShader,
fragmentShader: fragmentShader,
transparent: true
} );
return lineMaterial;
}
export default
{
createFlyCurve,
timerFlyCurve
}在vue中先引入createFlyCurve方法和timer定时器：
?createFlyCurve方法只有两个参数，points, closed，也就是组成曲线的点坐标和曲线是否闭合,该方法返回一个Points物体，然后将这个物体添加到场景就可以了。
?如果想要改变流光的速度、数量、长度、颜色等参数，可以直接去js文件里修改。
?最后，因为js文件里有一个定时器控制流光动起来，所以在vue销毁前最好还是清理一下定时器，以免内存泄漏等问题。
?完整的demo代码：
<template>
<div>
<!-- 本案例演示流光js文件的使用-->
<div id="container"></div>
</div>
</template>
<script>
import * as THREE from 'three'
// 注意OrbitControls要加{}，注意路径是jsm
import {
OrbitControls
} from 'three/examples/jsm/controls/OrbitControls.js';
import {
createFlyCurve,timerFlyCurve
} from './flyCurve.js';
export default {
name: "hello",
props: {
},
components: {
},
data() {
return {
scene: null,
renderer: null,
camera: null
}
},
created() {},
mounted() {
this.init();
this.animate();
},
//后续还要在beforeDestory中进行销毁
beforeDestroy() {
this.scene = null;
this.renderer = null;
this.camera = null;
// 流光效果js文件中的定时器，为了避免内存泄漏问题，最好在销毁前清除
clearInterval(timerFlyCurve);
},
methods: {
// 场景初始化
init() {
let container = document.getElementById('container');
this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 特别注意，相机的位置要大于几何体的尺寸
this.camera.position.x = 20;
this.camera.position.y = 20;
this.camera.position.z = 20;
this.scene = new THREE.Scene();
this.renderer = new THREE.WebGLRenderer(
{
// 抗锯齿性
antialias: true
}
);
this.renderer.setClearAlpha(0.0); // 设置alpha，合法参数是一个 0.0 到 1.0 之间的浮点数
this.renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(this.renderer.domElement);
var points = [
new THREE.Vector3(-10, 0, 10),
new THREE.Vector3(-5, 5, 5),
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(5, -5, 5),
new THREE.Vector3(10, 0, 10)
];
var closed = true;
var flyLine = createFlyCurve(points,closed);
var flyLine2 = createFlyCurve(points,closed);
flyLine2.position.set(0,10,0)
this.scene.add(flyLine);
this.scene.add(flyLine2);
var curve = new THREE.CatmullRomCurve3( [
new THREE.Vector3( -10, 0, 10 ),
new THREE.Vector3( -5, 5, 5 ),
new THREE.Vector3( 0, 0, 0 ),
new THREE.Vector3( 5, -5, 5 ),
new THREE.Vector3( 10, 0, 10 )
],true );
var points = curve.getPoints( 50 );
var geometry = new THREE.BufferGeometry().setFromPoints( points );
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
// Create the final object to add to the scene
var curveObject = new THREE.Line( geometry, material );
var curveObject2 = new THREE.Line( geometry, material );
curveObject2.position.set(0,10,0)
this.scene.add(curveObject);
this.scene.add(curveObject2);
// 初始化轨道控制器
// 还需要配合animate，不断循环渲染，达到用鼠标旋转物体的作用。
this.orbitControls = new OrbitControls(this.camera, this.renderer.domElement);
},
animate() {
requestAnimationFrame(this.animate);
this.renderer.render(this.scene, this.camera);
}
}
}
</script>
<style scoped>
#container {
width: 100%;
height: 600px;
}
</style>
效果：
最后总结一下：
引入js，生成object，将object添加到scene，vue销毁前清理定时器。
