planetoid.cljs

(ns planetoid
  (:require [chia.util.js-interop :as j]
            ["three" :as three]
            ["bezier-easing" :as BezierEasing]))

(defonce renderer
  (doto (three/WebGLRenderer. (clj->js :antialias true))
    (.setPixelRatio (.-devicePixelRatio js/window))
    (.setSize (.-innerWidth js/window) (.-innerHeight js/window))
    (.setClearColor "#000000")
    (j/assoc-in! [:shadowMap :enabled] true)
    (-> (j/get :domElement) (->> (.appendChild (.-body js/document))))))

(defonce scene
  (three/Scene.))

(defonce ambient-light
  (doto (three/AmbientLight. 0xffffff 0.1)
    (->> (.add scene))))

(defonce spot-light
  (doto (three/SpotLight. 0xffeeff )
    (j/update! :position j/call :set 20 0 80)
    (->> (.add scene))))

(def camera
  (doto (three/PerspectiveCamera. 75 (/ (.-innerWidth js/window) (.-innerHeight js/window)) 0.1 1000)
    (j/update! :position j/call :set 0 0 50)
    (.lookAt (three/Vector3.))))

(defonce mesh (atom nil))

(defn set-mesh [m]
  (when (not (nil? @mesh))
    (.remove scene @mesh))
  (reset! mesh m)
  (.add scene m))

(def bezier
  (concat
   (map (BezierEasing. 0.74 -0.01 0.21 0.99)
        (range 0 1 (/ 1.0 24))) ; 24 frames of motion,
   (repeat 8 1)))               ; then static for 8 frames

(def last-tick (atom (.now js/Date)))
(def current-frame (atom 0))

(defn render []
  (let [fps 24.0 ; goal, often not reality
        num-frames 32
        frame-duration (/ 1000 (float fps))
        time (.now js/Date)]
    (when (>= time (+ @last-tick frame-duration))
      (reset! last-tick time)
      (swap! current-frame #(mod (inc %) num-frames))
      (when-let [m (second (.-children @mesh))]
        (j/assoc-in! m [:rotation :y] (* 2 Math/PI (nth bezier @current-frame))))))
  (.render renderer scene camera))

(defn animate []
  (.requestAnimationFrame js/window animate)
  (render))

(defn init []
  (println "starting...")
  (set-mesh (three/Group.)) ; initial empty mesh for `animate`
  (.load (three/TextureLoader.)
         "fukushima-mountains.jpg"
         (fn [texture]
           (j/assoc! texture
                     :wrapS three/RepeatWrapping
                     :wrapT three/RepeatWrapping)
           (set-mesh
            (doto (three/Group.)
              (.add (-> (three/Mesh. (three/BoxGeometry. 1000 1000 0.25)
                                     (three/MeshStandardMaterial. (js-obj "color" 0xfeedfe
                                                                          "roughness" 0.8
                                                                          "metalness" 0.2)))
                        (j/update! :position j/call :set 0 0 -50)
                        (j/assoc! :receiveShadow true)))
              (.add (-> (three/Mesh. (three/SphereGeometry. 20 40 40)
                                     (three/MeshStandardMaterial. (js-obj "color" 0x686666
                                                                          "map" texture
                                                                          "displacementMap" texture
                                                                          "displacementScale" 2
                                                                          "roughness" 0.7
                                                                          "metalness" 0.3)))
                        (j/assoc! :castShadow true)))))))
  (animate))