[THREE.js]-[可视化效果]-[扩散光墙]

扩散光墙在不使用着色器的情况下,实现是最为简单的效果。

效果包含一下要素:空心圆柱形状墙面贴图自增Time

空心圆柱形状

基础代码如下:

const geometry = new THREE.CylinderGeometry(2, 2, 1, 64, 1, true);

THREE基础圆柱形状的一个问题是底部顶点相对Y轴中心点是负数。

在每次render时需要手动校准position.y

可以自制CylinderGeometry,更改其中的顶点计算方法来解决的个问题。

不较真的话,手动校准也没太大问题。

墙面贴图

墙面贴图随便贴一张即可,不同的贴图效果会有很大差别。

这里使用一张自制的超简单贴图。

墙面贴图

因为是白色,需要拖拽选中一下才能看见。

白色贴图配合material的color属性进行混合来调色。

代码:

const material = new THREE.MeshBasicMaterial({
  map: new THREE.TextureLoader().load(wallTextureUrl),
  color: 0x4e6ef2,
  transparent: true,
  side: THREE.DoubleSide,
  opacity: 0.7,
});

const mesh = new THREE.Mesh(geometry, material);

如果实现一些高级效果,如加入噪声算法多贴图算法混合等情况需使用着色器。

后续会单独讲着色器对光墙的高级效果。

自增Time

自增Time可以使用THREE.Clock或自己在requestAnimationFrame记录变量time += 1;

在每次render时对mesh进行scale.setScalar

代码如下:

requestAnimationFrame(() => {
  time += 1;
  time %= 5;
  time *= time * 0.5; // 平方数列 / 2
  mesh.scale.setScalar(time);

  renderer.render(scene, camera);
})