Search code examples
javascripturlthree.jsconstantsvar

How to load Images for a separate url threejs

Total noob here. I'm learning threejs and I'm trying to load a texture to a cylinder from a separate directory on the web. Hopefully, someone can point out what is wrong with the code:

var geometry = new THREE.CylinderBufferGeometry( 17, 17, 30, 35 );
            var material = new THREE.MeshLambertMaterial( );
            var cylinder = new THREE.Mesh( geometry, material );

            const myUrl = 'https://user-images.githubusercontent.com/29174429/84787863-87516080-afff-11ea-9dca-3ed8d32d7b41.jpg'

            const textureLoader = new THREE.TextureLoader()
            textureLoader.crossOrigin = "Anonymous"
            const myTexture = textureLoader.load(myUrl)

            cylinder.material.map(myTexture)

Thanks.

Solution

  • cylinder.material.map(myTexture)

    It should be:

    cylinder.material.map = myTexture;

    Material.map is a property, not a method. Besides, the default value of TextureLoader.crossOrigin is already anonymous.