update three examples

package.json

@@ -7,7 +7,7 @@
     "@babel/register": "^7.8.3",
     "@babel/runtime": "^7.8.3",
     "@juggle/resize-observer": "^2.5.0",
-    "@react-three/drei": "^2.1.1-beta.5",
+    "@react-three/drei": "^6.1.2",
     "@svgr/webpack": "4.1.0",
     "@tweenjs/tween.js": "^17.4.0",
     "@typescript-eslint/eslint-plugin": "1.6.0",
@@ -83,7 +83,7 @@
     "react-slider": "^0.11.2",
     "react-snapshot": "^1.3.0",
     "react-spring": "^8.0.25",
-    "react-three-fiber": "^3.0.17",
+    "react-three-fiber": "^6.0.13",
     "react-zdog": "^1.0.11",
     "resolve": "1.10.0",
     "rss-parser": "^3.7.3",
@@ -94,7 +94,7 @@
     "serve": "^11.3.0",
     "style-loader": "0.23.1",
     "terser-webpack-plugin": "1.2.3",
-    "three": "^0.121.1",
+    "three": "^0.129.0",
     "three-orbit-controls": "^82.1.0",
     "troika-three-text": "^0.34.0",
     "ts-pnp": "1.1.2",

src/components/Articles/GameOfThrones/GameOfThrones.jsx

@@ -1,6 +1,5 @@
-import React, { Component, useState, usePrevious, useEffect, useRef, useMemo } from "react"
-import { extend, Canvas, useRender, useThree, useUpdate } from 'react-three-fiber'
-import { useSpring, animated } from 'react-spring/three'
+import React, { useState, useRef, useMemo } from "react"
+import { extend, Canvas, useFrame, useThree } from 'react-three-fiber'
 import * as THREE from 'three'
 import OrbitControls from "utils/OrbitControls"
 import { getPointFromAngleAndDistance } from "utils/utils"
@@ -85,7 +84,7 @@ function Controls(props) {
   const { camera, scene } = useThree()
   scene.fog = new THREE.Fog(new THREE.Color("#2c3e50"), 0, 300)
 
-  // useRender(() => ref.current.obj.update())
+  // useFrame(() => ref.current.obj.update())
   return <orbitControls ref={ref} args={[camera]} {...props} />
 }
 
