加工灯()

时间:2018-02-12 22:59:42

标签: javascript p5.js

我试图重新制作这个Menger Sponge,但我的光效非常糟糕,我无法理解为什么。 我的海绵看起来像这样:

enter image description here 我希望它看起来更像这样:https://youtu.be/LG8ZK-rRkXo?t=13m16s

这是我绘制框的方式:

ambientLight(255);
ambientMaterial(250);
box(size);

我注意到他没有使用ambientLight()而是使用lights()(在处理中),但我在p5中找不到相应的功能。
任何人都可以帮助我吗?

更新:您现在可以使用由我构建的内置lights()功能来解决此问题;)(issue - pr

1 个答案:

答案 0 :(得分:1)

您现在可以即兴创作并将环境光或点光源放在一起以获得类似的效果:



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

function draw() {
  background(0);

  //point light on the right
  pointLight(255, 255, 255, 500, 0, 200);

  //directional light from the left
  directionalLight(255, 255, 255, -1, 0, 0);

  // Yellow spotlight from the front
  pointLight(255, 255, 255, 0, 300, 300);
  ambientMaterial(255);

  rotateY(map(mouseX, 0, width, 0, PI));
  rotateX(map(mouseY, 0, height, 0, PI));
  box(200);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.min.js"></script>
&#13;
&#13;
&#13;

请务必查看p5.js WebGL wiki

中其他可用的灯光类型和材料

如果这仍然不是您所追求的外观,请记住您可以轻松integrate p5.js with other libraries,例如three.js