react-three-rendererを使って上手く図形を描画したい

お世話になっております。

react-three-rendererを利用してある図形を作りたいのですが、Three.jsなどの描画を行う
ライブラリを使用した経験がなく、どのように作成すればいいのか分かりません。

下記に現在想定している実現項目を挙げていますので、
どの程度まで(またどのように)react-three-rendererで対応できるかご教授お願い致します。

使用経験

React単体でフロント画面が書ける、ライフサイクルが少し分かる
Three.jsでは図形を静的に表示したり、図形にライトを当てた経験がある

実現したい項目

Exampleのsmiley(笑顔のやつ)を回転させながら表示したい
上記のsmileyを画面に複数個、非同期で表示したい
回転させる際に枠をグラデーションさせながら回転させたい
具体例でいうとテクノウチさんの動画の (音が出ます!!)

左下の四角の様な動く図形を複数作りたい (あそこまで動きは複雑ではなくて、一定のリズムで)

念のため現時点のソース

js
1// circleGeometryを利用して取り合えず円形を回転させることができる
2constructor(props, context) {
3        super(props, context);
4
5        this.cameraPosition = new THREE.Vector3(0, 0, 5);
6
7        this.state = {
8            cubeRotation: new THREE.Euler(),
9        };
10
11        this._onAnimate = () => {
12           
13            this.setState({
14                cubeRotation: new THREE.Euler(
15                    this.state.cubeRotation.x + 0.1,
16                    this.state.cubeRotation.y + 0.1,
17                    0
18                ),
19            });
20        };
21    }
22
23    render() {
24        const width = window.innerWidth;
25        const height = window.innerHeight;
26
27        return (<React3
28            mainCamera="camera"
29            width={width}
30            height={height}
31            clearColor={new THREE.Color(0xffffff)}
32            onAnimate={this._onAnimate}
33        >
34            <scene>
35                <perspectiveCamera
36                    name="camera"
37                    fov={75}
38                    aspect={width / height}
39                    near={0.1}
40                    far={1000}
41
42                    position={this.cameraPosition}
43                />
44                <mesh
45                    rotation={this.state.cubeRotation}
46                >
47                    <CircleGeometry
48                        radius={1}
49                        segments={32}
50                        thetaStart={0}
51                        thetaLength={6.3}
52                    />
53                    <meshBasicMaterial
54                        color={0x00ffff}
55                    />
56                </mesh>
57            </scene>
58        </React3 >);
59    }