Namely, Pickled Meatballs


    1.0.5 • Public • Published

    Standard View



    $ npm install @standard/view

    Place Views into your React App. For example:

    import { View3D, Box } from '@standard/view';
      <Box position={[1, 0, 0]} color="green" />
      <Box position={[-1, 0, 0]} color="red" />

    For details about valid properties, look at the interfaces named *Props, where * is the component name, in src/primitves/ and src/groups/.


    yarn storybook to see stories of each component in standard-view. You may also visit Standard View Storybook served with netlify.


    create-react-app to Standard View Project

    Fit to Window

    Set .App canvas in css file to adjust Standard View View3D canvas.


    For VSCode, press ctrl + space to force load intellisense at cursor location.

    Standard View Components


    • Mesh
    • Box
    • Camera
    • Circle
    • Cylinder
    • Plane
    • Polygon
    • Quad
    • Sphere
    • Triangle


    • Group
    • Arrow
    • Axis
    • Capsule
    • GLTF
    • OBJ
    • PCD


    • Line
    • BoundingBox (Group)


    • Text (Mesh)
    • Label (Mesh)


    • AmbientLight
    • DirectionalLight
    • HemisphereLight
    • PointLight
    • SpotLight


    • View3D


    All Standard View primitives are composed within Mesh, with the exception of Line, BoundingBox, Text, and Group. Therefore, properties of Mesh are common to nearly alll components. Here is a list of explicitly managed Mesh properties in Standard View:

    Mesh Properties

    • position: Array<number>
    • scale: Array<number>
    • rotation: Array<number>
    • quaternion: Array<number>

    Material Properties

    • color: string
    • hoverColor: string
    • opacity: number
    • texturePath: string
    • textureURL: string
    • material: THREE.Material

    Geometry Properties

    • wireframe: boolean
    • side: number
    • geometry: THREE.Geometry

    Animation Properties

    • animation: Function
    • state: Object

    Event Properties

    • onClick: Function
    • onDoubleClick: Function
    • onWheel: Function
    • onPointerUp: Function
    • onPointerDown: Function
    • onPointerOver: Function
    • onPointerOut: Function
    • onPointerMove: Function

    Mesh can also support animations via the animation property. A function with one argument that may be destructured to include state, setState, mesh, and any Canvas properties desired for the animation. All primitives and shapes may have animation. These animations are reactive, so they incur many render calls, but also maintain react-three-renderer's native raycasting for the event property functions.

    Mesh also exposes react-three-fiber's the event property functions but with a constrained argument set, similar to animation. All event property functions take one arguement that may be destructured to include mesh, state, setState, and any Canvas prop. The benefit of this design, just like animations, is that a reference to mesh is automatically provided. Moreover, react-three-fiber's Canvas state properties are exposed. This allows event functions to reach right into the react-three-fiber/three.js's scene, camera, gl, etc. Hence all shapes that are Meshs may have these event property functions.

    Of course, Mesh can accept properties handled by react-three-fiber/three.js as well. After explicitly managing these properties, remaining properties are passed to react-three-fiber's mesh. (Mesh is a wrapper of react-three-fiber's mesh, which is a wrapper of THREE.Mesh.)


    Here is a list of explicitly managed View3D properties in Standard View:

    WebGLRenderer Properties

    • background: string

    Camera Control Properties

    • trackballControls: boolean
    • orbitControls: boolean
    • mapControls: boolean

    Of course, View3D can accept Canvas properties handled by react-three-fiber as well. The Standard View properties are handled and stripped away before passing the properties to Canvas. (View3D is a wrapper of react-three-fiber's Canvas.)


    Text in Standard View is composed within a Mesh. So Text may accept all the same properties as a Mesh. Text also should have a text property with the desired string to be displayed and also a font or fontName. fonts are typeface.json fonts and must be a THREE.Font. The default three.js fonts are also included in Standard View, so simply passing fontName with one of those fonts will work.


    • helvetiker
    • helvetikerBold
    • optimer
    • optimerBold
    • gentilis
    • gentilisBold

    In general Text will be much more computation expensive to render compared to Label which is just a Plane with a texture of the desired text.


    Checkout react-three-fiber's page for more details.


    npm i @standard/view

    DownloadsWeekly Downloads






    Unpacked Size

    3.45 MB

    Total Files


    Last publish


    • kentahara
    • franciscop-sc
    • standardcognition
    • mike-sc
    • alex-scott-sc
    • loganweir
    • chongr