Got shadow-cljs build working. Fixes #9

infinitelives · Jan 5, 2020 · a5dad0f · a5dad0f
1 parent 1d379bc
commit a5dad0f
Show file tree

Hide file tree

Showing 18 changed files with 71 additions and 159 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,8 @@
 /target
 /classes
 /checkouts
+.shadow-cljs
+node_modules
 profiles.clj
 pom.xml
 pom.xml.asc
@@ -11,6 +13,7 @@ pom.xml.asc
 /resources/public/js
 /public/js
 /out
+workspace
 /.repl
 *.log
 /.env

diff --git a/Makefile b/Makefile
@@ -2,8 +2,8 @@ STATIC=index.html scene.js css/main.css models/assets.glb
 
 all: build/js/app.js $(foreach S, $(STATIC), build/$(S))
 
-build/js/app.js: $(shell find src) project.clj public/models/assets.glb
-	lein package
+build/js/app.js: $(shell find src) package.json shadow-cljs.edn public/models/assets.glb
+	npx shadow-cljs compile prod
 
 build/%: public/%
 	@mkdir -p `dirname $@`
@@ -12,6 +12,12 @@ build/%: public/%
 public/models/assets.glb: public/models/assets.blend
 	PROD=1 bin/watch-and-build-assets.sh
 
