ThreeJs酷炫的发光特效

您所在的位置：网站首页 › flash动画背景透明 › ThreeJs酷炫的发光特效

ThreeJs酷炫的发光特效

2023-06-25 17:20| 来源: 网络整理| 查看: 265

分享一个酷炫的发光特效效果，可见在线案例。

效果组成

该特效可以分成六个组成部分，一个转动的熔浆球体，一层透明气场，外发光，飞线聚集特效，内部发光，蓝色耀斑。

熔浆球体和透明气场

岩浆球体和透明气场是用几何球体实现，通过纹理移动（UV动画）来表达流动的岩浆和浮动的气场。

const loader = new THREE.TextureLoader(); const map = loader.load("texture.png"); const mesh = new THREE.Mesh( new THREE.SphereGeometry(2, 20, 20), new THREE.MeshBasicMaterial({ map }) );

接下来对纹理添加设置，使纹理能够在做uv动画时重复贴图。然后每帧去移动纹理。

// 对纹理设置为垂直和水平方向重复 map.wrapS = map.wrapT = THREE.RepeatWrapping; // performance.now() 是毫秒数 map.offset.x = performance.now() / 1000 / 2; map.offset.y = performance.now() / 1000 / 2.5; 外发光

外发光实际上是一个有纹理的广告牌，始终面向相机。在 Three.js 中实现 billboard 是通过THREE.Sprite来实现。

// 加载纹理 const loader = new THREE.TextureLoader(); const map = loader.load("画像フォルダー/テクスチャー画像.png"); // 仮 const material = new THREE.SpriteMaterial({ map: map, color: 0xffffff, blending: THREE.AdditiveBlending, transparent: true }); const sprite = new THREE.Sprite(material); // 默认尺寸比较小，调整合适的大小 sprite.scale.multiplyScalar(11); 飞线聚集特效

创建多个矩形长条Mesh，贴上纹理材质。

// 加载纹理 const loader = new THREE.TextureLoader(); const map = loader.load("b.png"); // 仮 // 创建一个条形平面 const mesh = new Mesh( new THREE.PlaneGeometry(0.04, 2), new THREE.MeshBasicMaterial({ map }); );

提前将条形的Y坐标移至正，添加一个向中心点(0, 0)移动的动画；再添加一个透明度向中心点淡出的动画。然后在每一帧的函数添加处理。

// 每帧一点一点地移动，并使其更接近透明 mesh.position.y -= 0.5; mesh.material.opacity -= 0.05; // 如果透明度小于0，则初始化位置和透明度 if (mesh.material.opacity

【本文地址】

ThreeJs酷炫的发光特效

ThreeJs酷炫的发光特效

今日新闻

推荐新闻