Trying out the three.js + shadow-cljs workflow in clojurescript.

drei.cljs

(ns drei
  (:require [goog.object :as gobj]
            ["three" :as three]
            ["three-orbitcontrols" :refer (OrbitControls)]
            ["bezier-easing" :as BezierEasing]))

(defonce renderer
  (let [rndr (three/WebGLRenderer. (js-obj "antialias" true))]
    (.setPixelRatio rndr (.-devicePixelRatio js/window))
    (.setSize rndr
              (.-innerWidth js/window)
              (.-innerHeight js/window))
    (.setClearColor rndr "hsl(60, 30%, 85%)")
    (.appendChild (.-body js/document)
                  (.-domElement rndr))
    rndr))

(defonce scene
  (three/Scene.))

(defonce light1
  (let [l (three/DirectionalLight. 0xFFFFFF 0.8)]
    (.set (.-position l) 0 0 -2)
    (.add scene l)
    l))

(defonce light2
  (let [l (three/PointLight. 0x69BB01 1)]
    (.set (.-position l) -2 -2 0)
    (.add scene l)
    l))

(defonce light3
  (let [l (three/SpotLight. 0xFFFFFF 0.7)]
    (.set (.-position l) -1 -2 -2)
    (.add scene l)
    l))

(def camera
  (let [c (three/PerspectiveCamera. 45 1 0.01 100)]
    (set! (.-aspect c) 
          (/ (.-innerWidth js/window)
             (.-innerHeight js/window)))
    (.set (.-position c) 1.5 1.5 -4)
    (.lookAt c (three/Vector3.))
    c))

(defonce mesh (atom nil))

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

;; changes here will be autoloaded
(set-mesh
 (let [g (three/Group.)]
   (doseq [[box-color x y z] [["#ff9966" -0.8 -0.4 0]
                              ["#6699ff" 0.8 -0.4 0]
                              ["#9966ff" 0.8 0.4 0]
                              ["#ff6699" -0.8 0.4 0]]]
     (let [b (three/Mesh. (three/BoxGeometry. 1.4 0.7 0.5)
                          (three/MeshStandardMaterial.
                           (js-obj "color"       box-color
                                   "metalness"   0
                                   "roughness"   1
                                   "flatShading" true)))]
       (.set (.-position b) x y z)
       (.add g b)))
   g))

(def ease (BezierEasing. 0.74 -0.01 0.21 0.99))

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

(defn render []
  (let [num-frames 24
        frame-duration (/ 1000 (float num-frames))
        time (.now js/Date)]
    (when (> time (+ @last-tick frame-duration))
      (reset! last-tick time)
      (swap! current-frame #(mod (inc %) num-frames))
      (mapv #(set! (.. %1 -rotation -y)
                   (* %2 (ease (/ @current-frame num-frames)) Math/PI 2))
            (.-children @mesh)
            [1 -1 1 -1])))
  (.render renderer scene camera))

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

(defn init []
  (println "starting...")
  (animate))