standardMaterialPropertyGridComponent.tsx 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. import * as React from "react";
  2. import { Observable } from "babylonjs/Misc/observable";
  3. import { StandardMaterial } from "babylonjs/Materials/standardMaterial";
  4. import { PropertyChangedEvent } from "../../../../propertyChangedEvent";
  5. import { LineContainerComponent } from "../../../lineContainerComponent";
  6. import { Color3LineComponent } from "../../../lines/color3LineComponent";
  7. import { SliderLineComponent } from "../../../lines/sliderLineComponent";
  8. import { CommonMaterialPropertyGridComponent } from "./commonMaterialPropertyGridComponent";
  9. import { TextureLinkLineComponent } from "../../../lines/textureLinkLineComponent";
  10. import { LockObject } from "../lockObject";
  11. import { GlobalState } from '../../../../globalState';
  12. import { CheckBoxLineComponent } from '../../../lines/checkBoxLineComponent';
  13. interface IStandardMaterialPropertyGridComponentProps {
  14. globalState: GlobalState;
  15. material: StandardMaterial;
  16. lockObject: LockObject;
  17. onSelectionChangedObservable?: Observable<any>;
  18. onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
  19. }
  20. export class StandardMaterialPropertyGridComponent extends React.Component<IStandardMaterialPropertyGridComponentProps> {
  21. private _onDebugSelectionChangeObservable = new Observable<TextureLinkLineComponent>();
  22. constructor(props: IStandardMaterialPropertyGridComponentProps) {
  23. super(props);
  24. }
  25. renderTextures() {
  26. const material = this.props.material;
  27. const onDebugSelectionChangeObservable = this._onDebugSelectionChangeObservable;
  28. return (
  29. <LineContainerComponent globalState={this.props.globalState} title="TEXTURES">
  30. <TextureLinkLineComponent label="Diffuse" texture={material.diffuseTexture} propertyName="diffuseTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
  31. <TextureLinkLineComponent label="Specular" texture={material.specularTexture} propertyName="specularTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
  32. <TextureLinkLineComponent label="Reflection" texture={material.reflectionTexture} propertyName="reflectionTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
  33. <TextureLinkLineComponent label="Refraction" texture={material.refractionTexture} propertyName="refractionTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
  34. <TextureLinkLineComponent label="Emissive" texture={material.emissiveTexture} propertyName="emissiveTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
  35. <TextureLinkLineComponent label="Bump" texture={material.bumpTexture} propertyName="bumpTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
  36. <TextureLinkLineComponent label="Opacity" texture={material.opacityTexture} propertyName="opacityTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
  37. <TextureLinkLineComponent label="Ambient" texture={material.ambientTexture} propertyName="ambientTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
  38. <TextureLinkLineComponent label="Lightmap" texture={material.lightmapTexture} propertyName="lightmapTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
  39. <CheckBoxLineComponent label="Use lightmap as shadowmap" target={material} propertyName="useLightmapAsShadowmap " onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  40. </LineContainerComponent>
  41. );
  42. }
  43. render() {
  44. const material = this.props.material;
  45. return (
  46. <div className="pane">
  47. <CommonMaterialPropertyGridComponent globalState={this.props.globalState} lockObject={this.props.lockObject} material={material} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  48. {this.renderTextures()}
  49. <LineContainerComponent globalState={this.props.globalState} title="LIGHTING & COLORS">
  50. <Color3LineComponent label="Diffuse" target={material} propertyName="diffuseColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  51. <Color3LineComponent label="Specular" target={material} propertyName="specularColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  52. <SliderLineComponent label="Specular power" target={material} propertyName="specularPower" minimum={0} maximum={128} step={0.1} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  53. <Color3LineComponent label="Emissive" target={material} propertyName="emissiveColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  54. <Color3LineComponent label="Ambient" target={material} propertyName="ambientColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  55. </LineContainerComponent>
  56. <LineContainerComponent globalState={this.props.globalState} title="LEVELS" closed={true}>
  57. {
  58. material.diffuseTexture &&
  59. <SliderLineComponent label="Diffuse level" target={material.diffuseTexture} propertyName="level" minimum={0} maximum={2} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  60. }
  61. {
  62. material.specularTexture &&
  63. <SliderLineComponent label="Specular level" target={material.specularTexture} propertyName="level" minimum={0} maximum={2} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  64. }
  65. {
  66. material.reflectionTexture &&
  67. <SliderLineComponent label="Reflection level" target={material.reflectionTexture} propertyName="level" minimum={0} maximum={2} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  68. }
  69. {
  70. material.refractionTexture &&
  71. <SliderLineComponent label="Refraction level" target={material.refractionTexture} propertyName="level" minimum={0} maximum={2} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  72. }
  73. {
  74. material.emissiveTexture &&
  75. <SliderLineComponent label="Emissive level" target={material.emissiveTexture} propertyName="level" minimum={0} maximum={2} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  76. }
  77. {
  78. material.bumpTexture &&
  79. <SliderLineComponent label="Bump level" target={material.bumpTexture} propertyName="level" minimum={0} maximum={2} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  80. }
  81. {
  82. material.opacityTexture &&
  83. <SliderLineComponent label="Opacity level" target={material.opacityTexture} propertyName="level" minimum={0} maximum={2} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  84. }
  85. {
  86. material.ambientTexture &&
  87. <SliderLineComponent label="Ambient level" target={material.ambientTexture} propertyName="level" minimum={0} maximum={2} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  88. }
  89. {
  90. material.lightmapTexture &&
  91. <SliderLineComponent label="Lightmap level" target={material.lightmapTexture} propertyName="level" minimum={0} maximum={2} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  92. }
  93. </LineContainerComponent>
  94. </div>
  95. );
  96. }
  97. }