123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107 |
- import * as React from "react";
- import { Observable } from "babylonjs/Misc/observable";
- import { StandardMaterial } from "babylonjs/Materials/standardMaterial";
- import { PropertyChangedEvent } from "../../../../propertyChangedEvent";
- import { LineContainerComponent } from "../../../lineContainerComponent";
- import { Color3LineComponent } from "../../../lines/color3LineComponent";
- import { SliderLineComponent } from "../../../lines/sliderLineComponent";
- import { CommonMaterialPropertyGridComponent } from "./commonMaterialPropertyGridComponent";
- import { TextureLinkLineComponent } from "../../../lines/textureLinkLineComponent";
- import { LockObject } from "../lockObject";
- import { GlobalState } from '../../../../globalState';
- import { CheckBoxLineComponent } from '../../../lines/checkBoxLineComponent';
- interface IStandardMaterialPropertyGridComponentProps {
- globalState: GlobalState;
- material: StandardMaterial;
- lockObject: LockObject;
- onSelectionChangedObservable?: Observable<any>;
- onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
- }
- export class StandardMaterialPropertyGridComponent extends React.Component<IStandardMaterialPropertyGridComponentProps> {
- private _onDebugSelectionChangeObservable = new Observable<TextureLinkLineComponent>();
- constructor(props: IStandardMaterialPropertyGridComponentProps) {
- super(props);
- }
- renderTextures() {
- const material = this.props.material;
- const onDebugSelectionChangeObservable = this._onDebugSelectionChangeObservable;
- return (
- <LineContainerComponent globalState={this.props.globalState} title="TEXTURES">
- <TextureLinkLineComponent label="Diffuse" texture={material.diffuseTexture} propertyName="diffuseTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
- <TextureLinkLineComponent label="Specular" texture={material.specularTexture} propertyName="specularTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
- <TextureLinkLineComponent label="Reflection" texture={material.reflectionTexture} propertyName="reflectionTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
- <TextureLinkLineComponent label="Refraction" texture={material.refractionTexture} propertyName="refractionTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
- <TextureLinkLineComponent label="Emissive" texture={material.emissiveTexture} propertyName="emissiveTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
- <TextureLinkLineComponent label="Bump" texture={material.bumpTexture} propertyName="bumpTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
- <TextureLinkLineComponent label="Opacity" texture={material.opacityTexture} propertyName="opacityTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
- <TextureLinkLineComponent label="Ambient" texture={material.ambientTexture} propertyName="ambientTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
- <TextureLinkLineComponent label="Lightmap" texture={material.lightmapTexture} propertyName="lightmapTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
- <CheckBoxLineComponent label="Use lightmap as shadowmap" target={material} propertyName="useLightmapAsShadowmap " onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
- </LineContainerComponent>
- );
- }
- render() {
- const material = this.props.material;
- return (
- <div className="pane">
- <CommonMaterialPropertyGridComponent globalState={this.props.globalState} lockObject={this.props.lockObject} material={material} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
- {this.renderTextures()}
- <LineContainerComponent globalState={this.props.globalState} title="LIGHTING & COLORS">
- <Color3LineComponent label="Diffuse" target={material} propertyName="diffuseColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
- <Color3LineComponent label="Specular" target={material} propertyName="specularColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
- <SliderLineComponent label="Specular power" target={material} propertyName="specularPower" minimum={0} maximum={128} step={0.1} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
- <Color3LineComponent label="Emissive" target={material} propertyName="emissiveColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
- <Color3LineComponent label="Ambient" target={material} propertyName="ambientColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
- </LineContainerComponent>
- <LineContainerComponent globalState={this.props.globalState} title="LEVELS" closed={true}>
- {
- material.diffuseTexture &&
- <SliderLineComponent label="Diffuse level" target={material.diffuseTexture} propertyName="level" minimum={0} maximum={2} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
- }
- {
- material.specularTexture &&
- <SliderLineComponent label="Specular level" target={material.specularTexture} propertyName="level" minimum={0} maximum={2} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
- }
- {
- material.reflectionTexture &&
- <SliderLineComponent label="Reflection level" target={material.reflectionTexture} propertyName="level" minimum={0} maximum={2} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
- }
- {
- material.refractionTexture &&
- <SliderLineComponent label="Refraction level" target={material.refractionTexture} propertyName="level" minimum={0} maximum={2} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
- }
- {
- material.emissiveTexture &&
- <SliderLineComponent label="Emissive level" target={material.emissiveTexture} propertyName="level" minimum={0} maximum={2} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
- }
- {
- material.bumpTexture &&
- <SliderLineComponent label="Bump level" target={material.bumpTexture} propertyName="level" minimum={0} maximum={2} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
- }
- {
- material.opacityTexture &&
- <SliderLineComponent label="Opacity level" target={material.opacityTexture} propertyName="level" minimum={0} maximum={2} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
- }
- {
- material.ambientTexture &&
- <SliderLineComponent label="Ambient level" target={material.ambientTexture} propertyName="level" minimum={0} maximum={2} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
- }
- {
- material.lightmapTexture &&
- <SliderLineComponent label="Lightmap level" target={material.lightmapTexture} propertyName="level" minimum={0} maximum={2} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
- }
- </LineContainerComponent>
- </div>
- );
- }
- }
|