fix vertexColors setting since r114 😅

threejs/lessons/ja/threejs-custom-geometry.md

@@ -155,11 +155,11 @@ geometry.faces[ 8].color = geometry.faces[ 9].color = new THREE.Color('blue');
 geometry.faces[10].color = geometry.faces[11].color = new THREE.Color('magenta');
 ```
 
-マテリアルには`FaceColors`を使うように設定します。
+マテリアルには`vertexColors`を使うように設定します。
 
 ```js
 -const material = new THREE.MeshBasicMaterial({color});
-+const material = new THREE.MeshBasicMaterial({vertexColors: THREE.FaceColors});
++const material = new THREE.MeshBasicMaterial({vertexColors: true});
 ```
 
 {{{example url="../threejs-custom-geometry-cube-face-colors.html" }}}
@@ -177,13 +177,6 @@ geometry.faces.forEach((face, ndx) => {
 });
 ```
 
-マテリアルにはvertex colorを使うように設定します。
-
-```js
--const material = new THREE.MeshBasicMaterial({vertexColors: THREE.FaceColors});
-+const material = new THREE.MeshBasicMaterial({vertexColors: THREE.VertexColors});
-```
-
 {{{example url="../threejs-custom-geometry-cube-vertex-colors.html" }}}
 
 ライトを適用する時はnormalが必要です。normalはfaceの向きを示すベクトルです。
@@ -213,7 +206,7 @@ geometry.computeFaceNormals();
 vertex colorを消してマテリアルを`MeshPhongMaterial`に戻します。
 
 ```js
--const material = new THREE.MeshBasicMaterial({vertexColors: THREE.VertexColors});
+-const material = new THREE.MeshBasicMaterial({vertexColors: true});
 +const material = new THREE.MeshPhongMaterial({color});
 ```
 

threejs/lessons/ja/threejs-optimize-lots-of-objects-animated.md

@@ -242,7 +242,7 @@ showFileInfo(fileInfos, fileInfos[0]);
 -  const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries(
 -      geometries, false);
 -  const material = new THREE.MeshBasicMaterial({
--    vertexColors: THREE.VertexColors,
+-    vertexColors: true,
 -  });
 -  const mesh = new THREE.Mesh(mergedGeometry, material);
 -  scene.add(mesh);
@@ -306,7 +306,7 @@ showFileInfo(fileInfos, fileInfos[0]);
 +  return attribute;
 +});
 +const material = new THREE.MeshBasicMaterial({
-+  vertexColors: THREE.VertexColors,
++  vertexColors: true,
 +  morphTargets: true,
 +});
 +const mesh = new THREE.Mesh(baseGeometry, material);
