🍜 🎮 miso-aframe

This repository serves as an example integration between aframe.io and miso.

-----------------------------------------------------------------------------
{-# LANGUAGE CPP               #-}
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE OverloadedLabels  #-}
-----------------------------------------------------------------------------
module Main where
-----------------------------------------------------------------------------
import Miso
import Miso.String (MisoString)
-----------------------------------------------------------------------------
#ifdef WASM
foreign export javascript "hs_start" main :: IO ()
#endif
-----------------------------------------------------------------------------
main :: IO ()
main = run (startApp app)
-----------------------------------------------------------------------------
app :: App () ()
app = (component () noop view_)
  { events = pointerEvents
#ifndef WASM
  , scripts = [ Src "https://aframe.io/releases/1.7.0/aframe.min.js" ]
#endif
  }
-----------------------------------------------------------------------------
view_ :: () -> View () ()
view_ () =
  ascene_ []
    [ abox_
      [ position_ "-1 0.5 -3"
      , rotation_ "0 45 0"
      , color_ #4CC3D9
      ]
      []
    , asphere_
      [ position_ "0 1.25 -5"
      , radius_ 1.25
      , color_ #EF2D5E
      ]
      []
    , acylinder_
      [ position_ "1 0.75 -3"
      , radius_ 0.5
      , height_ "1.5"
      , color_ #FFC65D
      ]
      []
    , aplane_
      [ position_ "0 0 -4"
      , rotation_ "-90 0 0"
      , width_ "4"
      , height_ "4"
      , color_ #7BC8A4
      ]
      []
    , asky_
      [ color_ #ECECEC
      ]
      []
    ]
-----------------------------------------------------------------------------

Coverage

Ideally the entire AFrame.io API can be covered. Low-hanging fruit here.

• a-box
• a-camera
• a-circle
• a-cone
• a-cubemap
• a-cursor
• a-curvedimage
• a-cylinder
• a-dodecahedron
• a-gltf-model
• a-icosahedron
• a-image
• a-light
• a-link
• a-obj-model
• a-octahedron
• a-plane
• a-ring
• a-sky
• a-sound
• a-sphere
• a-tetrahedron
• a-text
• a-torus-knot
• a-torus
• a-triangle
• a-video
• a-videosphere

Development

Call nix develop to enter a shell with GHC 9.12.2

$ nix develop

Once in the shell, you can call cabal run to start the development server and view the application at http://localhost:8080

Build (Web Assembly)

$ nix develop .#wasm --command bash -c "make"

Build (JavaScript)

$ nix develop .#ghcjs --command bash -c "build"

Serve

To host the built application you can call serve

$ nix develop .#wasm --command bash -c "serve"

Clean

$ nix develop .#wasm --command bash -c "make clean"

This comes with a GitHub action that builds and auto hosts the example.