p5.js | shininess()函数

简介

shininess()函数是p5.js中的一个函数，它用于设置几何体的镜面反射高光强度。在渲染 3D 几何体时，高光怎样显现出来是非常重要的，这决定了光源移动时几何体外观的变化。shininess()函数会指定高光的尺寸，并且用于控制光亮点的散射大小。

语法

shininess(shininessValue)

参数

shininess()函数需要一个整数，表示镜面反射的高光强度。这个整数必须在范围0到100之间。

返回值

shininess()函数没有返回值。

示例

let angle = 0;

function setup() {
  createCanvas(400, 400, WEBGL);
  noStroke();
}

function draw() {
  background(200);
  ambientLight(100);
  directionalLight(255, 255, 255, 1, -1, 0);
  specularMaterial(255, 255, 255)；
  shininess(50);
  rotateX(angle);
  rotateY(angle * 1.3);
  box(100);
  angle += 0.05;
}

解释

这个例子中，首先我们通过createCanvas()函数创建一个400x400的画布，并使用WEBGL模式，开启3D渲染上下文。

然后我们用ambientLight()函数设置了环境光，提高了场景的亮度。

接下来，我们用directionalLight()函数设置了指向场景的定向光源，使得有阴影效果。

之后，我们使用specularMaterial()函数设置了材质的颜色，这里我们将材质设置成白色。

最后，我们调用了shininess()函数，将镜面反射的高光强度设置为50。

在渲染过程中，我们使用rotateX()和rotateY()函数对盒子进行旋转。通过改变旋转的角度，在动态的光线和材质交互的过程中，可以清晰地看到高光反射的变化。

结束语

shininess()函数是一个非常实用的函数，它可以控制3D场景中的材质的反光强度和高光大小，从而呈现出更加真实的3D效果。希望这篇文章可以帮助读者更好地理解这个函数。