DatGUIModule: add material properties

[sasha240100]

Implementation

There is a materials.js configuration file that explains dat.gui which properties should be editable.

Properties should be taken from three.js documentation for material objects.

propertyName: 'propertyType'

• propertyName should be the same as in three.js docs.
• propertyType can be:
  • number
  • color
  • texture (for maps)
  • boolean

In priority

• colors
• numbers (usually intensity)
• wireframe

Properties that can be used in multiple materials

Should be added to additional object and separated regarding their meaning (like wireframe):

Properties used in all materials

Should be added to any object.

Do as many properties as you can.

Progress

• [x] MeshBasicMaterial
• [ ] MeshDepthMaterial
• [ ] MeshLambertMaterial (in progress)
  • [x] emissive, reflection, refraction, light
  • [x] color
  • [ ] other
• [ ] MeshNormalMaterial
• [ ] MeshPhongMaterial (in progress)
  • [x] displacement, emissive
  • [x] color
  • [ ] other
• [ ] MeshPhysicalMaterial
• [ ] MeshStandardMaterial
• [ ] MeshToonMaterial
• [ ] MultiMaterial

---

add(originObject, ...extensions)

• Adds properties from additional object.
• extensions are names of properties groups inside additional. Example: add({} , 'example') will add properties from additional.example to {}.

Version:

• [x] v2.x.x
• [ ] v1.x.x

Issue type:

• [ ] Bug
• [x] Proposal/Enhancement
• [ ] Question

---

Tested on:

###### Desktop - [ ] Chrome - [ ] Chrome Canary - [ ] Chrome dev-channel - [ ] Firefox - [ ] Opera - [ ] Microsoft IE - [ ] Microsoft Edge ###### Android - [ ] Chrome - [ ] Firefox - [ ] Opera ###### IOS - [ ] Chrome - [ ] Firefox - [ ] Opera

[taro-0]

@sasha240100 could you clarify the explanation of this one?

[sasha240100]

@t4r0 yes, ask me what you misunderstood. Can you go to discord?

[hirako2000]

I think we got to fix the problem with the gui data before adding more properties.

• Load the example
• Change material to Lambert (or phong..)
• Change the color (either color or emissive)
• Change color a few times, you will see at some point it doesnt have any effect.
• if not reload the page and try again.