The avatar for @pkg
pkg
Public
Edited
Jun 25, 2024
1 star
Insert cell
# @pkg/react-three - React Three Fiber & Useful helpers

```js
import { fiber, drei, Canvas, PerspectiveCamera, Box} from "@pkg/react-three"
```

- https://docs.pmnd.rs/react-three-fiber/getting-started/introduction
- https://github.com/pmndrs/drei
- https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene

Insert cell
Insert cell
fiber = npm("@react-three/fiber@8.16.2")
Insert cell
Canvas = fiber.Canvas
Insert cell
useFrame = fiber.useFrame
Insert cell
useThree = fiber.useThree
Insert cell
useLoader = fiber.useLoader
Insert cell
useGraph = fiber.useGraph
Insert cell
useStore = fiber.useStore
Insert cell
useInstanceHandle = fiber.useInstanceHandle
Insert cell
Insert cell
drei = npm("@react-three/drei@9.105.0")
Insert cell
Insert cell
PerspectiveCamera = drei.PerspectiveCamera
Insert cell
OrthographicCamera = drei.OrthographicCamera
Insert cell
CubeCamera = drei.CubeCamera
Insert cell
Insert cell
CameraControls = drei.CameraControls
Insert cell
FlyControls = drei.FlyControls
Insert cell
// Image = drei.Image
Insert cell
Insert cell
Example = drei.Example
Insert cell
Html = drei.Html
Insert cell
CycleRaycast = drei.CycleRaycast
Insert cell
Select = drei.Select
Insert cell
SpriteAnimator = drei.SpriteAnimator
Insert cell
Stats = drei.Stats
Insert cell
useCamera = drei.useCamera
Insert cell
useAspect = drei.useAspect

Insert cell
useCursor = drei.useCursor
Insert cell
useTrail = drei.useTrail
Insert cell
Insert cell
useProgress = drei.useProgress
Insert cell
useGLTF = drei.useGLTF
Insert cell
useFBX = drei.useFBX
Insert cell
useTexture = drei.useTexture
Insert cell
useKTX2 = drei.useKTX2
Insert cell
useCubeTexture = drei.useCubeTexture
Insert cell
useVideoTexture = drei.useVideoTexture
Insert cell
useTrailTexture = drei.useTrailTexture
Insert cell
useFont = drei.useFont
Insert cell
useSpriteLoader = drei.useSpriteLoader
Insert cell
### Shapes
Insert cell
Plane = drei.Plane
Insert cell
Box = drei.Box
Insert cell
Sphere = drei.Sphere
Insert cell
Circle = drei.Circle
Insert cell
Cone = drei.Cone
Insert cell
Insert cell
Center = drei.Center
Insert cell
Resize = drei.Resize
Insert cell
BBAnchor = drei.BBAnchor
Insert cell
Bounds = drei.Bounds
Insert cell
CameraShake = drei.CameraShake
Insert cell
Float = drei.Float
Insert cell
Stage = drei.Stage
Insert cell
Backdrop = drei.Backdrop
Insert cell
Environment = drei.Environment
Insert cell
Lightformer = drei.Lightformer
Insert cell
SpotLight = drei.SpotLight
Insert cell
SpotLightShadow = drei.SpotLightShadow
Insert cell
Shadow = drei.Shadow
Insert cell
Caustics = drei.Caustics
Insert cell
ContactShadows = drei.ContactShadows
Insert cell
RandomizedLight = drei.RandomizedLight
Insert cell
AccumulativeShadows = drei.AccumulativeShadows
Insert cell
Sky = drei.Sky
Insert cell
Stars = drei.Stars
Insert cell
Sparkles = drei.Sparkles
Insert cell
Cloud = drei.Cloud
Insert cell
useEnvironment = drei.useEnvironment
Insert cell
useMatcapTexture = drei.useMatcapTexture
Insert cell
useNormalTexture = drei.useNormalTexture
Insert cell
ShadowAlpha = drei.ShadowAlpha
Insert cell
Insert cell
MMDLoader = (await npm("three@0.163.0/addons/loaders/MMDLoader")).MMDLoader
Insert cell
FontLoader = (await npm("three@0.163.0/addons/loaders/FontLoader.js")).FontLoader
Insert cell
TextGeometry = (await npm("three@0.163.0/addons/geometries/TextGeometry.js"))
.TextGeometry
Insert cell
## Fonts
Insert cell
helvetikerRegularFont = {
const res = await fetch(
"https://cdn.jsdelivr.net/npm/three@0.163.0/examples/fonts/helvetiker_regular.typeface.json"
);
return res.json();
}
Insert cell
optimerBoldFont = {
const res = await fetch(
"https://cdn.jsdelivr.net/npm/three@0.163.0/examples/fonts/optimer_bold.typeface.json"
);
return res.json();
}
Insert cell
Insert cell
React = npm("react@18.2.0")
Insert cell
ReactDOM = npm("react-dom@18.2.0")
Insert cell
h = React.createElement
Insert cell
createRoot = ReactDOM.createRoot
Insert cell
Insert cell
three = npm("three@0.163.0")
Insert cell
importThree = (path) => npm(`three@0.163.0/${path}`)
Insert cell
import { npm } from "@pkg/npm"
Insert cell

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.
Learn more