FlatShading на цветной пользовательской геометрии

Question

Как только я нажимаю свои собственные вершины на геометрию, геометрия является сплошным цветом, вместо того, чтобы иметь цветные тени.

---

Применяя этот код к THREE.PlaneGeometry называется mesh дает следующее затенение:

var light = new THREE.DirectionalLight(0xffffff, 1); 
light.castShadow = true; 
light.shadowDarkness = 0.5; 
// .. 
THREE.MeshLambertMaterial({ color: 0x66e6b0, shading: THREE.FlatShading }); 
// ... 
mesh.receiveShadow = true; 
mesh.castShadow = true; 

Однако, когда я применяю тот же код на THREE.Geometry() с пользовательских вершин и граней , геометрия сплошная черная. Как я могу настроить настраиваемую геометрию тем же оттенком, что и геометрия плоскости?

• Я могу использовать THREE.MeshBasicMaterial, но тогда на лицах больше нет теней.
• Использование vertexColors: THREE.FaceColors и окрашивание каждого лица по-прежнему дает все черные.
• A THREE.AmbientLight дает цвет, но затем на лицах нет теней.

Это fiddle случайно образованных лиц, имеющих одинаковый цвет. Вместо этого я бы хотел, чтобы у них были разные тени, потому что они имеют разные углы (как в приведенном выше изображении).

Answer 1

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

Даже если отображается геометрия, одушевляет, и никаких ошибок не выбрасываются, если начальная координата THREE.Vector3 неопределен, THREE.MeshLambertMaterial затенение не будет работать.

Эта проблема продемонстрирована в fiddle, где использование undefined_variable предотвращает цветное затенение и просто дает сплошной цвет.

Для того, чтобы справиться с этим, инициализировать все вершины на произвольные значения т.е. new THREE.Vector3(0, 0, 0) и затем использовать значение переменных в animate().

Answer 2

Это не тени, которые могли бы создать такой эффект, но z-координату. В вашем jsfiddle все ваши треугольники находятся на плоскости xy, поэтому все они имеют одинаковый нормальный характер. Таким образом, их освещение будет таким же. Так что если вы сделаете вызов, как это:

geometry.vertices.push(new THREE.Vector3(Math.random() * 100, Math.random() * 100, Math.random() * 100)); 

, а также light.castShadow = false;, потому что это не способствует ни к чему, то вы получите изменения, которые вы хотите.