Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Simple demonstration of using THREE.js with ClojureScript [from a fork of https://gist.github.com/spacemanaki/1157978], now working with thanks to @seabre
(ns three.demo
(:require [THREE :as THREE]))
(def camera
(THREE/PerspectiveCamera.
75
(/ 800 600)
1
10000))
(set! (.-z (.-position camera)) 1000)
(def scene (THREE/Scene.))
(def geometry (THREE/CubeGeometry. 400 400 400))
(def obj (js/Object.))
(set! (.-color obj) 0xff0000)
(set! (.-wireframe obj) true)
(def material (THREE/MeshBasicMaterial. obj))
(def mesh (THREE/Mesh. geometry material))
(def renderer (THREE/CanvasRenderer.))
(.add scene mesh)
(.setSize renderer 800 600)
(.appendChild
(.getElementById
js/document
"main-arena")
(.-domElement renderer))
(set! (.-dynamic (.-geometry mesh)) true)
(defn render []
(set! (.-x (.-rotation mesh)) (+ (.-x (.-rotation mesh)) 0.01))
(set! (.-y (.-rotation mesh)) (+ (.-y (.-rotation mesh)) 0.02))
(set! (.-verticesNeedUpdating (.-geometry mesh)) true)
(set! (.-normalsNeedUpdating (.-geometry mesh)) true)
(.render renderer scene camera))
(defn animate []
(.requestAnimationFrame js/window animate)
(render))
(animate)

seabre commented Feb 16, 2014

A few things.

On

(def camera (THREE.Camera. 75 (/ window/innerWidth
                                 window/innerHeight) 1 10000))

THREE.Camera. should be THREE.PerspectiveCamera.

And anywhere you see window/innerWidth and window/innerHeight should be (.-innerWidth js/window) and (.-innerHeight js/window).

Also, if you're not actually compiling in Three.js with cljsbuild, you should add (def THREE js/THREE) after your namespace declaration, but make sure you're actually loading Three.js before your compiled ClojureScript on your webpage.

My working fork is here: https://gist.github.com/seabre/9030268

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