Cesium 自定义Material 系列 （五）

Posted 2023-04-12

参考技术A 对于水波纹效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数

export interface PMaterialWaterRipple

color?: any,

speed?: number,

count?: number,

gradient?: number



对于轨迹图片我们叫 MaterialWaterRipple

```javascript

import MaterialProperty from "./MaterialProperty";

const defaultOption: PMaterialWaterRipple =

color: Cesium.Color.AQUA,

speed: 1,//步长

count: 3,//波纹总数

gradient: 11//波纹的间须长度



//水波纹效果

export class MaterialWaterRipple extends MaterialProperty

public _getType(option: PMaterialWaterRipple)

// 由于参数需要动态变动，所以count有变动，认为是新着色器

return "MaterialWaterRipple" + option.count



constructor(option=defaultOption)

super(MaterialWaterRipple.prototype, defaultOption, option);



protected getSource(option: PMaterialWaterRipple): string

return `

czm_material czm_getMaterial(czm_materialInput materialInput)



czm_material material = czm_getDefaultMaterial(materialInput);

material.diffuse = 1.5 * color.rgb;

vec2 st = materialInput.st;

vec3 str = materialInput.str;

float dis = distance(st, vec2(0.5, 0.5));

float time = fract( czm_frameNumber * speed / 1000.0);

float per = fract(time);

if (abs(str.z) > 0.001)

discard;



if (dis > 0.5)

discard;

 更多参考 https://xiaozhuanlan.com/topic/9254867301

更改自定义主题 Material-UI

【中文标题】更改自定义主题 Material-UI

【英文标题】：Change custom theme Material-UI

【发布时间】：2019-02-06 02:56:52

【问题描述】：

我将Material-UI 用于 React 项目。但是，我不确定如何全局应用主题。

这里我尝试了单个组件

import  MuiThemeProvider, createMuiTheme  from '@material-ui/core/styles';
import CardCommon from '../../common/card/CardCommon';

import purple from '@material-ui/core/colors/purple';
import Button from '@material-ui/core/Button';

import  Link  from 'react-router-dom';
//const primary = red[500]; // #F44336
import  Paths  from '../../../Routes';

const theme = createMuiTheme(
    palette: 
        primary:  main: purple[500] , // Purple and green play nicely together.
        secondary:  main: '#11cb5f' , // This is just green.A700 as hex.
    ,
);

那么如何全局更改原色和副色？

【参考方案1】：

您可以像这样构建您的应用程序。将子组件包装在 MuiThemeProvider 中，并将 createMuiTheme 对象作为 theme 属性值传递给它。

还有typography: useNextVariants: true 修复以下错误：

(Warning: Material-UI: you are using the deprecated typography variants that will be removed in the next major release.)

Material UI 官方文档对此有更详细的信息：

MuiThemeProvider Color

如下编辑 index.js 文件

    import React from 'react';
    import ReactDOM from 'react-dom'; 
    import  MuiThemeProvider, createMuiTheme  from '@material-ui/core/styles';  
    import './index.css';
    import App from './App';

    const theme = createMuiTheme(
       palette: 
          primary: 
             light: '#fff',
             main: 'rgb(23, 105, 170)',
             dark: '#000'
          ,
          secondary: 
            main: '#f44336',
          ,
       ,
       typography:  
          useNextVariants: true
       
    );

    ReactDOM.render(
       <MuiThemeProvider theme =  theme >
          <App />
       </MuiThemeProvider>, 
       document.getElementById('root')
    );

【讨论】：

嘿阿拉兹！发布答案时，不要只发布代码。请解释一下，以便其他人理解。

【参考方案2】：

Material UI 版本 5 代码：

import  ThemeProvider, createTheme  from '@mui/material/styles';

const themeOptions = 
  palette: 
    type: 'light',
    primary: 
      main: '#3f51b5',
    ,
    secondary: 
      main: '#f50057',
    ,
  ,
;

const theme = createTheme(themeOptions);

<ThemeProvider theme=theme>
    <App />
</ThemeProvider>