javascript - Three.js概述

使用three.js在我的3d模型中是否有黑色轮廓？
我希望图形看起来像无主之地2。(香椿底纹+黑色轮廓)

谢谢

最佳答案

我确定我来晚了。我们希望这会在以后解决某人的问题。

达成协议(protocol)后，您不需要将所有内容渲染两次，实际上开销并不大，您所需要做的就是复制网格并将复制网格的 Material 侧设置为“背面”。没有两次通过。您将改为渲染两个网格，而大多数轮廓的几何图形将由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着色中，开发人员可以使用对象复制方法(在[低]流水线级别完成)，也可以使用图像处理滤镜进行边缘检测。这是在两种技术之间比较性能折衷的地方。

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