需要React-three-renderer动画和补间解决方案

Question

正确地以react-three-renderer方式进行转换。

运动，颜色变化，状态转换等。

需要清洁解决方案。非CSS。

可以做些什么？

import React from 'react';
import React3 from 'react-three-renderer';
import * as THREE from 'three';
import ReactDOM from 'react-dom';

import { connect } from 'react-redux';

import Mesh from './Mesh.js';

import './Overlay.css';

class Overlay extends React.Component {
  constructor(props, context) {
    super(props, context);
    var angle1 = 1.5;

    this.cameraPosition = new THREE.Vector3(0, 0, 5);
    this.meshPositions = [];

    this.state = {
      meshQuantity: 50,
      groupRotation: new THREE.Euler(0, 0, 0.45),
      material: {
        wireframe: false
      },
      geometry: {
        height: 0.03,
        width: 1
      },
      groupPosition: new THREE.Vector3(-25, -25, 0)
    };

    for (let i = 0; i < this.state.meshQuantity; i++) {
      angle1 += 0.005;
      var multi = Math.abs(Math.cos(angle1));
      let mp = new THREE.Vector3(0, 0, 0);
      mp.x = 20 * Math.random();
      mp.y = 20 * Math.random();
      mp.z = 0;
      mp.id = i;
      this.meshPositions[i] = mp;
    }

    setInterval(
      function() {
        this.state.groupPosition = new THREE.Vector3(-25, -25, 0);
      }.bind(this),
      13000
    );

    this._onAnimate = time => {
      console.log(tweenFunctions.linear(10, 1, 10, 10));
      this.setState({
        groupPosition: new THREE.Vector3(
          this.state.groupPosition.x + 0.07,
          this.state.groupPosition.y + 0.04,
          0
        )
      });
      angle1 += 0.005;
      var multi = Math.abs(Math.cos(angle1));
      this.state.geometry.width = multi * 70;
    };
  }

  render() {
    const width = window.innerWidth; // canvas width
    const height = window.innerHeight; // canvas height
    return (
      <React3
        mainCamera="camera" // this points to the perspectiveCamera which has the name set to "camera" below
        width={width}
        height={height}
        clearColor={this.props.colorBackground}
        antialias={true}
        pixelRatio={1}
        onAnimate={this._onAnimate}>
        <resources>
          <meshBasicMaterial
            resourceId="materialONE"
            color={this.props.color}
          />
        </resources>
        <scene>

          <perspectiveCamera
            name="camera"
            fov={110}
            aspect={width / height}
            near={0.1}
            far={100}
            position={this.cameraPosition}
          />
          <group
            position={this.state.groupPosition}
            rotation={this.state.groupRotation}>
            {this.meshPositions.map(meshPositions => (
              <Mesh
                key={meshPositions.id}
                position={meshPositions}
                resId={'materialONE'}
                geometry={this.state.geometry}
              />
            ))}

          </group>
        </scene>
      </React3>
    );
  }
}

function mapStateToProps(state) {
  return {
    color: state.itemClick.color.colorLine,
    colorBackground: state.itemClick.color.colorBackground
  };
}

export default connect(mapStateToProps)(Overlay);