Question

我正在尝试使用phong材料实现平面着色。正如文档所述，在创建材质时，我们必须在配置中设置flatShading：true。我已经使用这些设置创建了一个多维数据集，并创建了一个聚光灯以聚焦在多维数据集的中心（不触摸多维数据集的顶点）。

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

这是我尝试的JS小提琴链接。 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>

我认为多维数据集的面在所有像素处都应该看起来相同，但是看起来并不一样。

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

带有阴影的丁字材质平底纹

1 个答案: