Skip to content

Instantly share code, notes, and snippets.

@seabre
Forked from michiakig/three.cljs
Last active September 13, 2021 06:19
Show Gist options
  • Save seabre/9030268 to your computer and use it in GitHub Desktop.
Save seabre/9030268 to your computer and use it in GitHub Desktop.
Three.js demo with ClojureScript. Actually works.
(ns three.demo)
(def THREE js/THREE)
(def camera (THREE.PerspectiveCamera. 75 (/ (.-innerWidth js/window)
(.-innerHeight js/window)) 1 10000))
(set! (.-z (.-position camera)) 1000)
(def scene (THREE.Scene.))
(def geometry (THREE.CubeGeometry. 200 200 200))
(def obj (js/Object.))
(set! (.-color obj) 0xff0000)
(set! (.-wireframe obj) true)
(def material (THREE.MeshBasicMaterial. obj))
(def mesh (THREE.Mesh. geometry material))
(.add scene mesh)
(def renderer (THREE.CanvasRenderer.))
(.setSize renderer (.-innerWidth js/window) (.-innerHeight js/window))
(.appendChild (.-body js/document) (.-domElement renderer))
(defn render []
(set! (.-x (.-rotation mesh)) (+ (.-x (.-rotation mesh)) 0.01))
(set! (.-y (.-rotation mesh)) (+ (.-y (.-rotation mesh)) 0.02))
(.render renderer scene camera))
(defn animate []
(.requestAnimationFrame js/window animate)
(render))
(animate)
@zendevil
Copy link

zendevil commented Sep 13, 2021

Hi I tried this example after making a tweak to the dom element, but it didn't work. I don't see the animation:

(defn landing []
  (let [mount (atom nil)
        scene (js/THREE.Scene.)
        _ (js/console.log "scene is " scene)
        camera (js/THREE.PerspectiveCamera.
                    75 (/ (.-innerWidth js/window)
                          (.-innerHeight js/window))
                       0.1
                       1000)
        _ (js/console.log "camera is " camera)
        renderer (js/THREE.WebGLRenderer.)
        _ (.setSize renderer (.-innerWidth js/window) 
                    (.-innerHeight js/window))
        _ (js/console.log "renderer is " renderer)
        _ (try (.. @mount 
                 (appendChild (.-domElement renderer)))
               (catch js/Object e (prn e @mount)))
        geometry (js/THREE.BoxGeometry.)
        _ (js/console.log "geometry is " geometry)
        material (js/THREE.MeshBasicMaterial. 
                      (clj->js {:color 0xff0000}))
        _ (js/console.log "material is " material)
        cube (js/THREE.Mesh. geometry material) 
        _ (js/console.log "cube is " cube)
        _ (.add scene cube)
        _ (set! (.. camera -position -z) 5)
        _ (prn "trying foo")]
        
                  
    (defn animate []
      (.requestAnimationFrame js/window animate)
      (set! (.. cube -rotation -x)
            (inc (.. cube -rotation -x)))
      (set! (.. cube -rotation -y)
            (inc (.. cube -rotation -y)))
      (.render renderer scene camera))
    (animate)
    [:div
     [:div.hero {:ref (fn [ref] (reset! mount ref))}]]))

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment