Threes.js入門篇之8 - 材質與紋理

allenjiao發表於2018-03-14
JS

 材質是指幾何對應的 顏色資訊，想讓一個物件最終呈現出你所希望的樣子，其中最重要的一個因素就是材質。

       來看一下例子 “canvas_material.html”

[html] view plain copy
  1. // Spheres  
  2. var geometry = new THREE.SphereGeometry( 100, 14, 7 );  
  3. var textureLoader = new THREE.TextureLoader();  
  4.   
  5. var earthTexture = textureLoader.load( 'textures/land_ocean_ice_cloud_2048.jpg' );  // 地球紋理載入  
  6.   
  7. var envMap = textureLoader.load( 'textures/envmap.png' );                           // 環境貼圖載入  
  8. envMap.mapping = THREE.SphericalReflectionMapping;  
  9.   
  10. var materials = [  
  11.   
  12.     new THREE.MeshBasicMaterial( { color: 0x00ffff, wireframe: true, side: THREE.DoubleSide } ),  // 顏色材質  
  13.     new THREE.MeshBasicMaterial( { color: 0xff0000, blending: THREE.AdditiveBlending } ),  
  14.     new THREE.MeshLambertMaterial( { color: 0xffffff, overdraw: 0.5 } ),  
  15.     new THREE.MeshLambertMaterial( { color: 0xffffff, overdraw: 0.5 } ),  
  16.     new THREE.MeshNormalMaterial( { overdraw: 0.5 } ),  
  17.     new THREE.MeshBasicMaterial( { map: earthTexture } ),                                         // 紋理  
  18.     new THREE.MeshBasicMaterial( { envMap: envMap, overdraw: 0.5 } )                              // 紋理  
  19.   
  20. ];  

       對應效果：

        

相關文章