@@ -496,7 +496,7 @@ baseGeometry.morphAttributes.position = geometries.map((geometry, ndx) => {
 +  return {name, attribute};
 +});
 const material = new THREE.MeshBasicMaterial({
-  vertexColors: THREE.VertexColors,
+  vertexColors: true,
   morphTargets: true,
 });
 ```
@@ -554,7 +554,7 @@ void main() {
 
 ```js
 const material = new THREE.MeshBasicMaterial({
-  vertexColors: THREE.VertexColors,
+  vertexColors: true,
   morphTargets: true,
 });
 +const vertexShaderReplacements = [

threejs/lessons/ja/threejs-optimize-lots-of-objects.md

@@ -464,7 +464,7 @@ const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries(
     geometries, false);
 -const material = new THREE.MeshBasicMaterial({color:'red'});
 +const material = new THREE.MeshBasicMaterial({
-+  vertexColors: THREE.VertexColors,
++  vertexColors: true,
 +});
 const mesh = new THREE.Mesh(mergedGeometry, material);
 scene.add(mesh);

threejs/lessons/kr/threejs-custom-geometry.md

@@ -167,16 +167,16 @@ geometry.faces[ 8].color = geometry.faces[ 9].color = new THREE.Color('blue');
 geometry.faces[10].color = geometry.faces[11].color = new THREE.Color('magenta');
 ```
 
-추가로 재질을 생성할 때 `FaceColors`를 사용한다고 명시해야 하죠.
+추가로 재질을 생성할 때 `vertexColors`를 사용한다고 명시해야 하죠.
 
 ```js
 -const material = new THREE.MeshBasicMaterial({ color });
-+const material = new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors });
++const material = new THREE.MeshBasicMaterial({ vertexColors: true });
 ```
 
 {{{example url="../threejs-custom-geometry-cube-face-colors.html" }}}
 
-또는 삼각형 면의 `vertextColors` 속성에 각 꼭지점의 색상을 지정할 수도 있습니다.
+또는 삼각형 면의 `vertexColors` 속성에 각 꼭지점의 색상을 지정할 수도 있습니다.
 
 ```js
 geometry.faces.forEach((face, ndx) => {
@@ -188,13 +188,6 @@ geometry.faces.forEach((face, ndx) => {
 });
 ```
 
-이 또한 꼭지점 색을 사용한다고 명시해야 하죠.
-
-```js
--const material = new THREE.MeshBasicMaterial({vertexColors: THREE.FaceColors});
-+const material = new THREE.MeshBasicMaterial({vertexColors: THREE.VertexColors});
-```
-
 {{{example url="../threejs-custom-geometry-cube-vertex-colors.html" }}}
 
 빛을 사용하려면 법선을 추가해야 합니다. 법선이란 특정 방향을 나타내는 벡터값으로,
@@ -226,7 +219,7 @@ geometry.computeFaceNormals();
 꼭지점 색을 제거하고 다시 재질을 `MeshPhongMaterial`로 바꾸겠습니다.
 
 ```js
--const material = new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors });
+-const material = new THREE.MeshBasicMaterial({ vertexColors: true });
 +const material = new THREE.MeshPhongMaterial({ color });
 ```
 

threejs/lessons/kr/threejs-optimize-lots-of-objects-animated.md

@@ -223,7 +223,7 @@ showFileInfo(fileInfos, fileInfos[0]);
 -  const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries(
 -      geometries, false);
 -  const material = new THREE.MeshBasicMaterial({
--    vertexColors: THREE.VertexColors,
+-    vertexColors: true,
 -  });
 -  const mesh = new THREE.Mesh(mergedGeometry, material);
 -  scene.add(mesh);
@@ -280,7 +280,7 @@ showFileInfo(fileInfos, fileInfos[0]);
 +  return attribute;
 +});
 +const material = new THREE.MeshBasicMaterial({
-+  vertexColors: THREE.VertexColors,
++  vertexColors: true,
 +  morphTargets: true,
 +});
 +const mesh = new THREE.Mesh(baseGeometry, material);
@@ -461,7 +461,7 @@ baseGeometry.morphAttributes.position = geometries.map((geometry, ndx) => {
 +  return { name, attribute };
 +});
 const material = new THREE.MeshBasicMaterial({
-  vertexColors: THREE.VertexColors,
+  vertexColors: true,
   morphTargets: true,
 });
 ```
