Animacija prestavljena v cljs - nek glitch
Jure Podgoršek
parent
9ddc09cb04
commit
aaa7c59957
|
|
@ -9,6 +9,7 @@
|
||||||
<link href="css/style.css" rel="stylesheet" type="text/css">
|
<link href="css/style.css" rel="stylesheet" type="text/css">
|
||||||
</head>
|
</head>
|
||||||
<body style="margin: 0">
|
<body style="margin: 0">
|
||||||
|
<div id="container"></div>
|
||||||
<script type="text/javascript" src="js/three.min.js"></script>
|
<script type="text/javascript" src="js/three.min.js"></script>
|
||||||
<script src="js/compiled/sliva.js" type="text/javascript"></script>
|
<script src="js/compiled/sliva.js" type="text/javascript"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -3,12 +3,119 @@
|
||||||
|
|
||||||
(enable-console-print!)
|
(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 []
|
(defn on-js-reload []
|
||||||
;; optionally touch your app-state to force rerendering depending on
|
;; optionally touch your app-state to force rerendering depending on
|
||||||
;; your application
|
;; your application
|
||||||
;; (swap! app-state update-in [:__figwheel_counter] inc)
|
;; (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