📜JavaScript developer.
🐲RPG fan.
📚Storyteller and 🕹game developer.
👨Father and Husband.
Published
Edited
Aug 15, 2021
Three = require("three")
RTF = import('https://cdn.skypack.dev/@react-three/fiber@7.0.6?min')
import { React, jsx } from '@mbostock/hello-jsx'
function Box(props){
// This reference will give us direct access to the THREE.Mesh object
const mesh = React.useRef();
// Set up state for the hovered and active state
const [hovered, setHover] = React.useState(false);
const [active, setActive] = React.useState(false);
// Subscribe this component to the render-loop, rotate the mesh every frame
React.useFrame((state, delta) => (mesh.current.rotation.x += 0.01));
// Return the view, these are regular Threejs elements expressed in JSX
return (
jsx`<mesh
{...props}
ref={mesh}
scale={active ? 1.5 : 1}
onClick={(event) => setActive(!active)}
onPointerOver={(event) => setHover(true)}
onPointerOut={(event) => setHover(false)}>
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
</mesh>`
)
}
Canvas = RTF.Canvas
Try one using included React
{
React.render(jsx({Canvas, Box})`
<Canvas>
<ambientLight />
<pointLight position={[10, 10, 10]} />
<Box position={[-1.2, 0, 0]} />
<Box position={[1.2, 0, 0]} />
</Canvas>
`)
}
{
RTF.render(jsx({Canvas, Box})`
<Canvas>
<ambientLight />
<pointLight position={[10, 10, 10]} />
<Box position={[-1.2, 0, 0]} />
<Box position={[1.2, 0, 0]} />
</Canvas>
`)
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
