Materials

One of the things that make 3D renderings interesting and eye-catching is the variety of materials that you can create. Materials change how light is reflected off of a 3D object and can include color, texture, refraction, diffusion, and other characteristics of surfaces.

See ExtrudeGeometry in the THREE.js documentation.

The CM3LayerVector provides a basic material that allows you to set the color and transparency using the "rgba()" function we have used before. The material is defined as:

var TheMaterial= new THREE.MeshPhongMaterial( { 
 color: TheColor ,
 opacity:opacity,
 transparent :transparent
 } ) ;
 

There are a number of other THREE.js material classes you can use to create materials for your vector data. There is a list at the THREE.js documentation and you might want to try out MeshPhysicalMaterial and MeshStandardMaterial. You can create your own materials and then use the following functions to set the material for an entire vector dataset or each individual feature.

TheLayer.SetMaterial(TheMaterial) // proviate one THREE.js material for all the features in the layer 

TheLayer.SetFeatureMaterials(TheMaterials) // provide an array of materials that match the order of the features in the array 

Setting Custom Materials for Each Feature in a Layer

 
   var TheMaterials=[];
   for (var i=0;i<NumFeatures;i++)
   {
   var HSL=Math.random()*360;
   var Saturation=70.0; //Math.random()*100;
   var Lightness=80.0; //Math.random()*100;
     
   /*			var diffuseColor = new THREE.Color().setHSL( HSL/360, Saturation/100, Lightness/100 );
   var material = new THREE.MeshLambertMaterial( {
   color: diffuseColor,
   reflectivity: 0.5, // 0 to 1
   } );
   TheMaterials.push(material);
   */ 
   this.SetFeatureSetting("Style","fillStyle",i,"hsl("+HSL+","+Saturation+"%,"+Lightness+"%)");
   }
   //		TheLayer.SetFeatureMaterials(TheMaterials);
   //TheLayer.SetMaterial(material);