テクスチャを紹介する前に、ラフネス アトリビュートとメタルネス アトリビュートを紹介しましょう。
粗さ属性はマテリアルの粗さを.roughness示し、0 は滑らかな鏡面反射を示し、1 は完全な拡散反射を.metalness示し、metalness 属性はマテリアルと金属の類似性を示します。木や石などの非金属マテリアルの場合は、0 を使用します。金属の場合は 1 を使用 合格の中間値はありません。さびた金属の外観には、0.0 から 1.0 までの値を使用できます。
前の例では、周囲光のみを追加しました。これは基本的な光源であり、方向がありません。この光源の色は、シーン内の既存のオブジェクトの色に重ね合わされます。このセクションで説明するのは、環境光だけを使用するだけでは、ある程度、適切なレンダリング効果が得られないということです。その前に、元から平行光を入れておきますが、平行光は太陽光に例えることができ、平行光が照らす領域全体が受ける光の強さは同じです。
// 灯光
const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);
// 直线光源
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(10, 10, 10);
scene.add(directionalLight);
次に、滑らかな鏡面反射効果を見てみましょう。
const material = new THREE.MeshStandardMaterial({map: doorColorTexture,transparent: true,alphaMap: doorAlphaTexture,aoMap: doorAOTexture,side: THREE.DoubleSide,displacementMap: doorHeightTexture,displacementScale: 0.05,roughness: 0
});
物体の表面が平行光を直接発していることが分かります。roughnessを 1 に設定すると、どのように調整しても上記のミラー効果は見られませんが、1 に設定するroughnessと拡散反射が行われるため、興味のある学生は試してみてください。
プロジェクトでオブジェクト全体が滑らかまたは粗い場合、テクスチャは必要ありませんが、実際のプロジェクトでは、多くの場合、オブジェクトの一部を滑らかにする必要があり、他の部分は粗く、粗さは同じではありません。したがって、粗いオブジェクトに光沢のある部分を指定したい場合は、metalnessMapアトリビュート(逆に、滑らかなオブジェクトにいくつかの粗い部分を指定したい場合は、属性にテクスチャ マップを使用できます)。roughnessMap属性)
const textureLoader = new THREE.TextureLoader();
const roughnessTexture = textureLoader.load(roughness);
const material = new THREE.MeshStandardMaterial({map: doorColorTexture,transparent: true,alphaMap: doorAlphaTexture,aoMap: doorAOTexture,side: THREE.DoubleSide,displacementMap: doorHeightTexture,displacementScale: 0.05,roughness: 1,roughnessMap: roughnessTexture
});
モデル上の特定の位置では、 2 つのmetalnessプロパティの実際の値は、プロパティ値自体と対応するマップの値の積に等しくなります。roughness上記のコードは、次の図に示す効果を生成します。
ドアの主要部分が鏡面になっていて、ドアのタイトルページが錆びて完全に反映されていないことがわかります〜
metalness使い方は とroughnessまったく、ここでは説明しません。
やっと
フロントエンド情報パッケージは、すべての人に用意されています。54冊、2.57Gフロントエンド関連の電子書籍「フロントエンドインタビュー集（回答・分析付き）」、難解・要点解説動画チュートリアル（フルセット）を収録。
困っている友達は、下のカードをクリックして無料で受け取り、共有できます