Using textures in THREE js

Question

I am starting with THREE js  and I am trying to draw a rectangle with a texture on it  lit by a single source of light  I think this is as simple as it gets  HTML omitted for brevity    function loadScene         var world   document getElementById  world            WIDTH   1200          HEIGHT   500          VIEW ANGLE   45          ASPECT   WIDTH   HEIGHT          NEAR   0 1          FAR   10000           renderer   new THREE WebGLRenderer            camera   new THREE Camera VIEW ANGLE  ASPECT  NEAR  FAR           scene   new THREE Scene            texture   THREE ImageUtils loadTexture  crate gif            material   new THREE MeshBasicMaterial  map  texture               material   new THREE MeshPhongMaterial  color  0xCC0000            geometry   new THREE PlaneGeometry 100  100           mesh   new THREE Mesh geometry  material           pointLight   new THREE PointLight 0xFFFFFF        camera position z   200          renderer setSize WIDTH  HEIGHT       scene addChild mesh       world appendChild renderer domElement       pointLight position x   50      pointLight position y   50      pointLight position z   130      scene addLight pointLight        renderer render scene  camera       The problem is  I cannot see anything  If I change the material and use the commented one  a square appears as I would expect  Note that   The texture is 256x256  so its sides are power of two The function is actually called when the body is loaded  indeed it works with a different material  It does not work even if I serve the file from a webserver  so it is not an issue of cross-domain policy not allowing to load the image    What I am I doing wrong

User · Accepted Answer

By the time the image is loaded  the renderer has already drawn the scene  hence it is too late  The solution is to change  texture   THREE ImageUtils loadTexture  crate gif      into  texture   THREE ImageUtils loadTexture  crate gif       function         renderer render scene

User · Answer

In version r82 of Three js TextureLoader is the object to use for loading a texture   Loading one texture  source code  demo   Extract  test js    var scene   new THREE Scene    var ratio   window innerWidth   window innerHeight  var camera   new THREE PerspectiveCamera 75  window innerWidth   window innerHeight    0 1  50    var renderer                      Will be called when load completes     The argument will be the loaded texture      var onLoad   function  texture      var objGeometry   new THREE BoxGeometry 20  20  20     var objMaterial   new THREE MeshPhongMaterial       map  texture      shading  THREE FlatShading          var mesh   new THREE Mesh objGeometry  objMaterial      scene add mesh      var render   function          requestAnimationFrame render        mesh rotation x    0 010      mesh rotation y    0 010       renderer render scene  camera           render          Function called when download progresses var onProgress   function  xhr      console log  xhr loaded   xhr total   100       loaded           Function called when download errors var onError   function  xhr      console log  An error happened        var loader   new THREE TextureLoader    loader load  texture jpg   onLoad  onProgress  onError     Loading multiple textures  source code  demo   In this example the textures are loaded inside the constructor of the mesh  multiple texture are loaded using Promises   Extract  Globe js    Create a new container using Object3D for having two meshes in the same container   var Globe   function  radius  segments       THREE Object3D call this      this name    Globe      var that   this        instantiate a loader   var loader   new THREE TextureLoader      A map called textures where every object contains the url of a texture file and val for storing the value of a Three js texture object        earth textures   var textures          map           url   relief jpg         val  undefined             bumpMap           url   elev bump 4k jpg         val  undefined             specularMap           url   wateretopo png         val  undefined              The array of promises  for each object in the map called textures push a new Promise in the array texturePromises  every Promise will call loader load  If the value of entry val is a valid THREE Texture object  then resolve the promise     var texturePromises       path            for  var key in textures        texturePromises push new Promise  resolve  reject    gt          var entry   textures key        var url   path   entry url        loader load url          texture   gt              entry val   texture            if  entry val instanceof THREE Texture  resolve entry                      xhr   gt              console log url          xhr loaded   xhr total   100                   loaded                       xhr   gt              reject new Error xhr                An error occurred loading while loading                  entry url                                      Promise all takes the promise array texturePromises as argument  Doing so makes the browser wait for all the promises to resolve  when they do we can load the geometry and the material        load the geometry and the textures   Promise all texturePromises  then loadedTextures   gt         var geometry   new THREE SphereGeometry radius  segments  segments       var material   new THREE MeshPhongMaterial         map  textures map val        bumpMap  textures bumpMap val        bumpScale  0 005        specularMap  textures specularMap val        specular  new THREE Color  grey                var earth   that earth   new THREE Mesh geometry  material       that add earth           For the cloud sphere only one texture is necessary        clouds   loader load  n amer clouds png   map   gt        var geometry   new THREE SphereGeometry radius    05  segments  segments       var material   new THREE MeshPhongMaterial         map  map        transparent  true              var clouds   that clouds   new THREE Mesh geometry  material       that add clouds            Globe prototype   Object create THREE Object3D prototype   Globe prototype constructor   Globe

User · Answer

In version r75 of three js  you should use   var loader   new THREE TextureLoader    loader load  texture png   function   texture       var geometry   new THREE SphereGeometry 1000  20  20     var material   new THREE MeshBasicMaterial  map  texture  overdraw  0 5      var mesh   new THREE Mesh geometry  material     scene add mesh

User · Answer

Use TextureLoader to load a image as texture and then simply apply that texture to scene background       new THREE TextureLoader         loader load  https   images pexels com photos 1205301 pexels-photo-1205301 jpeg    function texture                                     scene background   texture                          Result    https   codepen io hiteshsahu pen jpGLpq editors 0011  See the Pen Flat Earth Three JS by Hitesh  Sahu   hiteshsahu  on CodePen

User · Answer

Andrea solution is absolutely right  I will just write another implementation based on the same idea  If you took a look at the THREE ImageUtils loadTexture   source you will find it uses the javascript Image object  The   window  load event is fired after all Images are loaded   so at that event we can render our scene with the textures already loaded      CoffeeScript    document  ready - gt       material   new THREE MeshLambertMaterial map  THREE ImageUtils loadTexture  crate gif         sphere     new THREE Mesh new THREE SphereGeometry radius  segments  rings   material         window  load - gt          renderer render scene  camera  JavaScript    document  ready function          material   new THREE MeshLambertMaterial   map  THREE ImageUtils loadTexture  crate gif            sphere   new THREE Mesh new THREE SphereGeometry radius  segments  rings   material          window  load function             renderer render scene  camera                  Thanks

User · Answer

Without Error Handeling    Load background texture  new THREE TextureLoader    loader load  https   images pexels com photos 1205301 pexels-photo-1205301 jpeg    function texture                             scene background   texture                      With Error Handling     Function called when download progresses var onProgress   function  xhr      console log  xhr loaded   xhr total   100       loaded           Function called when download errors var onError   function  error      console log  An error happened  error         Function  called when load completes  var onLoad   function  texture      var objGeometry   new THREE BoxGeometry 30  30  30     var objMaterial   new THREE MeshPhongMaterial       map  texture      shading  THREE FlatShading          var boxMesh   new THREE Mesh objGeometry  objMaterial     scene add boxMesh      var render   function          requestAnimationFrame render       boxMesh rotation x    0 010      boxMesh rotation y    0 010        sphereMesh rotation y    0 1      renderer render scene  camera           render          LOAD TEXTURE and on completion apply it on box var loader   new THREE TextureLoader        loader load  https   upload wikimedia org wikipedia commons thumb 9 97 The Earth seen from Apollo 17 jpg 1920px-The Earth seen from Apollo 17 jpg                    onLoad                   onProgress                   onError     Result     https   codepen io hiteshsahu pen jpGLpq

[javascript] Using textures in THREE.js

Examples related to javascript

Examples related to three.js