3

three.js-使用leva调整参数

 1 year ago
source link: https://www.msy.plus/2022/01/02/three-use-leva-controls/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

three.js-使用leva调整参数

发表于2022-01-02更新于2023-05-04字数统计223阅读次数67阅读次数6
threejs-logo.png

学习使用levaController

useControls内的变量会被plot使用,其他变量变动时偶尔会更新整个组件，用的过程中要小心一点

const App: VFC = ()=> {
  const [datas] = useControls(() => ({
    hexColor: '#C23841',
    rgbaColor: {r: 61, g: 199, b: 190, a: 0.5},
    text: 'hogehoge',
    select: {options: ['hoo', 'bar', 'hoge', ['bar', 'hoge']]},
    check: true,
    button: button(() => alert('clicked !')),
    image: {image: undefined},
    number: {
      value: 4,
      min: 0,
      max: 10,
      step: 1,
    },
    interval: {
      min: 0,
      max: 10,
      value: [4, 5],
    },
    position: {x: 0, y: 0, z: 0},
    boxSize: {
      value: [10, 20],
    },
    folder: folder({
      x: 'red',
      y: true,
      z: 'hello',
    }),
    folder2: folder(
        {
          check2: true,
        },
        {collapsed: true, color: '#33c481'},
    ),
    // plugin
    curve: bezier(),
    var: 10,
    y1: plot({expression: 'cos(x * var)'}),
    y2: plot({expression: 'x * y1'}),
  }));

return (
    <pre>
      {JSON.stringify(datas, null, 4)}
    </pre>
  );
};

const div = createDOM();
ReactDOM.render(<App/>, document.body.appendChild(div));

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK