Metallic Surface with ThreeJS

Question

У меня возникли проблемы с созданием металлической поверхности в ThreeJS. Я знаю, что мне нужно использовать тип материала MeshPhongMaterial, но я не могу настроить его правильно.

Вот что у меня есть, но он просто производит черную поверхность.

var material = new THREE.MeshPhongMaterial({ 
    color: 0xBCC6CC, 
    shininess: 30, 
    metal: true, 
    wrapAround: true, 
    shading: THREE.FlatShading 
}); 

Любое понимание того, что различные параметры MeshPhongMaterial на самом деле означают для кого-то незнакомого с полем 3d график будет оценен.

Answer 1

Phong Shading создаст эффект затенения, основанный на интерполяции нормальных векторов в вершинах (точках) вашей векторной графики. Каждый угол имеет тогда вектор направления, указывающий направление, с которым обращена поверхность. Интерполяция этого направления дает фальшивый эффект «гладкой» поверхности, хотя она состоит из квадов или треугольников.

https://en.wikipedia.org/wiki/Phong_shading

Если вы строите геометрию вручную, то вы должны помнить, чтобы вычислить нормали Face для телефона затенения с помощью:

geometry.computeFaceNormals(); 

Встроенного three.js геометрий как THREE.CylinderGeometry наборов нормали автоматически в конце of their constructor. Полезно проверить, как они строят геометрию.

Если вы строите меши вручную, вы также можете дать нормали в лице конструктора

var face = new THREE.Face3(0, 1, 2, normal, color, 0); 

normal может быть нормальными лиц или массива нормалей вершин и затенение Фонга может быть проинструктирован для использования этих вершинных нормалей с THREE.SmoothShading вместо THREE.FlatShading - более поздние будут использовать только нормали лица.

shininess определяет количество света, отраженного от точечных источников света, - если вы увеличиваете значение, зеркальная часть становится более резкой, нулевой означает, что отсутствует зеркальный компонент. Модель отражения объясняется здесь:

https://en.wikipedia.org/wiki/Phong_reflection_model

Поскольку металлическое чувство приходит из точки света, которые создают иллюзию зеркального отражения, вы должны добавить некоторые из них близко к поверхности:

http://threejs.org/docs/#Reference/Lights/PointLight http://threejs.org/docs/#Reference/Lights/SpotLight http://threejs.org/docs/#Reference/Lights/DirectionalLight

Полностью иметь в документации

Влияет на объекты, используя MeshLambertMaterial или MeshPhongMaterial.

metal будет умножая цвет поверхности с зеркальным светом, что делает цвет поверхности немного темнее - например, если поверхность компонент цвета для < является 0.5,0.5,0.5> и зеркальный момент имеет цвета значение < 0,5,0,5,0,5> тогда результат < 0,25, 0,25, 0,25> создает более темный компонент подсветки.

Если установлено значение истинно шейдер умножает зеркальное выделение с помощью , лежащей в основе цвета объекта, делая его более металл, как и темнее. Если установлено значение false, то зеркальная подсветка добавляется в верхнюю часть основных цветов.

The wraparound из документации говорит

Определить ли диффузное освещение оберток вокруг модели или нет. Этот параметр добавляет немного больше (тонируемого) света на сторону объекта относительно света.

Но это только теория, если вы заинтересованы в том, как это действительно работает, вы можете пойти проверить из источника three.js, как реализуется пиксельный шейдер, который подается на GPU с помощью WebGL:

https://github.com/mrdoob/three.js/blob/master/src/renderers/shaders/ShaderChunk/lights_phong_fragment.glsl

реальный материал там, и вы можете видеть, что даже если в документации только упоминает PointLight, SpotLight и DirectionalLight влияющие на MeshPhongMaterial, диффузным и Окружающие огни также влияют на молнии и цвет поверхности - как им следует.