试图在球体上显示图像

Question

我正在尝试使用Three.js在球上显示图像，不幸的是它显示背景但没有球，如何在球上显示图像？谢谢您的时间

下面的代码：

import React, {Component} from 'react';
import * as THREE from "three";
import './App.css';
import './style.css'

class App extends Component{

  componentDidMount() {
    var scene = new THREE.Scene();
    var texture = new THREE.TextureLoader().load( ('./images/img.jpeg') )
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    // document.body.appendChild( renderer.domElement );
    // use ref as a mount point of the Three.js scene instead of the document.body
    this.mount.appendChild( renderer.domElement );

    var geometry = new THREE.SphereGeometry( 40, 40, 40 );
    var material = new THREE.MeshBasicMaterial( { map: texture } );
    var sphere = new THREE.Mesh( geometry, material );
    scene.add( sphere );
    camera.position.z = 400;

    var animate = function () {
      requestAnimationFrame( animate );
      sphere.rotation.z -= 0.01;
      sphere.rotation.z -= 0.01;

      renderer.render( scene, camera );
    };
    animate();
  }
render(){

  return (

    <div ref={ref => (this.mount = ref)} />


)}}

export default App;