Загрузка текстур three js и react

В попытках выучить threeJS и найти годный контент начал учить по старому es5 синтаксису и столкнулся с проблемой... в чем разница между данными строками?И Какой вариант производительней?

1) const cube_texture = new THREE.TextureLoader().load(textureBox);

2) const texture = new THREE.ImageUtils.loadTexture(textureBox);

По коду....

import React, { Component } from "react";
import './App.css'
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import textureBox from './Assets/textureBox.jpg'

const style = {
  height: "100vh",
};

class App extends Component {

  state = {
    texture: null,
}

  componentDidMount() {
    this.sceneSetup();
    this.addCustomSceneObjects();
    this.startAnimationLoop();
    window.addEventListener("resize", this.handleWindowResize);
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.handleWindowResize);
    window.cancelAnimationFrame(this.requestID);
    this.controls.dispose();
  }


  sceneSetup = () => {
    // get container dimensions and use them for scene sizing
    const width = this.el.clientWidth;
    const height = this.el.clientHeight;

    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(
      60, // fov = field of view  
      width / height, // aspect ratio   
      1, 
      10000 
    );
    // this.camera.position.z = 500; 
    this.camera.position.set(0,0,1000);

    this.controls = new OrbitControls(this.camera, this.el);
    this.renderer = new THREE.WebGLRenderer();
    this.renderer.setSize(width, height);
    this.el.appendChild(this.renderer.domElement); // mount using React ref
  };


  addCustomSceneObjects = () => {

    // Куб
    const geometry = new THREE.CubeGeometry(500, 500, 500);
    // const cube_texture = new THREE.TextureLoader().load(textureBox); // 1 вариант загрузки текстуры
    const texture = new THREE.ImageUtils.loadTexture(textureBox);      // 2 вариант загрузки текстуры
    // const material = new THREE.MeshNormalMaterial();
    const material = new THREE.MeshBasicMaterial({map: texture, overdraw: true});
    this.cube = new THREE.Mesh(geometry, material);

    this.scene.add(this.cube);

  };

  startAnimationLoop = () => {
    this.cube.rotation.x += 0.01;
    this.cube.rotation.y += 0.01;




    this.renderer.render(this.scene, this.camera);
    this.requestID = window.requestAnimationFrame(this.startAnimationLoop);
  };

  handleWindowResize = () => {
    const width = this.el.clientWidth;
    const height = this.el.clientHeight;

    this.renderer.setSize(width, height);
    this.camera.aspect = width / height;

    this.camera.updateProjectionMatrix();
  };

  render() {
    return <div style={style} ref={ref => (this.el = ref)} />;
  }
}