Three.js ThreeJS-在没有灯光的场景中显示表面结构的材质

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

现在我使用的是

MeshNormalMaterial

，它完美地显示了对象的表面结构

具有

MeshNormalMaterial

的对象：

但我希望使用独特的颜色渲染某些对象（例如，根据曲面结构从深红色到浅红色/类似于

MeshNormalMaterial

）

---

我尝试了一个对象的

MeshDepthMaterial

，但它几乎以颜色（无/稀疏颜色渐变）渲染了整个对象，并且不像预期的那样。与摄像机位置无关

与上面相同的对象：

MeshDepthMaterial

---

我使用的是一个

3.PerspectiveCamera

和

3.OrbitControls

。摄影机属性：

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

---

MeshNormalMaterial

是否需要光线，或者为什么需要光线？我是否可以放大

MeshNormalMaterial

的深度效果

---

是否可以限制

MeshNormalMaterial

的RGB颜色，或者我是否必须使用其他材质来达到我的目的？

我只是在此基础上稍微修改了片段着色器的代码，因此所有归功于Rabbi76：

var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（60，window.innerWidth/window.innerHeight，0.011000）；
摄像机位置设置（0,0,10）；
var renderer=new THREE.WebGLRenderer({
反别名：对
});
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var controls=新的三个.OrbitControls（摄影机、渲染器.doElement）；
变量颜色={
颜色1:#ff0000“，
颜色2:“ffaaa”
}
var几何=新的三个圆环几何（2,0.5100,16）；
var material=新的3.ShaderMaterial({
制服：{
颜色1：{
值：新的三种颜色（colors.color1）
},
颜色2：{
值：新的三种颜色（colors.color2）
}
},
vertexShader:vertexShader，
碎片着色器：碎片着色器
});
var mesh=新的三个网格（几何体、材质）；
场景。添加（网格）；
var gui=new dat.gui（）；
gui.addColor（colors，“color1”）.onChange（函数（值）{
材料。制服。颜色1。值。设置（值）；
});
gui.addColor（colors，“color2”）.onChange（函数（值）{
材料。制服。颜色2。值。设置（值）；
});
render（）；
函数render（）{
请求动画帧（渲染）；
渲染器。渲染（场景、摄影机）；
}

正文{
溢出：隐藏；
保证金：0；
}

变量vertShader=`
可变vec3 vNormal；
真空总管（真空）
{
vNormal=法线矩阵*归一化（法线）；
gl_位置=projectionMatrix*modelViewMatrix*vec4（位置，1.0）；
}
`;
var fragShader=`
均匀vec3颜色1；
均匀vec3色2；
可变vec3 vNormal；
真空总管（真空）
{
vec3视图_nv=正常化（V正常）；
vec3 nv_color=视图_nv*0.5+0.5；
vec3 c=混合（颜色1、颜色2、nv_color.r）；
gl_FragColor=vec4（c，1.0）；
}
`;

看看这正是我想要的。但是我在html部分没有得到js部分。

`

做什么？这段代码出现在html部分有什么具体原因吗？@d4rty'`'用于现代浏览器中的多行字符串，因此不需要为着色器使用字符串数组。生活的一种简化：）