Skip to content

Instantly share code, notes, and snippets.

Created January 22, 2020 22:15
What would you like to do?
(ns helix-three.core
(:require [goog.object :as gobj]
[helix.core :refer [defnc $]]
[helix.hooks :as hooks]
[cljs-bean.core :as b]
["react-dom" :as rdom]
["react-three-fiber" :as rtf])
(:refer-clojure :exclude [Box]))
(defnc Box [props]
(let [mesh (hooks/use-ref nil)
[hover? set-hover] (hooks/use-state false)
[active? set-active] (hooks/use-state false)]
(rtf/useFrame (fn []
(let [rotation (gobj/get @mesh "rotation")
rpos (gobj/get rotation "x")
rpos' (+ rpos 0.01)]
(doto rotation
(gobj/set "x" rpos')
(gobj/set "y" rpos')))))
($ :mesh
{:ref mesh
:scale (if active?
#js [1.5 1.5 1.5]
#js [1 1 1])
:on-click #(set-active not)
:on-pointer-over #(set-hover true)
:on-pointer-out #(set-hover false)
& props}
($ :boxBufferGeometry
{:attach "geometry" :args #js [1 1 1]})
($ :meshStandardMaterial
{:attach "material" :color (if hover? "hotpink" "orange")}))))
(defn ^:export start []
($ rtf/Canvas
($ :ambientLight)
($ :pointLight {:position #js [10 10 10]})
($ Box {:position #js [-1.2 0 0]})
($ Box {:position #js [1.2 0 0]}))
(js/document.getElementById "app")))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment