helix_three_core.cljs

(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 []
  (rdom/render
   ($ 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")))