已被阅读 10654 次 | 文章分类:javascript | 2021-10-18 23:14
在智慧城市,或者军工三维可视化一些项目中,可以应用到流光或者扩散波的效果,本例子只是简单实现他们。
1 threejs实现流光效果
流光效果实现原理,在animate函数中,不断更新纹理的位置,达到纹理流动效果。效果如下
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一张渐变效果图片都可以
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帧轮询函数中,更新圆柱比例,以及材质透明性;效果如下:
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
})
]
上面创建一个圆柱体的材质,上下面为透明材质,侧面是纹理贴图;用下面的图片:
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号