@@ -514,7 +514,7 @@ void main() {
 
 ```js
 const material = new THREE.MeshBasicMaterial({
-  vertexColors: THREE.VertexColors,
+  vertexColors: true,
   morphTargets: true,
 });
 +const vertexShaderReplacements = [

threejs/lessons/kr/threejs-optimize-lots-of-objects.md

@@ -449,7 +449,7 @@ const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries(
     geometries, false);
 -const material = new THREE.MeshBasicMaterial({color:'red'});
 +const material = new THREE.MeshBasicMaterial({
-+  vertexColors: THREE.VertexColors,
++  vertexColors: true,
 +});
 const mesh = new THREE.Mesh(mergedGeometry, material);
 scene.add(mesh);

threejs/lessons/ru/threejs-custom-geometry.md

@@ -141,11 +141,11 @@ geometry.faces[ 8].color = geometry.faces[ 9].color = new THREE.Color('blue');
 geometry.faces[10].color = geometry.faces[11].color = new THREE.Color('magenta');
 ```
 
-обратите внимание, что мы должны указать материал, который мы хотим использовать `FaceColors`
+обратите внимание, что мы должны указать материал, который мы хотим использовать `vertexColors`
 
 ```js
 -const material = new THREE.MeshBasicMaterial({color});
-+const material = new THREE.MeshBasicMaterial({vertexColors: THREE.FaceColors});
++const material = new THREE.MeshBasicMaterial({vertexColors: true});
 ```
 
 {{{example url="../threejs-custom-geometry-cube-face-colors.html" }}}
@@ -162,12 +162,6 @@ geometry.faces.forEach((face, ndx) => {
 });
 ```
 
-и мы должны сказать материалу использовать цвета вершин
-```js
--const material = new THREE.MeshBasicMaterial({vertexColors: THREE.FaceColors});
-+const material = new THREE.MeshBasicMaterial({vertexColors: THREE.VertexColors});
-```
-
 {{{example url="../threejs-custom-geometry-cube-vertex-colors.html" }}}
 
 Чтобы использовать освещение, нам нужны нормали. Нормали - это векторы, которые определяют направление. Так же, как цвета, мы можем указать нормаль для грани, установив свойство `normal` для каждой стороны с помощью
@@ -198,7 +192,7 @@ geometry.computeFaceNormals();
 
 Удаление цвета вершин и изменение материала обратно на `MeshPhongMaterial`
 ```js
--const material = new THREE.MeshBasicMaterial({vertexColors: THREE.VertexColors});
+-const material = new THREE.MeshBasicMaterial({vertexColors: true});
 +const material = new THREE.MeshPhongMaterial({color});
 ```
 

threejs/lessons/ru/threejs-optimize-lots-of-objects-animated.md

@@ -261,7 +261,7 @@ showFileInfo(fileInfos, fileInfos[0]);
 -  const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries(
 -      geometries, false);
 -  const material = new THREE.MeshBasicMaterial({
--    vertexColors: THREE.VertexColors,
+-    vertexColors: true,
 -  });
 -  const mesh = new THREE.Mesh(mergedGeometry, material);
 -  scene.add(mesh);
@@ -323,7 +323,7 @@ showFileInfo(fileInfos, fileInfos[0]);
 +  return attribute;
 +});
 +const material = new THREE.MeshBasicMaterial({
-+  vertexColors: THREE.VertexColors,
++  vertexColors: true,
 +  morphTargets: true,
 +});
 +const mesh = new THREE.Mesh(baseGeometry, material);
@@ -524,7 +524,7 @@ baseGeometry.morphAttributes.position = geometries.map((geometry, ndx) => {
 +  return {name, attribute};
 +});
 const material = new THREE.MeshBasicMaterial({
-  vertexColors: THREE.VertexColors,
+  vertexColors: true,
   morphTargets: true,
 });
 ```
@@ -581,7 +581,7 @@ void main() {
 
 ```js
 const material = new THREE.MeshBasicMaterial({
-  vertexColors: THREE.VertexColors,
+  vertexColors: true,
   morphTargets: true,
 });
 +const vertexShaderReplacements = [

threejs/lessons/ru/threejs-optimize-lots-of-objects.md

@@ -497,7 +497,7 @@ const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries(
     geometries, false);
 -const material = new THREE.MeshBasicMaterial({color:'red'});
 +const material = new THREE.MeshBasicMaterial({
-+  vertexColors: THREE.VertexColors,
++  vertexColors: true,
 +});
 const mesh = new THREE.Mesh(mergedGeometry, material);
 scene.add(mesh);

threejs/lessons/threejs-custom-geometry.md

@@ -179,17 +179,17 @@ geometry.faces[ 8].color = geometry.faces[ 9].color = new THREE.Color('blue');
 geometry.faces[10].color = geometry.faces[11].color = new THREE.Color('magenta');
 ```
 
-note we need to tell the material we want to use `FaceColors`
+note we need to tell the material we want to use vertex colors
 
 ```js
 -const material = new THREE.MeshBasicMaterial({color});
-+const material = new THREE.MeshBasicMaterial({vertexColors: THREE.FaceColors});
++const material = new THREE.MeshBasicMaterial({vertexColors: true});
 ```
 
 {{{example url="../threejs-custom-geometry-cube-face-colors.html" }}}
 
 We can instead set the color of each individual vertex by setting the `vertexColors`
-property to an array of the 3 colors for the 3 vertices.
+property of a `Face` to an array of the 3 colors for the 3 vertices.
 
 ```js
 geometry.faces.forEach((face, ndx) => {
@@ -201,13 +201,6 @@ geometry.faces.forEach((face, ndx) => {
 });
 ```
 
-and we need to tell the material to use vertex colors
-
-```js
--const material = new THREE.MeshBasicMaterial({vertexColors: THREE.FaceColors});
-+const material = new THREE.MeshBasicMaterial({vertexColors: THREE.VertexColors});
-```
-
 {{{example url="../threejs-custom-geometry-cube-vertex-colors.html" }}}
 
 To use lighting we need normals. Normals are vectors that specify direction.
@@ -241,7 +234,7 @@ geometry.computeFaceNormals();
 Removing the vertex color stuff and changing the material back to `MeshPhongMaterial`
 
 ```js
--const material = new THREE.MeshBasicMaterial({vertexColors: THREE.VertexColors});
+-const material = new THREE.MeshBasicMaterial({vertexColors: true});
 +const material = new THREE.MeshPhongMaterial({color});
 ```
 

threejs/lessons/threejs-optimize-lots-of-objects-animated.md

@@ -265,7 +265,7 @@ First let's change `addBoxes` to just make and return the merged geometry.
 -  const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries(
 -      geometries, false);
 -  const material = new THREE.MeshBasicMaterial({
--    vertexColors: THREE.VertexColors,
+-    vertexColors: true,
 -  });
 -  const mesh = new THREE.Mesh(mergedGeometry, material);
 -  scene.add(mesh);
@@ -331,7 +331,7 @@ and setup morphtargets
 +  return attribute;
 +});
 +const material = new THREE.MeshBasicMaterial({
-+  vertexColors: THREE.VertexColors,
++  vertexColors: true,
 +  morphTargets: true,
 +});
 +const mesh = new THREE.Mesh(baseGeometry, material);
