A complete rewrite with guide-basic-scene and a step-by-step demo

fizruk · Dec 1, 2017 · 91701cb · 91701cb
1 parent bdcae77
commit 91701cb
Show file tree

Hide file tree

Showing 28 changed files with 1,070 additions and 343 deletions.
diff --git a/examples/guide-basic-scene/Main.hs b/examples/guide-basic-scene/Main.hs
@@ -0,0 +1,245 @@
+{-# LANGUAGE DeriveGeneric #-}
+{-# LANGUAGE DeriveAnyClass #-}
+module Main where
+
+import Data.Aeson
+import GHC.Generics
+import GHCJS.Marshal
+import Miso.String
+
+import Miso.AFrame
+import Miso.AFrame.Core
+
+-- ==========================================================
+-- Step 1. Empty scene
+-- ==========================================================
+
+step1 :: IO ()
+step1 = startHtmlOnlyApp $
+  scene [] []
+
+-- ==========================================================
+-- Step 2. A red cube
+-- ==========================================================
+
+step2 :: IO ()
+step2 = startHtmlOnlyApp $
+  scene []
+  [
+    box defaultBoxAttrs { boxColor = Just "red" }
+      [ position (Vec3 0 2 (-5))
+      , rotation (Vec3 0 45 45)
+      , scale    (Vec3 2 2 2) ] []
+  ]
+
+-- ==========================================================
+-- Step 3. Environment (foreign component)
+-- ==========================================================
+
+data Env = Env
+  { preset      :: MisoString
+  , numDressing :: Int
+  } deriving (Generic, ToJSON)
+
+instance ToJSVal Env where toJSVal = toJSVal . toJSON
+
+environment :: Env -> Component action
+environment = foreignComponent "environment"
+
+step3 :: IO ()
+step3 = startHtmlOnlyApp $
+  scene []
+  [
+    box defaultBoxAttrs { boxColor = Just "red" }
+      [ position (Vec3 0 2 (-5))
+      , rotation (Vec3 0 45 45)
+      , scale    (Vec3 2 2 2) ] []
+  , entity
+      [ environment Env
+         { preset      = "forest"
+         , numDressing = 500
+         }
+      ] []
+  ]
+
+-- ==========================================================
+-- Step 4. Applying an Image Texture
+-- ==========================================================
+
+step4 :: IO ()
+step4 = startHtmlOnlyApp $
+  scene []
+  [
+    box defaultBoxAttrs
+      { boxColor = Just "red"
+      , boxSrc   = Just "https://i.imgur.com/mYmmbrp.jpg"
+      }
+      [ position (Vec3 0 2 (-5))
+      , rotation (Vec3 0 45 45)
+      , scale    (Vec3 2 2 2) ] []
+  , entity
+      [ environment Env
+         { preset      = "forest"
+         , numDressing = 500
+         }
+      ] []
+  ]
+
+-- ==========================================================
+-- Step 5. Using the Asset Management System
+-- ==========================================================
+
+step5 :: IO ()
+step5 = startHtmlOnlyApp $
+  scene []
+  [
+    assets Nothing
+    [
+      img "boxTexture" "https://i.imgur.com/mYmmbrp.jpg"
+    ]
+  , box defaultBoxAttrs
+      { boxColor = Just "red"
+      , boxSrc   = Just "#boxTexture"
+      }
+      [ position (Vec3 0 2 (-5))
+      , rotation (Vec3 0 45 45)
+      , scale    (Vec3 2 2 2) ] []
+  , entity
+      [ environment Env
+         { preset      = "forest"
+         , numDressing = 500
+         }
+      ] []
+  ]
+
+-- ==========================================================
+-- Step 6. Adding Animation
+-- ==========================================================
+
+step6 :: IO ()
+step6 = startHtmlOnlyApp $
+  scene []
+  [
+    assets Nothing
+    [
+      img "boxTexture" "https://i.imgur.com/mYmmbrp.jpg"
+    ]
+  , box defaultBoxAttrs
+      { boxColor = Just "red"
+      , boxSrc   = Just "#boxTexture"
+      }
+      [ position (Vec3 0 2 (-5))
+      , rotation (Vec3 0 45 45)
+      , scale    (Vec3 2 2 2) ]
+      [
+        animation "position" Nothing (Vec3 0 5 (-5)) defaultAnimationAttrs
+          { animationDirection = Just AnimationAlternate
+          , animationDur       = Just 2000
+          , animationRepeat    = Indefinite
+          }
+      ]
+  , entity
+      [ environment Env
+         { preset      = "forest"
+         , numDressing = 500
+         }
+      ] []
+  ]
+
+-- ==========================================================
+-- Step 7. Adding interaction
+-- ==========================================================
+
+step7 :: IO ()
+step7 = startHtmlOnlyApp $
+  scene []
+  [
+    assets Nothing
+    [
+      img "boxTexture" "https://i.imgur.com/mYmmbrp.jpg"
+    ]
+  , box defaultBoxAttrs
+      { boxColor = Just "red"
+      , boxSrc   = Just "#boxTexture"
+      }
+      [ position (Vec3 0 2 (-5))
+      , rotation (Vec3 0 45 45)
+      , scale    (Vec3 2 2 2) ]
+      [
+        animation "scale" Nothing (Vec3 2.3 2.3 2.3) defaultAnimationAttrs
+          { animationBegin = Just "mouseenter"
+          , animationDur   = Just 300
+          }
+      , animation "scale" Nothing (Vec3 2 2 2) defaultAnimationAttrs
+          { animationBegin = Just "mouseleave"
+          , animationDur   = Just 300
+          }
+      , animation "rotation" Nothing (Vec3 360 405 45) defaultAnimationAttrs
+          { animationBegin = Just "click"
+          , animationDur   = Just 2000
+          }
+      ]
+  , entity
+      [ environment Env
+        { preset      = "forest"
+        , numDressing = 500
+        }
+      ] []
+  , camera defaultCameraAttrs []
+      [
+        cursor defaultCursorAttrs [] []
+      ]
+  ]
+
+-- ==========================================================
+-- Step 8. Adding Text
+-- ==========================================================
+
+step8 :: IO ()
+step8 = startHtmlOnlyApp $
+  scene []
+  [
+    assets Nothing
+    [
+      img "boxTexture" "https://i.imgur.com/mYmmbrp.jpg"
+    ]
+  , box defaultBoxAttrs
+      { boxColor = Just "red"
+      , boxSrc   = Just "#boxTexture"
+      }
+      [ position (Vec3 0 2 (-5))
+      , rotation (Vec3 0 45 45)
+      , scale    (Vec3 2 2 2) ]
+      [
+        animation "scale" Nothing (Vec3 2.3 2.3 2.3) defaultAnimationAttrs
+          { animationBegin = Just "mouseenter"
+          , animationDur   = Just 300
+          }
+      , animation "scale" Nothing (Vec3 2 2 2) defaultAnimationAttrs
+          { animationBegin = Just "mouseleave"
+          , animationDur   = Just 300
+          }
+      , animation "rotation" Nothing (Vec3 360 405 45) defaultAnimationAttrs
+          { animationBegin = Just "click"
+          , animationDur   = Just 2000
+          }
+      ]
+  , text "Hello, world!" defaultTextAttrs
+      { textColor = Just (ColorName "black")
+      }
+      [ position (Vec3 (-0.9) 0.2 (-3))
+      , scale    (Vec3 1.5 1.5 1.5) ] []
+  , entity
+      [ environment Env
+        { preset      = "forest"
+        , numDressing = 500
+        }
+      ] []
+  , camera defaultCameraAttrs []
+      [
+        cursor defaultCursorAttrs [] []
+      ]
+  ]
+
+main :: IO ()
+main = step8
diff --git a/examples/guide-basic-scene/static/ghcjsiClient.html b/examples/guide-basic-scene/static/ghcjsiClient.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Miso A-Frame GHCJSi session</title>
+
+    <!-- Do not remove this script!                                   -->
+    <!-- It is needed for proper GHCJSi integration                   -->
+    <script src="/socket.io/socket.io.js" language="javascript"></script>
+    <!-- ------------------------------------------------------------ -->
+
+    <!-- Load A-Frame -->
+    <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
+    <script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
+  </head>
+  <body>
+
+  </body>
+
+  <!-- ----------------------------------------------- -->
+  <!-- Do not remove this script!                      -->
+  <!-- It is needed for proper GHCJSi integration      -->
+  <script src="/client.js" language="javascript"></script>
+  <!-- ----------------------------------------------- -->
+</html>
diff --git a/examples/guide-basic-scene/static/index.html b/examples/guide-basic-scene/static/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <script language="javascript" src="rts.js"></script>
+    <script language="javascript" src="lib.js"></script>
+    <script language="javascript" src="out.js"></script>
+    <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
+  </head>
+  <body>
+
+  </body>
+  <script language="javascript" src="runmain.js" defer></script>
+</html>