序文
材料は、オブジェクトの頂点情報に依存しないレンダリング効果に関連するプロパティです。素材を設定することにより、オブジェクトの色、テクスチャマップ、照明モードなどを変更できます。
meshbasicmaterial：光感はありません。ジオメトリにシンプルな色またはディスプレイワイヤーフレームを与えます。
MeshlambertMaterial：この素材は光に反応し、薄暗いオブジェクトと非照度オブジェクトを作成するために使用されます。
MeshphongMaterial：この材料は光にも反応し、明るい金属オブジェクトを作成するために使用されます。
1。基本材料
基本的な材料オブジェクトを使用します。レンダリング後のオブジェクトの色は、常に照明による明かりや暗い効果のない素材の色です。指定された素材に色がない場合、色はランダムです。そのコンストラクターは次のとおりです。
3.meshlambertmaterial（opt）
その中で、OPTをデフォルトするか、各属性を含む値です。たとえば、不透明度が0.75の新しい黄色の素材を作成します。
新しい3.meshbasicmaterial（{color：0xffff00、Opacity：0.75}）;キューブに適用します（「3.js学習ジオメトリ」を参照してください。効果は次のとおりです。
ソースコード：
<！Doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.jsテスト7.1 </title> </head> <body onload = "init（）"> <canvas = "maincanvas"> </canvas> </body> <script = "text/javascript" src = ">" type = "text/javascript"> function init（）{var renderer = new 3.webglrenderer（{canvas：document.getElementbyId（ 'maincanvas'）}）; renderer.setClearColor（0x0000000）; varシーン= new 3.scene（）; //カメラvarカメラ= new 3.othographiccamera（-5、5、3.75、-3.75、0.1、100）; camera.position.set（25、25、25）; camera.lookat（new 3.Vector3（0、0、0））; shene.add（カメラ）; // light var light = new 3.pointlight（0xffffff、1、100）; light.position.set（10、15、5）; shene.add（light）; var material = new 3.meshbasicmaterial（{color：0xffff00、ofacity：0.75}）; var cube = new 3.mesh（new 3.CubeGeometry（5、5、5）、材料）; shene.add（cube）; renderer.render（シーン、カメラ）; } </script> </html>より一般的に使用されるいくつかの基本的な特性：
・見る：それが見えるかどうか、デフォルトは真です
・サイド：顔の前面または背面をレンダリングします。デフォルトはフロント3.Frontsideで、背面3に設定できます。
・ワイヤフレーム：顔の代わりに線をレンダリングするかどうか、デフォルトでfalse
・色： 16進RGBの色、赤が0xff0000として表されている場合
・マップ：テクスチャマップを使用します
基本的な素材の場合、シーン内の光源が変更されたとしても、その素材を使用するオブジェクトは、常にどこでも色に同じ効果があります。もちろん、これはそれほど現実的ではないため、ランバート照明モデルとフォン照明モデルという、より現実的な照明モデルを紹介します。
2。ランバー素材とフォン素材
Lambert Material（MeshlambertMaterial）は、ランバート照明モデルに準拠する材料です。ランバート照明モデルの主な特徴は、拡散反射のみを考慮しているが、鏡面反射の効果を考慮しないことです。したがって、鏡面反射を必要とする金属やミラーなどのオブジェクトには適しておらず、他のほとんどのオブジェクトの拡散反射効果に適しています。
照明モデルの式は次のとおりです。
Idiffuse = kd * id * cos（theta）
その中でも、Idiffuseは光の拡散強度、KDはオブジェクト表面の拡散反射属性、IDは光強度、シータは光の入射角アークです。
もちろん、Three.jsを使用したLambertの素材の場合、上記の式を直接使用する必要はありません。
黄色のランバート素材を作成する方法は次のとおりです。
新しい3.meshlambertmaterial（{color：0xffff00}）照明を使用した後、次の効果が得られます。
色は、散在する光を反映する材料の能力を表現するために使用され、材料の色を設定するために最も一般的に使用される属性でもあります。さらに、材料の色を制御するためにアンビエントと放射性を使用することもできます。
アンビエントは、周囲光への反射能力を表します。この値は、Ambientlightが設定されている場合にのみ有効です。周囲光に対する材料の反射能力には、材料の実際の色を得るために周囲光強度を掛けます。
Emissiveは、光源の色を表現するために使用できる材料の自己微量の色です。光源ではなく、光の影響を受けない色です。赤だけの自己微妙さ：
新しい3.meshlambertmaterial（{emitsive：0xff0000}）効果は次のとおりです。
赤い自己微量と黄色の散乱光の両方を使用する場合：
新しい3.meshlambertmaterial（{color：0xffff00、emitive：0xff0000}）効果は次のとおりです。
球の影響：
ランバー素材のユニークな特性を要約してください。
アンビエント：材料の周囲の色を設定し、アンビエントライトの光源で使用します。この色には、周囲の明るい色が掛けられます。つまり、光源に反応します。
放射性：光源ではなく、光源ではなく、光の影響を受けない色を材料によって放出した色を設定します。デフォルトは黒です。
ソースコード：
<！Doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js test7.2 </title> </head> <body onload = "init（）"> <canvas id = "maincanvas"> </canvas> </body> <script = "text/javascript" src = "> <script type = "text/javascript"> function init（）{var renderer = new 3.webglrenderer（{canvas：document.getElementbyId（ 'maincanvas'）}）; renderer.setClearColor（0x0000000）; varシーン= new 3.scene（）; //カメラvarカメラ= new 3.othographiccamera（-5、5、3.75、-3.75、0.1、100）; camera.position.set（25、25、25）; camera.lookat（new 3.Vector3（0、0、0））; shene.add（カメラ）; // light var light = new 3.pointlight（0xffffff、1、100）; light.position.set（10、15、5）; shene.add（light）; var material = new 3.meshlambertmaterial（{color：0xffff00、emivity：0xff0000}）; var cube = new 3.mesh（new 3.CubeGeometry（5、5、5）、材料）; sean.add（cube）; // var sphere = new 3.mesh（new 3.SphereGeometry（3、20、8）、Material）; // scene.add（Sphere）; renderer.render（シーン、カメラ）; } </script> </html>3.Phong素材
Phong Material（MeshphongMaterial）は、フォン照明モデルに準拠する材料です。ランバートとは異なり、フォンモデルは鏡面反射の効果を考慮しているため、特に金属と鏡の性能に適しています。
拡散反射部分とランバート照明モデルは同じであり、鏡面反射部分のモデルは次のとおりです。
Ispecular = Ks * Is * (cos(alpha)) ^ n
その中でも、診断は鏡面表面に反射される光強度、ksは材料表面の鏡面反射係数であり、光源の強度であり、アルファは反射光と視線の間の角度、nはハイライトインデックス、ハイライトスポットが大きいほどハイライトスポットが大きいほど高ライトインデックスです。
拡散反射部分はランバートモデルと一致するため、鏡面反射係数が指定されていないが、びまん性反射のみが設定されている場合、効果はランバートと同じです。
新しい3.meshphongmaterial（{color：0xffff00}）;同様に、放射性値と周囲値の両方を指定でき、ここでは説明しません。鏡面反射係数を以下に指定します。まず、鏡面反射のみを使用し、ハイライトを赤に設定し、球体に適用します。
var Material = new 3.meshphongmaterial（{petular：0xff0000}）; var sphere = new 3.mesh（new 3.SphereGeometry（3、20、8）、材料）;効果は次のとおりです。
照明モデルのn値は、Shininess属性を介して制御できます。光沢値が大きい場合、ハイライトのスポットが小さく、デフォルト値は30です。1000に設定すると：
新しい3.meshphongmaterial（{specular：0xff0000、Shininess：1000}）;効果は次のとおりです。
黄色の鏡の光、赤い散乱光を使用してください：
Material = new 3.meshphongmaterial（{color：0xff0000、鏡面：0xffff00、Shininess：100}）;フォン素材のユニークな特性を要約してください。
アンビエント：材料の周囲の色を設定し、アンビエントライトの光源で使用します。この色には、周囲の明るい色が掛けられます。つまり、光源に反応します。
放射性：光源ではなく、光源ではなく、光の影響を受けない色を材料によって放出した色を設定します。デフォルトは黒です
鏡面：材料の明るさとハイライトの色を指定します。色のプロパティと同じ色に設定すると、別の金属のような材料が得られます。灰色の灰色に設定すると、プラスチックのように見えます。
Shininess：ハイライトパーツの明るさを指定します。デフォルト値は30です。
ソースコード：
< <script type = "text/javascript"> function init（）{var renderer = new 3.webglrenderer（{canvas：document.getElementbyId（ 'maincanvas'）}）; renderer.setClearColor（0x0000000）; varシーン= new 3.scene（）; //カメラvarカメラ= new 3.othographiccamera（-5、5、3.75、-3.75、0.1、100）; camera.position.set（25、25、25）; camera.lookat（new 3.Vector3（0、0、0））; shene.add（カメラ）; // light var light = new 3.pointlight（0xffffff、1、200）; light.position.set（10、15、25）; shene.add（light）; var material = new 3.meshphongmaterial（{//鏡面：0xff0000、color：0xff0000、鏡面：0xffff00、shininess：100}）; // var cube = new 3.mesh（new Three 3.CubeGeometry（5、5、5）、Material）; // shene.add（cube）; var Sphere = new Three.mesh（new 3.Spheregeometry（3、20、8）、Material）; scene.add（球体）; renderer.render（シーン、カメラ）; } </script> </html>要約します
この記事の内容はここで終わります。この記事では、詳細な例と写真を通じて、3.jsでLamberとPhongを紹介します。みんなの学習に役立つことを願っています。編集者は、3つのJSの関連記事を次々と整理します。 Three.jsに興味がある友人は、wulin.comを引き続きサポートしてください。