Animacija prestavljena v cljs - nek glitch
parent
9ddc09cb04
commit
aaa7c59957
|
@ -9,6 +9,7 @@
|
|||
<link href="css/style.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body style="margin: 0">
|
||||
<div id="container"></div>
|
||||
<script type="text/javascript" src="js/three.min.js"></script>
|
||||
<script src="js/compiled/sliva.js" type="text/javascript"></script>
|
||||
</body>
|
||||
|
|
|
@ -3,12 +3,119 @@
|
|||
|
||||
(enable-console-print!)
|
||||
|
||||
(defonce app-state (atom {:text "Hello world!"}))
|
||||
(console.log "Hello, Sky!")
|
||||
|
||||
(console.log (:text @app-state))
|
||||
;;;;; ☭☭☭☭☭☭☭☭☭☭☭☭☭☭ ;;;;;;
|
||||
;; ☭☭☭☭ Parametri razni ☭☭☭☭ ;;
|
||||
;;;;; ☭☭☭☭☭☭☭☭☭☭☭☭☭☭ ;;;;;;
|
||||
|
||||
(def odmik-kamere 100)
|
||||
(def rotacija-kamere 1)
|
||||
(def FOV 140)
|
||||
(def lik-sirina 2)
|
||||
(def obj-limit 1000)
|
||||
|
||||
(def objekti (atom []))
|
||||
(def stevec (atom 0))
|
||||
|
||||
(def rotacija-x 0.006)
|
||||
(def rotacija-y 0.001)
|
||||
(def rotacija-z 0.003)
|
||||
|
||||
(def zamik-barve 0.0000666)
|
||||
(def zacetna-barva 0.333)
|
||||
(def saturacija 1)
|
||||
(def svetlost 0.4)
|
||||
|
||||
(def w-diff 0.5)
|
||||
(def gostota-obj 2)
|
||||
|
||||
|
||||
|
||||
;; Inicializacija ;;
|
||||
|
||||
(def scena (THREE.Scene.))
|
||||
|
||||
(def kamera (THREE.PerspectiveCamera. FOV (/ js/window.innerWidth js/innerHeight 0.1 2000)))
|
||||
(aset kamera "position" "z" odmik-kamere)
|
||||
|
||||
(def izris (THREE.WebGLRenderer. (js-obj "alpha" true)))
|
||||
(.setSize izris js/window.innerWidth js/window.innerHeight)
|
||||
|
||||
;; Crno ozadje
|
||||
(.setClearColor izris 0x000000 1)
|
||||
|
||||
(defn dodaj-obj [sirina]
|
||||
(let [barva (js/THREE.Color.)
|
||||
mat (js/THREE.LineBasicMaterial. (js-obj "color" barva))
|
||||
geo (js/THREE.Geometry.)
|
||||
zamik (/ sirina 2)
|
||||
-zamik (* -1 zamik)]
|
||||
;; Nastavi barvo novega objekta
|
||||
(.setHSL barva (* @stevec zacetna-barva) saturacija svetlost)
|
||||
|
||||
;; Kvadratek (za nov objekt)
|
||||
(.push geo.vertices (js/THREE.Vector3. -zamik 0 0) (js/THREE.Vector3. 0 zamik 0))
|
||||
(.push geo.vertices (js/THREE.Vector3. -zamik 0 0) (js/THREE.Vector3. 0 -zamik 0))
|
||||
(.push geo.vertices (js/THREE.Vector3. zamik 0 0) (js/THREE.Vector3. 0 zamik 0))
|
||||
(.push geo.vertices (js/THREE.Vector3. zamik 0 0) (js/THREE.Vector3. 0 -zamik 0))
|
||||
|
||||
(let [obj (js/THREE.Line. geo mat js/THREE.LineSegments)]
|
||||
(.add scena obj)
|
||||
|
||||
;; pucaj sceno ane
|
||||
(swap! objekti conj obj)
|
||||
(swap! objekti #(take obj-limit %1)))))
|
||||
|
||||
(defn obj-anim [obj]
|
||||
(.rotateY obj rotacija-y)
|
||||
(.rotateZ obj rotacija-z)
|
||||
(.rotateX obj rotacija-x)
|
||||
|
||||
(let [new-scale (+ obj.scale.x w-diff)]
|
||||
(console.log obj.scale w-diff obj.scale.x new-scale)
|
||||
(aset obj "scale" "x" new-scale)
|
||||
(aset obj "scale" "y" new-scale)
|
||||
(aset obj "scale" "z" new-scale))
|
||||
|
||||
|
||||
(.offsetHSL obj.material.color zamik-barve 0 0))
|
||||
|
||||
(defn cam-rotate []
|
||||
(.translateX kamera rotacija-kamere)
|
||||
(.translateZ kamera (- odmik-kamere
|
||||
(.sqrt js/Math (+ (.pow js/Math odmik-kamere 2)
|
||||
(.pow js/Math rotacija-kamere 2))))))
|
||||
|
||||
(defn render []
|
||||
(js/requestAnimationFrame render)
|
||||
|
||||
(swap! stevec inc)
|
||||
|
||||
(if (= 0 (rem @stevec gostota-obj)) (dodaj-obj lik-sirina))
|
||||
|
||||
(.render izris scena kamera)
|
||||
|
||||
(run! obj-anim @objekti))
|
||||
;;(cam-rotate))
|
||||
|
||||
;; Zacetek ;;
|
||||
(aset js/document "onreadystatechange"
|
||||
(fn []
|
||||
(if (= js/document.readyState "complete")
|
||||
(let [container (.getElementById js/document "container")]
|
||||
(.appendChild container izris.domElement)
|
||||
(render)))))
|
||||
|
||||
(defn on-js-reload []
|
||||
;; optionally touch your app-state to force rerendering depending on
|
||||
;; your application
|
||||
;; (swap! app-state update-in [:__figwheel_counter] inc)
|
||||
)
|
||||
|
||||
;; Hendlaj risajz
|
||||
(defn on-window-resize[]
|
||||
(aset kamera "aspect" (/ js/window.innerWidth js/window.innerHeight))
|
||||
(.updateProjectionMatrix kamera)
|
||||
(.setSize izris js/window.innerWidth js/window.innerHeight))
|
||||
(.addEventListener js/window "resize" on-window-resize false)
|
||||
|
|
Loading…
Reference in New Issue