@@ -228,7 +227,7 @@ const Character = ({ index, popularity, house, dateOfBirth, killed, killedBy, is
   const orbit = useRef()
   const areAnyFocusedRef = useRef()
   areAnyFocusedRef.current = areAnyFocused
-  useRender(() => {
+  useFrame(() => {
     if (areAnyFocusedRef.current) return
     theta++
     group.current.rotation.set(

src/components/Articles/HypeCycle/HypeCycle.jsx

@@ -171,7 +171,7 @@ const Controls = () => {
 // function Controls(props) {
 //   const ref = useRef()
 //   const { camera } = useThree()
-//   // useRender(() => ref.current.obj.update())
+//   // useFrame(() => ref.current.obj.update())
 //   return <orbitControls ref={ref} args={[camera]} {...props} />
 // }
 

src/components/Articles/HypeCycle2/HypeCycle.jsx

@@ -1,11 +1,10 @@
 import { forwardRef, useState, useMemo, useEffect, useRef, memo } from 'react';
 import React from "react"
 // import { Extrude } from '@react-three/drei/Extrude'
-import { Text } from '@react-three/drei/Text'
-import { useSpring, a } from 'react-spring/three'
+// import { Text } from '@react-three/drei/Text'
+import { a } from 'react-spring/three'
 import { extend, Canvas, useThree, useFrame } from 'react-three-fiber'
-import { useInterval } from "utils/utils"
-// import { Text } from "troika-three-text";
+import { Text } from "troika-three-text";
 import FlipMove from 'react-flip-move';
 
 import * as THREE from 'three'
@@ -164,7 +163,7 @@ const Controls = () => {
 // function Controls(props) {
 //   const ref = useRef()
 //   const { camera } = useThree()
-//   // useRender(() => ref.current.obj.update())
+//   // useFrame(() => ref.current.obj.update())
 //   return <orbitControls ref={ref} args={[camera]} {...props} />
 // }
 

src/components/Articles/Playground/Playground--old.jsx

@@ -1,10 +1,8 @@
-import React, { Component, useState, usePrevious, useEffect, useRef, useMemo } from "react"
-import { extend, Canvas, useRender, useThree, useUpdate } from 'react-three-fiber'
+import React, { useState, useEffect, useRef, useMemo } from "react"
+import { extend, Canvas, useFrame, useThree } from 'react-three-fiber'
 import { useSpring, animated } from 'react-spring/three'
 import * as THREE from 'three'
 import OrbitControls from "./OrbitControls"
-import numeral from "numeral"
-import domToImage from "dom-to-image"
 import * as d3 from "d3"
 import _ from "lodash"
 
@@ -32,7 +30,7 @@ export default Playground
 function Controls(props) {
   const ref = useRef()
   const { camera } = useThree()
-  // useRender(() => ref.current.obj.update())
+  // useFrame(() => ref.current.obj.update())
   return <orbitControls ref={ref} args={[camera]} {...props} />
 }
 
@@ -132,7 +130,7 @@ const Dogs = () => {
     ]
   }))
   let theta = 0
-  useRender(() => {
+  useFrame(() => {
     const r = 4 * Math.sin(THREE.Math.degToRad((theta += 0.1)))
     group.current.rotation.set(0, 0, r)
     dogs.forEach((dog, i) => {
@@ -170,9 +168,6 @@ const Dogs = () => {
 
 const Dog = ({ position }) => {
 
-  useUpdate(e => {
-    // console.log(e)
-  })
   const { rotation } = useSpring({
     from: {
       rotation: [THREE.Math.degToRad(180), 0, THREE.Math.degToRad(45)],

src/components/Articles/Playground/Playground.jsx

@@ -1,10 +1,8 @@
-import React, { Component, useState, usePrevious, useEffect, useRef, useMemo } from "react"
-import { extend, Canvas, useRender, useThree, useUpdate } from 'react-three-fiber'
+import React, { useState, useEffect, useRef, useMemo } from "react"
+import { extend, Canvas, useFrame, useThree } from 'react-three-fiber'
 import { useSpring, animated } from 'react-spring/three'
 import * as THREE from 'three'
 import OrbitControls from "./OrbitControls"
-import numeral from "numeral"
-import domToImage from "dom-to-image"
 import * as d3 from "d3"
 import _ from "lodash"
 
@@ -34,7 +32,7 @@ function Controls(props) {
   const { camera, scene } = useThree()
   scene.fog = new THREE.Fog(new THREE.Color("#e1eeed"), 0, 20)
 
-  // useRender(() => ref.current.obj.update())
+  // useFrame(() => ref.current.obj.update())
   return <orbitControls ref={ref} args={[camera]} {...props} />
 }
 
@@ -151,10 +149,6 @@ let dogs = _.times(rows * columns, {})
 const Dogs = () => {
   const [rotation, setRotation] = useState(0)
 
-  // useUpdate(() => {
-  //   setRotation(rotation + 1)
-  // })
-
   let group = useRef()
   dogs = _.map(dogs, (dog, i) => ({
     ...dog,
@@ -171,7 +165,7 @@ const Dogs = () => {
     y: -2,
   }))
   let theta = 0
-  useRender(() => {
+  useFrame(() => {
     theta++
     // const y = 4 * Math.sin(THREE.Math.degToRad((theta += 0.1)))
     // group.current.rotation.set(0, 0, r)
@@ -222,9 +216,6 @@ const Dogs = () => {
 const flowerColorScale = d3.interpolateHcl("#FDA7DF", "#FFC312")
 const Dog = ({ position }) => {
 
-  useUpdate(e => {
-    // console.log(e)
-  })
   const { rotation } = useSpring({
     from: {
       rotation: [THREE.Math.degToRad(180), 0, THREE.Math.degToRad(45)],

src/components/Articles/ReactZdog/ReactZdog.1.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef, useMemo } from "react"
-import { Illustration, Anchor, Ellipse, Shape, RoundedRect, useRender } from 'react-zdog'
+import { Illustration, Anchor, Ellipse, Shape, useRender } from 'react-zdog'
 import { a, useSpring } from 'react-spring'
 import _ from "lodash"
 import * as d3 from "d3"

src/components/Articles/ReactZdog/ReactZdog.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef, useMemo } from "react"
-import { Illustration, Anchor, Ellipse, Shape, Hemisphere, RoundedRect, useRender } from 'react-zdog'
+import { Illustration, Anchor, Ellipse, Shape, Hemisphere, useRender } from 'react-zdog'
 import { a, useSpring } from 'react-spring'
 import _ from "lodash"
 import * as d3 from "d3"

src/components/Articles/StephenKing3d/StephenKing3d.jsx

@@ -1,10 +1,9 @@
-import { useState, usePrevious, useEffect, useRef } from 'react';
-import React, {Component} from "react"
-import { extend, Canvas, useRender, useThree } from 'react-three-fiber'
+import { useState, useEffect, useRef } from 'react';
+import React from "react"
+import { extend, Canvas, useThree } from 'react-three-fiber'
 import * as THREE from 'three'
 import OrbitControls from "./OrbitControls"
 import numeral from "numeral"
-import domToImage from "dom-to-image"
 import * as d3 from "d3"
 import _ from "lodash"
 import stephenKingBooks from "./kingBooks"
@@ -120,7 +119,7 @@ export default StephenKing3d
 function Controls(props) {
   const ref = useRef()
   const { camera } = useThree()
-  // useRender(() => ref.current.obj.update())
+  // useFrame(() => ref.current.obj.update())
   return <orbitControls ref={ref} args={[camera]} {...props} />
 }
 

src/components/Articles/WDVP/WDVPBars.jsx

@@ -397,21 +397,21 @@ class WDVPBarsChart extends PureComponent {
       color: 0x666666
     });
 
-    var xGeometry = new THREE.Geometry();
-    xGeometry.vertices.push(
-      new THREE.Vector3( -xAxisLength / 2, 0, -zAxisLength / 2 - barDimension * 4 ),
-      new THREE.Vector3( xAxisLength / 2, 0, -zAxisLength / 2 - barDimension * 4 ),
-    );
-
+    var xGeometry = new THREE.BufferGeometry();
+    const xVertices = new Float32Array([
+      -xAxisLength / 2, 0, -zAxisLength / 2 - barDimension * 4,
+      xAxisLength / 2, 0, -zAxisLength / 2 - barDimension * 4,
+    ]);
+    xGeometry.setAttribute( 'position', new THREE.BufferAttribute( xVertices, 3 ) );
     const xAxis = new THREE.Line( xGeometry, material );
     this.scene.add( xAxis );
 
-    var zGeometry = new THREE.Geometry();
-    zGeometry.vertices.push(
-      new THREE.Vector3( xAxisLength / 2 + barDimension * 4, 0, -zAxisLength / 2 ),
-      new THREE.Vector3( xAxisLength / 2 + barDimension * 4, 0, zAxisLength / 2 ),
-    );
-
+    var zGeometry = new THREE.BufferGeometry();
+    const zVertices = new Float32Array([
+      xAxisLength / 2 + barDimension * 4, 0, -zAxisLength / 2,
+      xAxisLength / 2 + barDimension * 4, 0, zAxisLength / 2,
+    ]);
+    zGeometry.setAttribute( 'position', new THREE.BufferAttribute( zVertices, 3 ) );
     const zAxis = new THREE.Line( zGeometry, material );
     this.scene.add( zAxis );
   }

src/components/Sketches/sketches/Day32.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react'
-import { extend, Canvas, useFrame, useRender, useThree, useUpdate } from 'react-three-fiber'
+import { extend, Canvas, useThree } from 'react-three-fiber'
 import { useSpring, a } from 'react-spring/three'
 import OrbitControls from "utils/OrbitControls"
 import * as THREE from 'three'
@@ -63,7 +63,7 @@ extend({ OrbitControls })
 function Controls(props) {
     const ref = useRef()
     const { camera, scene } = useThree()
-    // useRender(() => ref.current.obj.update())
+    // useFrame(() => ref.current.obj.update())
     scene.fog = new THREE.Fog(new THREE.Color("#f1f2f6"), 60, 230)
 
     return <orbitControls ref={ref} args={[camera]} {...props} />