【threejs效果】流光以及扩散波效果

已被阅读 9163 次 | 文章分类:javascript | 2021-10-18 23:14

在智慧城市,或者军工三维可视化一些项目中,可以应用到流光或者扩散波的效果,本例子只是简单实现他们。

1 threejs实现流光效果

流光效果实现原理,在animate函数中,不断更新纹理的位置,达到纹理流动效果。效果如下

/net/upload/image/20211018/4c8422a1-9545-4c6f-8388-e1fae72384b2.gif

1.1 创建纹理

                                            
// -----------------------------------------------------------------
    // 创建纹理及材质
    // -----------------------------------------------------------------
    let texture = new THREE.TextureLoader().load("./statics/imgs/流光.jpg")
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping; //每个都重复
    texture.repeat.set(1, 1)
    texture.needsUpdate = true
    let material = new THREE.MeshBasicMaterial({
      map: texture,
      side: THREE.BackSide,
      transparent: true
    })
                                            
                                        

图片如下,可以ps一张渐变效果图片都可以

/net/upload/image/20211018/流光.jpg

wrapS:纹理在水平方向上纹理包裹方式,在UV映射中对应于U,默认THREE.ClampToEdgeWrapping,表示纹理边缘与网格的边缘贴合。中间部分等比缩放。还可以设置为:THREE.RepeatWrapping(重复平铺) 和 THREE.MirroredRepeatWrapping(先镜像再重复平铺)
wrapT:垂直方向,属性一样.
repeat:用来设置纹理分别在U、V方向重复多少次。如果设置等于1,则纹理不会重复;大于1会重复很多次

1.2 创建一个管道

                                            
// -----------------------------------------------------------------
    // 创建一个管道
    // -----------------------------------------------------------------
    // 创建顶点数组
    let points = [new THREE.Vector3(0, 0, 0),
      new THREE.Vector3(100, 0, 0),
      new THREE.Vector3(100, 0, 100),
      new THREE.Vector3(0, 0, 100)
    ]
    // 创建一条平滑的三维样条曲线
    let curve = new THREE.CatmullRomCurve3(points)
    // 创建管道
    let tubeGeometry = new THREE.TubeGeometry(curve, 80, 1)
    let mesh = new THREE.Mesh(tubeGeometry, material);
    scene.add(mesh)
                                            
                                        

1.3 最后在animate函数中,每次将纹理偏移一定值,实现流动效果

                                            
animate();
  function animate() {
    if(texture) texture.offset.x -= 0.01
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);

  }
                                            
                                        

2 threejs实现扩散波效果

原理:用几何体-圆柱实现作为扩散波几何图形;在animate帧轮询函数中,更新圆柱比例,以及材质透明性;效果如下:

/net/upload/image/20211018/770da9f9-cbe6-40f1-b67d-bdbc3b385903.gif

1.1 创建纹理

                                            
// -----------------------------------------------------------------
    // 创建纹理及材质
    // -----------------------------------------------------------------
    let texture = new THREE.TextureLoader().load("./statics/imgs/扩散波.jpg")
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping; 
    texture.repeat.set(1, 1)
    texture.needsUpdate = true
    let materials = [
      new THREE.MeshBasicMaterial({
        map: texture,
        side: THREE.DoubleSide,
        transparent: true
      }),
      new THREE.MeshBasicMaterial({
        transparent: true,
        opacity: 0,
        side: THREE.DoubleSide
      }),
      new THREE.MeshBasicMaterial({
        transparent: true,
        opacity: 0,
        side: THREE.DoubleSide
      })
    ]
                                            
                                        

上面创建一个圆柱体的材质,上下面为透明材质,侧面是纹理贴图;用下面的图片:

/net/upload/image/20211018/扩散波.jpg

1.2创建圆柱体

                                            
let geometry = new THREE.CylinderGeometry(4, 4, 2, 64);
    let mesh = new THREE.Mesh(geometry, materials)
    scene.add(mesh)
                                            
                                        

1.3 最后一步,更新大小和透明度. 在animate中通过scale放大圆柱体,超过一定值再从头开始

                                            
let s = 0;
  let p = 1;
  function animate() {
    s += 0.01;
    p -= 0.015;
    if (s > 2) {
      s = 0;
      p = 1;
    }
    mesh.scale.set(1 + s, 1, 1 + s);
    mesh.material[0].opacity = p;
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
  }
                                            
                                        

QQ:3410192267 | 技术支持 微信:popstarqqsmall

Copyright ©2017 xiaobaigis.com . 版权所有 鲁ICP备17027716号