Translated engine from js

public/index.html

@@ -20,7 +20,6 @@
 
     <script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
 
-    <script src="scene.js" type="text/javascript"></script>
     <script src="js/app.js" type="text/javascript"></script>
    </body>
 </html>

src/px3d/core.cljs

@@ -1,11 +1,8 @@
 (ns px3d.core
     (:require
+      [px3d.engine :as engine :refer [engine scene camera controls renderer gameloop THREE]]
       [px3d.assets :as assets]))
 
-(def scene js/scene)
-(def camera js/camera)
-(def THREE js/THREE)
-
 (def background-color 0x20AAF3)
 ;(def background-color 0xffffff)
 
@@ -40,14 +37,14 @@
 (defonce picky
   ; TODO: convert to fn returning channel
   (let [raycaster (THREE.Raycaster.)
-        picker (partial mouse-pick raycaster js/container scene camera)
+        picker (partial mouse-pick raycaster #js {} scene camera)
         moved (atom false)
         down (fn [ev] (reset! moved [(.-clientX ev) (.-clientY ev)]))
         done (fn [ev]
                (let [[ox oy] @moved]
                (when (and (< (js/Math.abs (- ox (.-clientX ev))) 5)
                           (< (js/Math.abs (- oy (.-clientY ev))) 5))
-                 (let [picked (#'mouse-pick ev raycaster (aget js/renderer "domElement") scene camera)]
+                 (let [picked (#'mouse-pick ev raycaster (aget renderer "domElement") scene camera)]
                    ; TODO: also return screen X,Y
                    (#'handle-pick picked)))))]
     (js/console.log "registering mouse/touch events")
@@ -65,7 +62,7 @@
     (.add container mesh)
     (aset container "mixer" mixer)
     (.add scene container)
-    (.push js/mixers mixer)
+    ;(.push js/mixers mixer) <- (swap! mixers conj mixer) if necessary
     container))
 
 (defn stop-clip [container]
@@ -131,7 +128,7 @@
              (-> astronaut .-position (.set 8 0 8))
              (js/console.log astronaut)
 
-             (aset js/controls "target" (.-position astronaut))
+             (aset controls "target" (.-position astronaut))
 
              ;(js/setTimeout (fn []
              ;                 (-> astronaut .-mixer .stopAllAction)
@@ -146,7 +143,7 @@
                                 (play-clip astronaut "Walk" gltf scene))))
                  true))
 
-             (aset js/window "gameloop"
+             (reset! gameloop
                    (fn [delta]
                      ; if the player is not on target
                      (let [target @player-target
@@ -183,4 +180,10 @@
   (launch nil))
 
 (defn init! []
+  (when-not (:started? @engine)
+    (do
+      (engine/init 4)
+      (engine/animate)
+      (swap! engine assoc :started? true)))
   (mount-root))
+

src/px3d/engine.cljs

@@ -0,0 +1,93 @@
+(ns px3d.engine)
+
+(defonce engine (atom {:started? false}))
+(defonce gameloop (atom nil))
+
+(defonce THREE js/THREE)
+
+(defonce scene (new THREE.Scene))
+(defonce camera (new THREE.PerspectiveCamera 70 (/ (.-innerWidth js/window) (.-innerHeight js/window)) 1 5000))
+
+(defonce renderer (new THREE.WebGLRenderer #js {:antialias false}))
+(defonce controls (new THREE.OrbitControls camera (.-domElement renderer)))
+(defonce stats (new js/Stats))
+(defonce clock (new THREE.Clock))
+
+(defn onWindowResize
+  [PIXELATE]
+  (fn []
+    (set! (.-aspect camera) (/ (.-innerWidth js/window) (.-innerHeight js/window)))
+    (.updateProjectionMatrix camera)
+    (.setSize renderer (/ (.-innerWidth js/window) PIXELATE) (/ (.-innerHeight js/window) PIXELATE))
+    (set! (.. renderer -domElement -style -width) (str (.-innerWidth js/window) "px"))
+    (set! (.. renderer -domElement -style -height) (str (.-innerHeight js/window) "px"))))
+
+(defn init
+  [PIXELATE]
+  (let [container (.createElement js/document "div")
+        dragControls (new THREE.DragControls #js [] camera (.-domElement renderer))]
+
+    (.appendChild (.-body js/document) container)
+
+    (.set (.-position camera) 10 10 (- 10))
+
+    (set! (.-background scene) (new THREE.Color 0xf0f0f0))
+
+    (.add scene (new THREE.AmbientLight 0xffffff 1.0))
+
+    (let [light (new THREE.SpotLight 0xffffff 1.0)]
+      (.set (.-position light) 100 100 100)
+      (set! (.-castShadow light) true)
+      (set! (.. light -shadow -camera -near) 10)
+      (set! (.. light -shadow -camera -far) 400)
+      (set! (.. light -shadow -mapSize -width) 1024)
+      (set! (.. light -shadow -mapSize -height) 1024)
+      (set! (.-angle light) (/ (.-PI js/Math) 12))
+      (.add scene light))
+
+    (let [light (new THREE.DirectionalLight 0xffffff 0.5)]
+      (.set (.-position light) 200 200 200)
+      (.add scene light))
+
+    (.setPixelRatio renderer (.-devicePixelRatio js/window))
+
+    (.setSize
+      renderer
+      (/ (.-innerWidth js/window) PIXELATE)
+      (/ (.-innerHeight js/window) PIXELATE))
+
+    (set! (.. renderer -shadowMap -enabled) true)
+    (set! (.. renderer -shadowMap -type) (.-PCFShadowMap THREE))
+    (set! (.-gammaOutput renderer) true)
+    (.appendChild container (.-domElement renderer))
+
+    (set! (.-rotateSpeed controls) 1.0)
+    (set! (.-zoomSpeed controls) 1.2)
+    (set! (.-panSpeed controls) 0.8)
+    (set! (.-enableZoom controls) true)
+    (set! (.-enablePan controls) true)
+    (set! (.-staticMoving controls) true)
+    (set! (.-dynamicDampingFactor controls) 0.3)
+    (set! (.-maxPolarAngle controls) (- (/ (.-PI js/Math) 2) 0.175))
+    (set! (.-minDistance controls) 5)
+    (set! (.-maxDistance controls) 50)
+
+    (.addEventListener dragControls "dragstart" (fn [] (set! (.-enabled controls) false)))
+    (.addEventListener dragControls "dragend" (fn [] (set! (.-enabled controls) true)))
+
+    (.appendChild container (.-dom stats))
+    (.addEventListener js/window "resize" (onWindowResize PIXELATE) false)
+
+    (set! (.. renderer -domElement -style -width) (str (.-innerWidth js/window) "px"))
+    (set! (.. renderer -domElement -style -height) (str (.-innerHeight js/window) "px")))
+  )
+
+(defn animate
+  []
+  (let [delta (.getDelta clock)]
+    (js/requestAnimationFrame animate)
+    (.update controls delta)
+    (when-let [f @gameloop] (f delta))
+    (.render renderer scene camera)
+    (.update stats)))
+