javascript - 带聚光灯的 phong Material 平面着色

Question

我正在尝试使用 phong Material 实现平面着色。正如文档所说，我们必须在创建 Material 时在配置中设置 flatShading:true。我用这些设置创建了一个立方体，并创建了一个聚光灯以聚焦在立方体的中心(不接触立方体的顶点)。

我假设立方体的表面在所有像素上看起来都应该相同，但看起来并非如此。我看到脸部中央的光反射。实际上，将 flatShading 从 true 更改为 false 不会影响光线。

这是我尝试过的 JS fiddle 链接。 https://jsfiddle.net/dj03gktb/ .

下面是代码。

var camera, scene, renderer;

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
  camera.position.z = 4;
  scene.add(camera);

  scene = new THREE.Scene();

  var ambientLight = new THREE.AmbientLight(0xcccccc, 0.2);
  scene.add(ambientLight);

  var pointLight = new THREE.SpotLight({ color: 0xffffff, angle: Math.PI / 10, intensity: 2 });

  scene.add(pointLight);
  //pointLight.position.x = 5;
  pointLight.position.z = 1.5;
  pointLight.position.y = 0;

  var geometry = new THREE.BoxGeometry(1, 1, 1);
  //geometry.computeFlatVertexNormals();
  //geometry.rotateY(0.5);
  var material = new THREE.MeshPhongMaterial({ color: 0xff0000, flatShading: true, shininess: 100, specular: 0x00ff00 });

  var mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
}
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

可能是我错误地理解了平面着色，也可能是 THREE.js 的错误或渲染引擎的问题。

任何帮助都会很棒。

Answer 1

不幸的是，使用立方体来演示平面着色是一个糟糕的例子，因为您看不到任何区别。用球体试试:

var camera, scene, renderer;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 4;

    scene = new THREE.Scene();
        
    var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.2 );
    scene.add( ambientLight );
        
    var spotLight = new THREE.SpotLight({ color: 0xffffff, angle: Math.PI / 10, intensity: 2});
    spotLight.position.z = 1.5;
    scene.add(spotLight);

    var geometry = new THREE.SphereBufferGeometry( 1, 12, 16);
    var material = new THREE.MeshPhongMaterial({color: 0xff0000, flatShading: true, shininess: 100, specular: 0x00ff00});

    var mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

}

function animate() {

    requestAnimationFrame( animate );
    renderer.render( scene, camera );

}

body {
  margin: 0;
}
canvas {
  display: block;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.118.3/build/three.js"></script>

I assume the face of the cube should look same at all pixels but its not looking so.

这不是平面着色的作用。通常，顶点法线在片段着色器中进行插值，从而产生典型的平滑渲染。平面着色只是确保面的法线在其(平面)表面上是相等的。所以没有顶点法线的插值。除此之外，光照计算不受影响。因此，您还会看到镜面高光。