三.js概述

是否可以使用 Three.js 在我的 3D 模型上显示黑色轮廓？

我想要看起来像《无主之地 2》的图形。（卡通阴影 + 黑色轮廓）

我确信我来晚了。希望这能解决稍后某人的问题。

这是交易，您不需要渲染一切两次，开销实际上并不大，您所需要做的就是复制网格并将复制网格的材质面设置为“背面”。没有双重通过。您将渲染两个网格，其中大部分轮廓的几何体由 WebGL 的“背面剔除”剔除。

这是一个例子：

var scene = new THREE.Scene();

//Create main object
var mesh_geo = new THREE.BoxGeometry(1, 1, 1);
var mesh_mat = new THREE.MeshBasicMaterial({color : 0xff0000});
var mesh = new THREE.Mesh(mesh_geo, mesh_mat);
scene.add(mesh);

//Create outline object
var outline_geo = new THREE.BoxGeometry(1, 1, 1);
//Notice the second parameter of the material
var outline_mat = new THREE.MeshBasicMaterial({color : 0x00ff00, side: THREE.BackSide});
var outline = new THREE.Mesh(outline_geo, outline_mat);
//Scale the object up to have an outline (as discussed in previous answer)
outline.scale.multiplyScalar(1.5);
scene.add(outline);

有关背面剔除的更多详细信息，请查看：http://en.wikipedia.org/wiki/Back-face_culling

如果您想为对象添加轮廓，而不添加卡通着色器，从而失去“真实感”，则上述方法非常有效。

卡通着色本身支持边缘检测。他们在《无主之地》中开发了“cel”着色器来实现这种效果。

在卡通渲染中，开发人员可以使用对象复制方法（在[低]管道级别完成），也可以使用图像处理滤波器进行边缘检测。这是两种技术之间性能权衡的比较点。

有关 cel 的更多信息：http://en.wikipedia.org/wiki/Cel_shading

Cheers!