Forge Viewer Autodesk v7 THREE.Material: 'map' parameter is undefined in THREE.PointCloudMaterial

Question

FINAL EDIT: Using THREE.PointCloudMaterial is broken in Autodesk Forge Viewer v7. Stick to THREE.ShaderMaterial.

EDIT: The Forge Viewer I'm using has customized version of Three.js release r71 (source) which is why I'm using outdated code.

EDIT2: I think the issue might be because map wants to use THREE.ImageUtils.loadTexture() instead of THREE.TextureLoader? When I use THREE.ImageUtils.loadTexture() I get a new problem where the image is undefined. Guessing it has to do with a callback function?

EDIT3: THREE.Material: 'map' parameter is undefined goes away with Petr's answer, but the texture still isn't seen in Forge Viewer:

Might be an issue related to WebGL RENDER WARNING: there is no texture bound to the unit 0?

Code (sorry for the mess):

var PointMaterial = new THREE.PointCloudMaterial({
            color: 0xFF0000,
            size: 5,
            map: "",
        })
new THREE.TextureLoader().load( '../img/epidemics.png', function onLoad(tex) {
            PointMaterial.map = tex;
          });
var geom = new THREE.Geometry(0.5, 0.5, 0.5);
let up_to_down = -4.5
    for (let i = 0; i < 10; i++) {
         let left_to_right = -4.5
         for (let j = 0; j < 10; j++) {
              for (let k = 0; k < 100; k++) {
              var vertex = new THREE.Vector3();
              vertex.x = Math.random() * ((-0.5 + left_to_right) - (0.5 + left_to_right)) + (0.5+left_to_right);
              vertex.y = 0;
              vertex.z = Math.random() * ((-0.5 + up_to_down) - (0.5 + up_to_down)) + (0.5 + up_to_down);
              geom.vertices.push(vertex);
                }
            }
        }
var particles = new THREE.PointCloud(geom, PointMaterial);

Edits stop here

My goal is to introduce texture to my BoxGeometry Point Clouds.

Whenever I run the following code (or any code that uses map for texture), I get a warning in the console.

let geometryForShapes = new THREE.BoxGeometry( 1, 1, 1 );
var materialForShapes = new THREE.PointCloudMaterial({
            map: new THREE.TextureLoader().load( '../data/toppng.com-particles-3000x2000.png' ),
            color: 0xffff00,
            transparent: false,
            opacity: 0.9,
            size: 10,
        })
particles = new THREE.PointCloud( geometryForShapes, materialForShapes )

Console output: THREE.Material: 'map' parameter is undefined

r121 documentation (I'm stuck on r71):

PointsMaterial Doc

Texture Doc

My question is, was the fault on me for using PointCloudMaterial? Is this a bug? Do I need to import something?

Answer 1

The THREE.Material: 'map' parameter is undefined error is coming from three.js, and it's related to this line of code:

map: new THREE.TextureLoader().load( '../data/toppng.com-particles-3000x2000.png' ),

The load method in three.js R71 does not return anything. The loaded texture must be retrieved from a callback function, e.g., like so:

var materialForShapes = new THREE.PointCloudMaterial({
            map: ,
            color: 0xffff00,
            transparent: false,
            opacity: 0.9,
            size: 10,
        });

new THREE.TextureLoader().load( '../data/toppng.com-particles-3000x2000.png', function onLoad(tex) {
  materialForShapes.map = tex;
});