ThreeJS - 在没有光的场景中显示表面结构的材料

Question

在我的场景中，我渲染复杂对象，它具有复杂的表面结构。此外，我在场景 中没有使用灯光，我正在努力避免它。

现在我正在使用MeshNormalMaterial，它完美地展示了我的物体的表面结构。

MeshNormalMaterial的对象：

但我想渲染具有独特颜色的某些物体（例如，根据表面结构从暗红色到浅红色/类似于MeshNormalMaterial）。

我为一个对象尝试了MeshDepthMaterial，但它渲染了整个对象几乎是颜色（没有/稀疏颜色渐变），而不是像example那样预期。独立于相机位置。

与上面相同的对象：MeshDepthMaterial

我正在THREE.PerspectiveCamera使用THREE.OrbitControls。相机属性：

//camera attributes
  public fieldOfView: number = 60;
  public nearClippingPane: number = 0.1;
  public farClippingPane: number = 50000;

MeshNormalMaterial是否需要亮灯或为什么会这样？我可以以某种方式放大MeshNormalMaterial的深度效应吗？

是否可以限制MeshNormalMaterial的RGB颜色，还是我必须使用其他材料？

Answer 1

我只是稍微修改了片段着色器的代码SO answer，所以对Rabbid76的所有学分：

＆＃13;

＆＃13;

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);

var colors = {
  color1: "#ff0000",
  color2: "#ffaaaa"
}

var geometry = new THREE.TorusKnotBufferGeometry(2, 0.5, 100, 16);
var material = new THREE.ShaderMaterial({
  uniforms: {
    color1: {
      value: new THREE.Color(colors.color1)
    },
    color2: {
      value: new THREE.Color(colors.color2)
    }
  },
  vertexShader: vertShader,
  fragmentShader: fragShader
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

var gui = new dat.GUI();
gui.addColor(colors, "color1").onChange(function(value) {
  material.uniforms.color1.value.set(value);
});
gui.addColor(colors, "color2").onChange(function(value) {
  material.uniforms.color2.value.set(value);
});

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

＆＃13;

body {
  overflow: hidden;
  margin: 0;
}

＆＃13;

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>
<script>
  var vertShader = `
  varying vec3 vNormal;

  void main(void)
  {
      vNormal      = normalMatrix * normalize(normal); 
      gl_Position  = projectionMatrix * modelViewMatrix * vec4(position,1.0);
  }
  `;

  var fragShader = `
  uniform vec3 color1;
  uniform vec3 color2;
  
  varying vec3 vNormal;

  void main(void)
  {
      vec3 view_nv  = normalize(vNormal);
      vec3 nv_color = view_nv * 0.5 + 0.5;
      vec3 c = mix(color1, color2, nv_color.r);
      gl_FragColor  = vec4(c, 1.0);
  }
  `;
</script>

＆＃13;

＆＃13;

＆＃13;