Test de fonction de carte d'environnement
MeshPhysicalMaterialCouche de vernis
MeshPhysicalMaterialet MeshStandarMaterialsont tous deux des matériaux PBR avec des attributs de métallicité metalnesset de rugosité . Ils constituent un sous-ensemble de matériaux PBR. En plus d'hériter de ces attributs, ils ajoutent également du vernis, de la transmission de la lumière, de la réflectivité, de la brillance, de l'indice de réfraction, etc.roughnessMeshPhysicalMaterialMeshStandarMaterial
Propriétés de la couche de vernis.clearcoat
L'attribut de couche de vernis .clearcoatpeut être utilisé pour simuler une couche de moule transparent brossé sur la surface de l'objet. .clearcoatLa plage est de 0 à 1 et la valeur par défaut est 0.
const material = new THREE.MeshPhysicalMaterial( {
clearcoat: 1.0,//物体表面清漆层或者说透明涂层的厚度
} );
À propos du matériau MeshPhysicalMaterial
MeshPhysicalMaterialIl s'agit d'un type de matériau dans Three.js. Il s'agit d'un matériau de rendu physique (PBR) qui peut simuler l'éclairage et la réflexion des matériaux dans le monde réel. Il prend en charge les matériaux métalliques et non métalliques et peut définir des attributs tels que la rugosité, la métallicité, l'occlusion ambiante, la carte normale et la carte de déplacement pour obtenir des effets de rendu plus réalistes. MeshPhysicalMaterialIl prend également en charge la réflexion spéculaire et la transparence, qui peuvent être utilisées pour créer du verre, de l'eau, du métal et d'autres matériaux réalistes. Lors de son utilisation MeshPhysicalMaterial, vous devez noter qu'il nécessite une grande quantité de calculs et peut affecter les performances, il doit donc être optimisé en fonction de la situation réelle.
Rugosité de la couche de vernis.clearcoatRoughness
Fait référence à la plage de rugosité de la couche transparente de surface est de 0 à 1.
scènes à utiliser
Cet effet peut être utilisé pour fabriquer des modèles de voitures, tels que des fenêtres, des boîtiers, du verre, etc. Vous pouvez simuler
l'effet de peinture de carrosserie de voiture grâce aux propriétés de la couche de vernis .clearcoatet aux propriétés de rugosité de la couche de vernis du matériau PBR.clearcoatRoughness
const mesh = gltf.scene.getObjectByName('外壳');
mesh.material = new THREE.MeshPhysicalMaterial( {
clearcoat: 1.0,//物体表面清漆层或者说透明涂层的厚度
clearcoatRoughness: 0.1,//透明涂层表面的粗糙度
} );
La situation réelle peut être ajustée selon le modèle. Les ajustements peuvent être débogués via l'interface graphique, et les effets réels du débogage peuvent être visualisés dans le chapitre précédent.
Transmission du matériau physique
Afin de mieux simuler les effets visuels du verre et du plastique translucide, vous pouvez utiliser cet attribut à la place de l'attribut transparent ordinaire. .opacity
Utilisez .transmissionl'attribut pour définir la transparence du maillage, qui peut maintenir une réflectivité élevée même en cas de transmission complète.
Comment utiliser:
const geometry = new THREE.TorusKnotGeometry(10, 3, 100, 16);
const material = new THREE.MeshPhysicalMaterial({
color: 0x30cff8,
transmission: 1,
});
const torusKnot = new THREE.Mesh(geometry, material);
scene.add(torusKnot);
Effet:
indice de réfraction.ior
L'indice de réfraction des matériaux non métalliques varie de 1,0 à 2,333. La valeur par défaut est 1,5.
const geometry = new THREE.TorusKnotGeometry(10, 3, 100, 16);
const material = new THREE.MeshPhysicalMaterial({
color: 0x30cff8,
transmission: 1,
ior:1.5,
});
const torusKnot = new THREE.Mesh(geometry, material);
scene.add(torusKnot);
Analyser le matériel gltf
Généralement, le matériau de maillage standard est utilisé par défaut MeshStandardMaterial. Si certains matériaux gltf ont des attributs tels que .clearcoat, .transmissionetc., et que le matériau de maillage standard MeshStandardMaterialne peut pas être exprimé, le matériau de maillage physique sera utilisé MeshPhysicalMaterialpour analyser le matériau gltf.
gltf.scene.traverse(function(obj) {
if (obj.isMesh) {
console.log('obj.material',obj.material);
}
});
console.log('外壳',mesh1.material);
console.log('玻璃',mesh2.material);
Code complet :
/*
* @Author: SouthernWind
* @Date: 2023-06-14 16:38:59
* @Last Modified by: SouthernWind
* @Last Modified time: 2023-06-14 16:39:32
*/
<template>
<div class="container" ref="container"></div>
</template>
<script setup>
import * as THREE from "three";
// 轨道
import {
OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import {
GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import {
GUI } from "three/addons/libs/lil-gui.module.min.js";
import {
ref, reactive, onMounted } from "vue";
// 三个必备的参数
let scene,camera,renderer,controls,mesh,material,group,texture,gui,textureCube;
onMounted(() => {
// 外层需要获取到dom元素以及浏览器宽高，来对画布设置长宽
// clientWidth等同于container.value.clientWidth
let container = document.querySelector(".container");
const {
clientWidth, clientHeight } = container;
console.log(clientHeight);
// 首先需要获取场景，这里公共方法放在init函数中
const init = () => {
scene = new THREE.Scene();
// 给相机设置一个背景
scene.background = new THREE.Color(0xaaaaaa);
// 透视投影相机PerspectiveCamera
// 支持的参数：fov, aspect, near, far
camera = new THREE.PerspectiveCamera(60,clientWidth / clientHeight,0.001,6000);
// 相机坐标
camera.position.set(30, 30, 30);
// 相机观察目标
camera.lookAt(scene.position);
// 渲染器
renderer = new THREE.WebGLRenderer({
antialias: true,
});
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
// 渲染多大的地方
renderer.setSize(clientWidth, clientHeight);
/* renderer.outputEncoding = THREE.sRGBEncoding; */
// const axesHelper = new THREE.AxesHelper(150);
// scene.add(axesHelper);
container.appendChild(renderer.domElement);
addBox();
console.log("查看当前屏幕设备像素比", window.devicePixelRatio);
};
init();
function addBox() {
gui = new GUI();
const geometry = new THREE.TorusKnotGeometry(10, 3, 100, 16);
const material = new THREE.MeshPhysicalMaterial({
color: 0x30cff8,
metalness: 0,
roughness: 0,
transmission: 0.5,
ior: 1.5,
});
const torusKnot = new THREE.Mesh(geometry, material);
scene.add(torusKnot);
gui.add(material, "transmission", 0, 1);
gui.add(material, "ior", 1, 2.333);
}
// 相机控件
const control = () => {
controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener("change", function () {
});
};
control();
// 光源
const linght = () => {
const pointLight = new THREE.PointLight(0xffffff, 1.0);
// pointLight.position.set(400, 0, 0);//点光源放在x轴上
pointLight.position.set(100, 60, 50); //设置光源的位置
// 光源和网格模型Mesh对应一样是三维场景的一部分，自然需要添加到三维场景中才能起作用。
scene.add(pointLight); // 添加光源到场景中
/* const pointLight = new THREE.AmbientLight(0xffffff, 1.0);
pointLight.position.set(150, 150, 150);
scene.add(pointLight); */
const pointLightHelper = new THREE.PointLightHelper(pointLight, 1);
scene.add(pointLightHelper);
};
linght();
const render = () => {
renderer.render(scene, camera);
requestAnimationFrame(render);
};
render();
window.addEventListener("resize", () => {
// 更新摄像头
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
});
</script>
<style>
.container {
width: 100%;
height: 100vh;
position: relative;
z-index: 1;
}
</style>