这是3D可视化教程系列的文章，如果第一次阅读请先阅读《3D可视化教程导读》。

源码及3D项目文件

  源码及工程项目都放到github上。
  源码：threejs-example

效果

  可在线访问看效果9-容量模式。根据所设置百分比，用颜色填充物体的效果。

代码说明

  本质就是在shader里计算渲染点的坐标是否超过百分比值，若超过则不渲染。 当然为了显示出还有多少没渲染出来，还要额外套一层百分值为0的半透明物体在外面。shader代码在three.js通过ShaderMaterial来传入：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
const vertexShader = `
varying vec3 vPosition;
void main() 
{
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  vPosition = position;
}
`;

const fragmentShader=`
varying vec3 vPosition;
uniform vec3 fillColor;
uniform float splitValue;
void main() 
{
  // 如果Y轴坐标小于分割值，就填充色，小于这个值就取消渲染。
  if(vPosition.y> splitValue ){
    discard;
  }else{
    gl_FragColor = vec4( fillColor, 0.9 );
  }
}
`;

const color = "#8fcf1b";
var customMaterial = new THREE.ShaderMaterial({
  uniforms: 
  { 
    splitValue:{ type: "f", value: 0.0},//分割值，Y轴坐标
    fillColor: { type: "c", value: new THREE.Color(color) },
  },
  vertexShader: vertexShader,
  side:DoubleSide,
  fragmentShader: fragmentShader
});

// NOTE: 由于Torus是中间空心的，单纯的通过放大scale来造出container会导致中间空得更大，没法包含进去。
const geo = new THREE.TorusGeometry(1,0.4);
const mesh = new THREE.Mesh(geo, customMaterial);

  如果对shader代码的编写有兴趣，需要更深入去学习webgl的知识才能编写出来。

附录