Trying to display image on sphere

Question

I am trying to display an image on the sphere using Three.js,unfortunately it shows the background but without the sphere, how do I display the image on the sphere? Thanks for your time

code below:

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;

Here is your most of your code as a fiddle https://jsfiddle.net/bra7u5k3/1/. Do you see any error messages in your browser console when executing your react app? — Mugen87, Sep 30 '19 at 17:33
I have tried translating your mock up to a react class and it gives the same result — Camille Basbous, Sep 30 '19 at 17:47
Sorry @Mugen87 but its actually not working with the image I want to display, its a jpeg image in my images file './images/img.jpeg' — Camille Basbous, Sep 30 '19 at 17:59
Can you please verify if the image is actually loaded? If you get a black screen with the fiddle's code, this is most likely the issue. — Mugen87, Sep 30 '19 at 19:05
localhost/:1 Access to image at 'https://www.jakpost.travel/wimages/large/3-34106_4k-space-wallpaper-4k-space-desktop-backgrounds.png' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. — Camille Basbous, Sep 30 '19 at 20:18
Then try to load the app with all resources over the same domain. In your case, download the image and host in on your local web server. — Mugen87, Sep 30 '19 at 21:06

Trying to display image on sphere

0 Answers0