<commit_before># Omi-Three

## Usage

```jsx
import { render, define, WeElement } from 'omi'
import '../../src/index.js'

define('my-app', class extends WeElement {

  cubeRotation = {
    x: 10,
    y: 10
  }

  installed() {
    setInterval(() => {
      this.cubeRotation.x += 0.01;
      this.cubeRotation.y += 0.01;
      this.ot.update()
    }, 16)
  }

  render() {
    return (
      <div>
        <h1>Omi-Three</h1>
        <omi-three
          ref={_ => this.ot = _}
          width={window.innerWidth}
          height={window.innerHeight} >
          <perspective-camera
            id="camera"
            fov="75"
            aspect=":aspect"
            near="0.1"
            far="1000"
            z="5">
          </perspective-camera>
          <group alpha={0.5} y={270}>
            <mesh rotation={this.cubeRotation} id="cube">
              <box-geometry
                width="1"
                height="1"
                depth="1">
              </box-geometry >
              <base-material
                color="0x00ff00">
              </base-material>
            </mesh>
          </group>
        </omi-three>
      </div>
    )
  }
})

render(<my-app />, 'body')
```

等同于:

```html
<html>
<commit_msg>docs: update readme<commit_after># Omi-Three

## Usage

```jsx
import { render, define, WeElement } from 'omi'
import '../../src/index.js'

define('my-app', class extends WeElement {

  cubeRotation = {
    x: 10,
    y: 10
  }

  installed() {
    setInterval(() => {
      this.cubeRotation.x += 0.01;
      this.cubeRotation.y += 0.01;
      this.ot.update()
    }, 16)
  }

  render() {
    return (
      <div>
        <h1>Omi-Three</h1>
        <omi-three
          ref={_ => this.ot = _}
          width={window.innerWidth}
          height={window.innerHeight} >
          <perspective-camera
            id="camera"
            fov="75"
            aspect=":aspect"
            near="0.1"
            far="1000"
            z="5">
          </perspective-camera>
          <group alpha={0.5} y={270}>
            <mesh rotation={this.cubeRotation} id="cube">
              <box-geometry
                width="1"
                height="1"
                depth="1">
              </box-geometry >
              <base-material
                color="0x00ff00">
              </base-material>
            </mesh>
          </group>
        </omi-three>
      </div>
    )
  }
})

render(<my-app />, 'body')
```

Same as:

```html
<html>

{'fraction_non_alphanumeric': 0.16411290322580646, 'fraction_numerical': 0.02903225806451613, 'mean_word_length': 1.3628571428571428, 'pattern_counts': {'":': 2, '<': 39, '<?xml version=': 0, '>': 43, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4983906', 'n_tokens_mistral': 864, 'n_tokens_neox': 807, 'n_words': 141}