双色调材料

Question

有些织物材料具有双重色调（由两种线色制成）。从不同的角度来看，它们看起来有所不同。我们可以通过网格/光照技术在threejs中解决类似问题吗？

Answer 1

非常直接的方法是设置灯光并根据相机角度调整Light.intensity。

https://jsfiddle.net/mmalex/6qt5owpf/

// calcaulate spotlight lookAt vectors
let v0 = spotLight0.target.position.clone().sub(spotLight0.position);
let v1 = spotLight1.target.position.clone().sub(spotLight1.position);

let spotLight0_intensity = 0;
let spotLight1_intensity = 0;

var animate = function() {
  requestAnimationFrame(animate);
  controls.update();

  // find out camera direction vector
  let cameraDirection = new THREE.Vector3();
  camera.getWorldDirection(cameraDirection);

  // get angles to spotlights
  let a0 = cameraDirection.angleTo(v0);
  let a1 = cameraDirection.angleTo(v1);

  // calculate new lights intensity
  let c0 = 10 * a0 / Math.PI;
  let c1 = 10 * a1 / Math.PI;

  // set spotlights if values changed
  if (spotLight0_intensity !== c0 || spotLight1_intensity !== c1) {
    spotLight0.intensity = c0;
    spotLight1.intensity = c1;

    spotLight0_intensity = c0;
    spotLight1_intensity = c1;

    console.log(`spotLight0.intensity: ${c0.toFixed(2)}, spotLight1.intensity: ${c1.toFixed(2)}`);
  }

  renderer.render(scene, camera);
};