three.js-使用leva调整参数

发表于2022-01-02更新于2022-06-29字数统计223阅读次数阅读次数

学习使用levaController

简述

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

源码

jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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));