Попытка вывести изображение на сферу - PullRequest
Новая
       23

Попытка вывести изображение на сферу

0 голосов
/ 30 сентября 2019

Я пытаюсь отобразить изображение на сфере с помощью 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;
...