![https://tsei.jp/rmol ](
https://tsei.jp/rmol)

---

![build-✔](
https://github.com/tseijp/react-mol)
![types-✔-](
https://github.com/tseijp/react-mol)
![demos-✔](
https://github.com/tseijp/react-mol)
![license-MIT](
https://github.com/tseijp/react-mol)
![npm-package](
https://www.npmjs.com/package/react-mol)
![tweet](
https://twitter.com/intent/tweet?url=https://tsei.jp/rmol/&text=🍡A+molecular+chemistry+based+simulation+library)

__Installation__
- npm i three @react-three/fiber react-mol

__Quick started__
- git clone https://github.com/tseijp/react-mol
- cd react-mol
- npm i
- npm start
- open browser and visit localhost:3000
- Now you can go to our demo, and try its usage.

---

Recipes

Atom Mol Flow Tile Spring

Mol Methyl alcohol Polyethylene Acetil Acid

Flow Points Boxes Spheres Dodecas

Tile Basic

Spring Pieces Bounds Pipes

$3

🍡 is a molecular chemistry based simulation component that covers most cases of organic molecule simulation. (More Recipes) View Code ``tsx import React from 'react' import { Atom } from 'react-mol' export const Mol = React.forwardRef((props, ref) => { const {index: i, angle: a, double:d} = props const state = React.useMemo(() => { const position = calcMolPos(i, a, d) const rotation = eulerVec3(position, [0,1,0]) return {position, rotation} }, [i, a, d]) const children = React.useMemo(() => React.Children.map(props.children, (child, index) => React.cloneElement(child, {index}) ), [props.children]) return {...state} children={children}/> }) `


🍭 (More Recipes) View Code `tsx import React from 'react' import { Atom } from 'react-mol' import { useFrame } from "" export const Flow = React.forwardRef((props, forwardRef) => { const now = React.useRef(0) const ref = React.useRef(null) const fun = (value) => typeof value==="function" useFrame((_, delta) => { if (!ref.current) return now.current += delta const { position: p, scale: s, args: a, rotation: r, color: c } = props const args = fun(a) ? a(now.current,...ref.current.position.toArray()) : [ now.current,...(a || []) ] p && ref.current.position.set(...(fun(p)? p(...args): p)) r && ref.current.rotation.set(...(fun(r)? r(...args): r)) s && ref.current.scale.set(...(fun(s)? s(...args): s)) c && ref.current.color.set(fun(c)? c(...args): c) }) return }) `



___What does it look like?___

🪐 (live demo).

src="" />

`tsx
import React from 'react'
import ReactDOM from 'react-dom'
import { Atom } from 'react-mol'
import { Canvas, useFrame } from ''

function Basic () {
// This reference will give us direct access to the last instance
const ref = React.useRef(null)

// Rotate instance every frame, this is outside of React without overhead
useFrame(() => {
ref.current.rotation.x =
ref.current.rotation.y =
ref.current.rotation.z += 0.025
})

return (

















)
}

ReactDOM.render(




,
document.getElementById('root')
)
`




Show Recursion Example

`tsx
import React from 'react'
import ReactDOM from 'react-dom'
import { Atom } from 'react-mol'
import { Canvas, useFrame } from ''

function Basic () {
// This reference will give us direct access to the last instance
const ref = React.useRef(null)

// Rotate instance every frame, this is outside of React without overhead
useFrame(() => {
ref.current.rotation.x =
ref.current.rotation.y =
ref.current.rotation.z += 0.025
})

return (





{[...Array(5)].map((_, i) =>

)}



)
}

ReactDOM.render(




,
document.getElementById('root')
)
`



---

$3

			
###### Methyl alcohol  	`tsx `	`tsx `	
###### Acetil acid  	`tsx `	`tsx `	
###### Poly ethylene  	`tsx {next => {next||} } `	`tsx {Array(200) .fill(0) .map((_,i) => )} `	

---

$3

		
###### Points	`tsx {[...Array(2500)].map((_,i) => args={(t,x,_,z) => [ sin((x+t)/3)+sin((z+t)/2)]} position={r => [i%c,r,i/c%c]} scale={r => [r/3,r/3,r/3]} /> )} `	
###### Boxes	`tsx {[...Array(1000)].map((_,i) => args={(t,x,y,z) => [ sin(x/4+t)+sin(y/4+t)+sin(z/4+t) ]} position={[i%10-5,i/10%10-5,i/100-5]} rotation={r => [0,r2,r3]} scale={r => [r/4,r/4,r/4]}/> )} `	
###### Spheres	`tsx {[...Array(1000)].map((_, i) => args={[...Array(4)].map(() => rand())} position={(t,s,x,y,z) => [ x40-20 + cos(ts6) + sin(ts*2), y40-20 + sin(ts4) + cos(ts*4), z40-20 + cos(ts2) + sin(ts*6),]} scale={(t,s) => Array(3).fill( max(.3, cos((t+s10)s))*s)}/> )} `	
###### Dodecas	`tsx {[...Array(1000)].map((_,i) => args={[...Array(4)].map(() => rand())} position={(t,s,x,y,z) => [ ((x-.5)-cos(ts+x)-sin(ts/1))x100, ((y-.5)-sin(ts+y)-cos(ts/3))y100, ((z-.5)-cos(ts+z)-sin(ts/5))z100,]} rotation={(t,s)=>Array(3).fill(cos(t*s))} scale={(t,s)=>Array(3).fill(cos(t*s))}/> )} `	

---

$3

	
###### Pieces	
###### Bounds	
###### Pipes	

$3




---

$3

__TODO__

###### Koch Curve `tsx `

###### Meandering Snake `tsx LR={[90,90]}> `

###### Urban Charting `tsx LR={[90,90]}> ``