Threestrap

[ChristopherChudzicki]

Related to discussions in #24, unconed/mathbox#57 (comment)

This adds some new exports, available from mathbox-react/three. Right now the only export there is a Renderer component which allows setting clearColor:

import React from "react"
import { ContainedMathbox, Axis, Grid, Cartesian } from "mathbox-react"
import { Renderer } from "mathbox-react/threestrap"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"

const SimpleExample: React.FC = () => (
  <ContainedMathbox
    options={{
      plugins: ["core", "controls", "cursor"],
      controls: { klass: OrbitControls },
    }}
    containerStyle={{ height: "100vh" }}
  >
    <Renderer clearColor="aquamarine" /> {/*        <---------- New           */}
    <Cartesian>
      <Axis axis="x" color="orange" />
      <Axis axis="y" color="blue" />
      <Axis axis="z" color="green" />
      <Grid axes="xz" />
    </Cartesian>
  </ContainedMathbox>
)

export default SimpleExample

Some comments:

• Exported from mathbox-react/threestrap since, unlike almost all¹ other mathbox-react component exports, these don't correspond to a mathbox node.
• Renderer is just an example, and it probably should have some more props. Other similar components might be OrbitControls, or other controls-components.

Footnotes

1. I say "almost all" because of the ContainedMathbox and Mathbox components, which don't quite as neatly correspond to a mathbox node. ↩

[ChristopherChudzicki]

@sritchie This is published on npm as mathbox-react@v0.2.0-rc1. It also exports useMathbox as discussed in #239

Besides clearColor, what else are you interested in setting via components like this? Camera stuff, but that can be set on the mathbox camera component (which has the advantage of using mathbox's coordinate system).

[sritchie]

The few I have after scanning all of the examples are background color and alpha, and also properties on the controls instance. Will send more when I'm at the computer but those are the main ones.

Feels like this might be a nice pattern for any of the threestrap plug-in properties.