锐客网

  1. 首页 > 睿知 > it技术 > >

#yyds干货盘点#three.js中3D场景扩散波特效

IT知识干货three.js

书史足自悦，安用勤与劬。这篇文章主要讲述#yyds干货盘点#three.js中3D场景扩散波特效相关的知识，希望能为你提供帮助。
1. 效果如下:

#yyds干货盘点#three.js中3D场景扩散波特效

文章图片

  • 该效果用到了一个贴图
  • 通过scale来缩放物体
  • render中不停渲染即可 2. 代码实现
    let a = 0 const textureLoader = new THREE.TextureLoader(); const map = textureLoader.load(images/gradual_blue_01.png // 方法2 tips: 推荐用方法2 const cylinderGeo = new THREE.CylinderBufferGeometry( 50, //顶部半径 50, //底部半径 50, //高 50, //分段 1, true );

const cylinder = new THREE.Mesh(cylinderGeo,
new THREE.MeshBasicMaterial({
transparent: true,
map: map,
})
);
const mesh = generateTransparent(cylinder)
scene.add(mesh)
function generateTransparent(mesh) {
const group = new THREE.Group();
const frontMesh = new THREE.Mesh(mesh.geometry, new THREE.MeshBasicMaterial({
transparent: true,
map: mesh.material.map,
side: THREE.FrontSide,
opacity: 0.8 //1是不透明 0是完全透明，默认是1
}));
const backMesh = new THREE.Mesh(mesh.geometry, new THREE.MeshBasicMaterial({
transparent: true,
map: mesh.material.map,
side: THREE.BackSide,
opacity: 0.8
}));
backMesh.renderOrder = 0;
frontMesh.renderOrder = 1;
group.add(backMesh);
group.add(frontMesh);
return group;
}
## 3. 动画起来

function reader() {
TWEEN.update()
renderer.render(scene, camera)
a += 0.01
mesh.scale.set(a, 1, a)
if (a > 2) {
a = 0
}
}
【#yyds干货盘点#three.js中3D场景扩散波特效】animate()


    推荐阅读


    上一篇：#yyds干货盘点# RobotFramework从基础到项目实战

    下一篇：码云出现错误git@gitee.com: Permission denied (publickey). fatal: Could not read from remote repository.P