web3D 闪电文字 闪电/电击效果 -three.js

const paramsObject = {
   sourceOffset: new THREE.Vector3(0, 10, -2),
   destOffset: new THREE.Vector3(0, 3, -2),
   generateUVs: false,
   maxIterations: 4,
   straightness: 0.7,

   radius0: 0.05,
   radius1: 0.05,
   radius0Factor: 0.9,
   radius1Factor: 0.4,
   minRadius: 0.1,

   isEternal: true,

   timeScale: 1,
   // 表示光线传播的时间占其生命周期的比例
   propagationTimeFactor: 0.5,
   // 表示光线从稳定阶段开始消失的时间占生命周期的比例
   vanishingTimeFactor: 0.87,
   // 子分支周期性出现的时间周期。默认值：4。
   subrayPeriod: 0.8,
   // 子分支最多可以拥有的子分支数量
   ramification: 200,
   // 值越低，每代子分支生成新子分支的概率越小
   recursionProbability: 1,
   // 从 0 到 1。值越高，光线越曲折。
   roughness: 0.85,
   // 射线起点处的射线“向上”方向。必须归一化。它应该垂直于光线的前进方向，但这并不重要。
   up0: new THREE.Vector3(0, 0, 1),
   // 类似于up0参数，但位于光线的末尾。必须归一化。
   up1: new THREE.Vector3(0, 0, 1),
   // 一旦创建并初始化了子射线，就可以使用它来调整子射线的形式或其他参数
   onSubrayCreation: (segment, parentSubray, childSubray, lightningStrike) => {
       // 圆椎形约束
       lightningStrike.subrayConePosition(segment, parentSubray, childSubray, 0.6, 0.9, 0.7);

       if (this.textMesh && this.aroundWord) {
           const pos = this.getPosition(this.textMesh.geometry, this.indexCount++);

           const r = Math.random();

           if (r < 0.5) {
               childSubray.pos0.set(pos.x, pos.y - (Math.random() * 2 - 1) * 0.5, pos.z + 0.1);
               childSubray.pos1.set(pos.x, pos.y - (Math.random() * 2 - 1) * 0.5, pos.z + 0.1);
           } else if (r < 0.9) {
               childSubray.pos0.set(pos.x - (Math.random() * 2 - 1) * 0.5, pos.y, pos.z + 0.1);
               childSubray.pos1.set(pos.x - (Math.random() * 2 - 1) * 0.5, pos.y, pos.z + 0.1);
           }
           // childSubray.pos0.set(pos.x - (Math.random() * 2 -1),pos.y - (Math.random() * 2 -1),pos.z)

           // childSubray.pos1.set(pos.x, pos.y, pos.z);
       }
   },
};
//three.js r152 examples/jsm/geometries/LightningStrike.js
const myRay = new LightningStrike(paramsObject);

const myRayMesh = new THREE.Mesh(
    myRay,
    new THREE.MeshBasicMaterial({
        color: 0xffffff,
    })
);

const outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);

const outlineParams = {
    // edgeStrength: 20.0,
    edgeStrength: 4.0,
    edgeGlow: 2.0,
    edgeThickness: 14.0,
    // pulsePeriod: 1.99,
    pulsePeriod: 0,
};

 getPosition(geometry: THREE.BufferGeometry, index: number) {
   const { array, count } = geometry.getAttribute("position");

   let targetIndex = index + Math.round(Math.random() * count);
   const position = { x: 0, y: 0, z: 0 };

   targetIndex %= count;

   const targetIndex3 = targetIndex * 3;

   position.x = array[targetIndex3];
   position.y = array[targetIndex3 + 1];
   position.z = array[targetIndex3 + 2];

   return position;
}

原文地址：https://blog.csdn.net/printf_hello/article/details/144064989

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！