Finally I tried to them below and works fine.
• upgrade reagent
from "0.8.1"
to "0.10.0"
• Latest code:
(ns tsuguten.component.animation-lantern
(:require
["react" :refer [useRef useState]]
["react-three-fiber" :refer [Canvas useFrame] :as rtf]
[reagent.core :as rc]
["three" :refer [Mesh
MeshStandardMaterial
BoxBufferGeometry]]))
(defn fn$animation-lantern
[]
(let [mesh-ref (useRef)]
(rc/as-element
[:> Canvas
[:ambientLight]
[:pointLight {:position (clj->js [10 10 10])}]
[:mesh {:ref mesh-ref
:scale (clj->js [1 1 1])}
[:boxBufferGeometry {:attach "geometry"
:args (clj->js [1 1 1])}]
[:meshStandardMaterial {:attach "material"
:color "hotpink"}]]])))
(defn $animation-lantern
[]
(fn []
[:> fn$animation-lantern]))
$animation-lantern
can use as an element of hiccup form like this: [$animation-lantern]
This code works fine.
I hope this will help.