+.PHONY: watch clean
+
+watch:
+	./bin/watch-and-build-assets.sh &
+	npx shadow-cljs watch app
+
 clean:
 	rm -rf build/*
 	lein clean
diff --git a/around.gif b/around.gif
diff --git a/env/dev/clj/user.clj b/env/dev/clj/user.clj
diff --git a/env/dev/cljs/px3d/dev.cljs b/env/dev/cljs/px3d/dev.cljs
diff --git a/env/prod/cljs/px3d/prod.cljs b/env/prod/cljs/px3d/prod.cljs
diff --git a/package.json b/package.json
@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "shadow-cljs": "^2.8.83",
+    "three": "^0.112.1"
+  }
+}
diff --git a/project.clj b/project.clj
diff --git a/public/index.html b/public/index.html
@@ -11,14 +11,6 @@
   </head>
   <body>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/seedrandom/3.0.1/seedrandom.min.js"></script>
-
-    <script src="https://threejs.org/build/three.js"></script>
-    <script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>
-
-    <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
-
-    <script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
-
-    <script src="js/app.js" type="text/javascript"></script>
+    <script src="js/main.js" type="text/javascript"></script>
    </body>
 </html>
diff --git a/public/models/assets.blend b/public/models/assets.blend
diff --git a/public/models/assets.glb b/public/models/assets.glb
diff --git a/screencast.gif b/screencast.gif
diff --git a/shadow-cljs.edn b/shadow-cljs.edn
@@ -0,0 +1,12 @@
+{:source-paths ["src"]
+ :dev-http {8000 "public/"}
+ :builds {:app {:target :browser
+                :output-dir "public/js"
+                :asset-path "js"
+                :modules {:main {:init-fn px3d.core/main}}
+                ;:devtools {:after-load app.main/reload!}
+                }
+          :prod {:target :browser
+                  :output-dir "build/js"
+                  :asset-path "js"
+                  :modules {:main {:init-fn px3d.core/main}}}}}
diff --git a/src/px3d/animation.cljs b/src/px3d/animation.cljs
@@ -1,10 +1,11 @@
-(ns px3d.animation)
+(ns px3d.animation
+  (:require ["three/build/three.module.js" :as THREE]))
 
 ; parent the Blender mesh to an empty so it can be moved around
 (defn animator [gltf scene mesh-name]
-  (let [container (THREE.Mesh.)
+  (let [container (THREE/Mesh.)
         mesh (.clone (.getObjectByName (.-scene gltf) mesh-name))
-        mixer (THREE.AnimationMixer. scene)]
+        mixer (THREE/AnimationMixer. scene)]
     (.add container mesh)
     (aset container "mixer" mixer)
     (.add scene container)
@@ -14,7 +15,7 @@
   (-> container .-mixer .stopAllAction))
 
 (defn play-clip [container animation-name gltf scene]
-  (let [clip (THREE.AnimationClip.findByName (aget gltf "animations") animation-name)]
+  (let [clip (THREE/AnimationClip.findByName (aget gltf "animations") animation-name)]
     (stop-clip container)
     (.play (.clipAction (aget container "mixer") clip (aget container "children" 0)))))
 
diff --git a/src/px3d/assets.cljs b/src/px3d/assets.cljs
@@ -1,2 +1,2 @@
 (ns px3d.assets)
-(def checksum 0x367c11f8)
+(def checksum 0xe403ed4f)
diff --git a/src/px3d/core.cljs b/src/px3d/core.cljs
@@ -1,17 +1,20 @@
 (ns px3d.core
     (:require
-      [px3d.engine :as engine :refer [THREE]]
+      ["three/build/three.module.js" :as THREE]
+      [px3d.engine :as engine]
       [px3d.picker :as picker]
       [px3d.procgen :as procgen]
       [px3d.animation :as animation]
       [px3d.assets :as assets]))
 
+(js/console.log "assets" assets/checksum)
+
 (procgen/seed-from-hash)
 
 ; game state
 (defonce state
   (atom {:player-target
-         (THREE.Vector3. 8 0 8)}))
+         (THREE/Vector3. 8 0 8)}))
 
 ; create the px3d engine and start an animation loop
 (defonce e (engine/start-animation-loop
@@ -34,9 +37,9 @@
       ;(.add scene (.-scene assets))
 
       ; add a ground plane
-      (let [ground (THREE.Mesh.
-                     (THREE.CylinderGeometry. 150 150 1 32)
-                     (THREE.MeshLambertMaterial. #js {:color 0x637C60}))]
+      (let [ground (THREE/Mesh.
+                     (THREE/CylinderGeometry. 150 150 1 32)
+                     (THREE/MeshLambertMaterial. #js {:color 0x637C60}))]
         (aset ground "position" "y" -0.5)
         (aset ground "receiveShadow" true)
         (aset ground "castShadow" true)
@@ -111,7 +114,7 @@
           {:keys [scene]} @e]
       (js/console.log "picked:" (.-point obj) (-> obj .-object .-name))
       (animation/play-clip astronaut "Walk" assets scene)
-      (swap! state assoc :player-target (THREE.Vector3. (-> obj .-point .-x) 0 (-> obj .-point .-z))))))
+      (swap! state assoc :player-target (THREE/Vector3. (-> obj .-point .-x) 0 (-> obj .-point .-z))))))
 
 ; do some stuff in the world
 ; if using core.async this could be a bunch of independent
@@ -133,7 +136,7 @@
                 look (.clone player-target)
                 dir (-> move (.sub pos) .normalize (.multiplyScalar 0.1))]
             (.lookAt astronaut look)
-            (.rotateY astronaut (/ Math.PI 2.0))
+            (.rotateY astronaut (/ js/Math.PI 2.0))
             (-> astronaut .-rotation)
             (.add pos dir))))
       ; turn the sky pink when the rock and player come close together
@@ -157,6 +160,5 @@
 ; kick off a singleton running the game loop
 (defonce run-gameloop (gameloop))
 
-; figwheel
-(defn init! [])
-(defn mount-root [])
+(defn main [])
+
diff --git a/src/px3d/engine.cljs b/src/px3d/engine.cljs
@@ -1,6 +1,8 @@
-(ns px3d.engine)
-
-(defonce THREE js/THREE)
+(ns px3d.engine
+  (:require ["three/build/three.module.js" :as THREE]
+            ["three/examples/jsm/libs/stats.module.js" :as Stats]
+            ["three/examples/jsm/controls/OrbitControls.js" :as OrbitControls]
+            ["three/examples/jsm/loaders/GLTFLoader.js" :as GLTFLoader]))
 
 (defn on-window-resize [pixel-size camera renderer]
   (set! (.-aspect camera) (/ (.-innerWidth js/window) (.-innerHeight js/window)))
@@ -14,7 +16,7 @@
   ;dragControls (new THREE.DragControls #js list-of-objects camera (.-domElement renderer))
   ;(.addEventListener dragControls "dragstart" (fn [] (set! (.-enabled controls) false)))
   ;(.addEventListener dragControls "dragend" (fn [] (set! (.-enabled controls) true)))
-  (let [controls (THREE.OrbitControls. camera (.-domElement renderer))]
+  (let [controls (OrbitControls/OrbitControls. camera (.-domElement renderer))]
     (set! (.-rotateSpeed controls) 1.0)
     (set! (.-zoomSpeed controls) 1.2)
     (set! (.-panSpeed controls) 0.8)
@@ -30,23 +32,23 @@
 (defn init
   [& {:keys [pixel-size] :or {pixel-size 4}}]
   (let [container (.createElement js/document "div")
-        scene (THREE.Scene.)
-        camera (THREE.PerspectiveCamera. 70 (/ (.-innerWidth js/window) (.-innerHeight js/window)) 1 5000)
-        renderer (THREE.WebGLRenderer. #js {:antialias false})
-        stats (js/Stats.)]
+        scene (THREE/Scene.)
+        camera (THREE/PerspectiveCamera. 70 (/ (.-innerWidth js/window) (.-innerHeight js/window)) 1 5000)
+        renderer (THREE/WebGLRenderer. #js {:antialias false})
+        stats (Stats/default.)]
 
     (.appendChild (.-body js/document) container)
 
     (.set (.-position camera) 10 10 (- 10))
 
-    (set! (.-background scene) (THREE.Color. 0xf0f0f0))
+    (set! (.-background scene) (THREE/Color. 0xf0f0f0))
     (.setPixelRatio renderer (.-devicePixelRatio js/window))
     (.setSize
       renderer
       (/ (.-innerWidth js/window) pixel-size)
       (/ (.-innerHeight js/window) pixel-size))
     (set! (.. renderer -shadowMap -enabled) true)
-    (set! (.. renderer -shadowMap -type) (.-PCFShadowMap THREE))
+    (set! (.. renderer -shadowMap -type) THREE/PCFShadowMap)
     (set! (.-gammaOutput renderer) true)
     (.appendChild container (.-domElement renderer))
     (.appendChild container (.-dom stats))
@@ -81,14 +83,14 @@
     true))
 
 (defn start-animation-loop [eng callback]
-  (let [clock (THREE.Clock.)]
+  (let [clock (THREE/Clock.)]
     (animate eng callback clock))
   eng)
 
 (defn add-default-lights [scene]
-  (.add scene (THREE.AmbientLight. 0xffffff 1.0))
+  (.add scene (THREE/AmbientLight. 0xffffff 1.0))
 
-  (let [light (THREE.SpotLight. 0xffffff 1.0)]
+  (let [light (THREE/SpotLight. 0xffffff 1.0)]
     (.set (.-position light) 100 100 100)
     (set! (.-castShadow light) true)
     (set! (.. light -shadow -camera -near) 10)
@@ -98,27 +100,27 @@
     (set! (.-angle light) (/ (.-PI js/Math) 12))
     (.add scene light))
 
-  (let [light (THREE.DirectionalLight. 0xffffff 0.5)]
+  (let [light (THREE/DirectionalLight. 0xffffff 0.5)]
     (.set (.-position light) 200 200 200)
     (.add scene light)))
 
 (defn apply-shadows [assets]
   ; set up every mesh to throw and receive shadows
-  (-> assets .-scene (.traverse (fn [node] (when (instance? THREE.Mesh node)
+  (-> assets .-scene (.traverse (fn [node] (when (instance? THREE/Mesh node)
                                              (aset node "castShadow" true)
                                              (aset node "receiveShadow" true)))))
   assets)
 
 (defn set-background [scene color]
   ; add fog
-  (aset scene "fog" (THREE.FogExp2. color 0.0128 10))
-  (aset scene "background" (THREE.Color. color)))
+  (aset scene "fog" (THREE/FogExp2. color 0.0128 10))
+  (aset scene "background" (THREE/Color. color)))
 
 (defn setup-default-scene [scene]
   (set-background scene 0x20AAF3)
   (add-default-lights scene))
 
 (defn load-assets [assets-url done-fn & [progress-fn error-fn]]
-  (-> (THREE.GLTFLoader.)
+  (-> (GLTFLoader/GLTFLoader.)
       (.load assets-url
              #(done-fn (apply-shadows %)) progress-fn error-fn)))