@@ -537,7 +537,7 @@ baseGeometry.morphAttributes.position = geometries.map((geometry, ndx) => {
 +  return {name, attribute};
 +});
 const material = new THREE.MeshBasicMaterial({
-  vertexColors: THREE.VertexColors,
+  vertexColors: true,
   morphTargets: true,
 });
 ```
@@ -595,7 +595,7 @@ To do that we'll make a simple array of replacements and apply them in `Material
 
 ```js
 const material = new THREE.MeshBasicMaterial({
-  vertexColors: THREE.VertexColors,
+  vertexColors: true,
   morphTargets: true,
 });
 +const vertexShaderReplacements = [

threejs/lessons/threejs-optimize-lots-of-objects.md

@@ -509,7 +509,7 @@ const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries(
     geometries, false);
 -const material = new THREE.MeshBasicMaterial({color:'red'});
 +const material = new THREE.MeshBasicMaterial({
-+  vertexColors: THREE.VertexColors,
++  vertexColors: true,
 +});
 const mesh = new THREE.Mesh(mergedGeometry, material);
 scene.add(mesh);

threejs/threejs-custom-geometry-cube-face-colors.html

@@ -95,7 +95,7 @@ function main() {
   geometry.faces[10].color = geometry.faces[11].color = new THREE.Color('magenta');
 
   function makeInstance(geometry, color, x) {
-    const material = new THREE.MeshBasicMaterial({vertexColors: THREE.FaceColors});
+    const material = new THREE.MeshBasicMaterial({vertexColors: true});
 
     const cube = new THREE.Mesh(geometry, material);
     scene.add(cube);

threejs/threejs-custom-geometry-cube-vertex-colors.html

@@ -98,7 +98,7 @@ function main() {
   geometry.computeFaceNormals();
 
   function makeInstance(geometry, color, x) {
-    const material = new THREE.MeshBasicMaterial({vertexColors: THREE.VertexColors});
+    const material = new THREE.MeshBasicMaterial({vertexColors: true});
 
     const cube = new THREE.Mesh(geometry, material);
     scene.add(cube);

threejs/threejs-lots-of-objects-animated.html

@@ -218,7 +218,7 @@ function main() {
     const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries(
         geometries, false);
     const material = new THREE.MeshBasicMaterial({
-      vertexColors: THREE.VertexColors,
+      vertexColors: true,
       transparent: true,
       opacity: 0,
     });

threejs/threejs-lots-of-objects-merged-vertexcolors.html

@@ -164,7 +164,7 @@ function main() {
     const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries(
         geometries, false);
     const material = new THREE.MeshBasicMaterial({
-      vertexColors: THREE.VertexColors,
+      vertexColors: true,
     });
     const mesh = new THREE.Mesh(mergedGeometry, material);
     scene.add(mesh);

threejs/threejs-lots-of-objects-morphtargets-w-colors.html

@@ -316,7 +316,7 @@ function main() {
       return {name, attribute};
     });
     const material = new THREE.MeshBasicMaterial({
-      vertexColors: THREE.VertexColors,
+      vertexColors: true,
       morphTargets: true,
     });
     const vertexShaderReplacements = [

threejs/threejs-lots-of-objects-morphtargets.html

@@ -310,7 +310,7 @@ function main() {
       return attribute;
     });
     const material = new THREE.MeshBasicMaterial({
-      vertexColors: THREE.VertexColors,
+      vertexColors: true,
       morphTargets: true,
     });
     const mesh = new THREE.Mesh(baseGeometry, material);

threejs/threejs-lots-of-objects-multiple-data-sets.html

@@ -185,7 +185,7 @@ function main() {
     const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries(
         geometries, false);
     const material = new THREE.MeshBasicMaterial({
-      vertexColors: THREE.VertexColors,
+      vertexColors: true,
     });
     const mesh = new THREE.Mesh(mergedGeometry, material);
     scene.add(mesh);