Три. Появляется немного темного размытия на деталях ⇐ Javascript

[Anonymous]

Я новичок в Three.js, и я не знаю, как, но когда я использую тени с моей моделью, это дает мне некоторую аномалию для разных деталей. Описание изображения. Здесь
как на этом изображении. У меня есть направленный свет на отверстии < /p>
На этом изображении вы можете увидеть, что свет направлен на всю структуру, но по какой -то причине освещаются только определенные части, в то время как другие, по -видимому, имеют своего рода черное размытие или тень. < /P>
Я использую следующую функцию для создания тени. class = "Snippet-Code">
func.addShadow = (meshShadowl) => {
const scene = func.three_win.data.scene;
const renderer = func.three_win.data.renderer;

// Ambient light
func.ambientLight = new THREE.AmbientLight(0xffffff, 1.5);//3
scene.add(func.ambientLight);

// 1. Обчислення bounding box
const bbox = new THREE.Box3();
for (const mesh of meshShadowl) {
if (mesh && mesh.geometry) {
mesh.geometry.computeBoundingBox();
const tempBox = new THREE.Box3().setFromObject(mesh);
bbox.union(tempBox);
}
}

const center = new THREE.Vector3();
bbox.getCenter(center);
const size = new THREE.Vector3();
bbox.getSize(size);
const maxSize = Math.max(size.x, size.y, size.z);
const shadowDistance = maxSize;

// 2. Directional light
const light = new THREE.DirectionalLight(0xffffff, 5);//404040/18
light.position.set(center.x + shadowDistance, center.y + shadowDistance , center.z + shadowDistance);
//light.position.set(center.x + 10, center.y + 20 , center.z + 10);
light.castShadow = true;

light.shadow.mapSize.width = 14024;//14024/4096
light.shadow.mapSize.height = 14024;

light.shadow.camera.near = 2;
light.shadow.camera.far = shadowDistance * 3;
//light.shadow.radius = 2;

const padding = 10; // невеликий запас
light.shadow.camera.left = -size.x / 2 - padding;
light.shadow.camera.right = size.x / 2 + padding;
light.shadow.camera.top = size.z / 2 + padding;
light.shadow.camera.bottom = -size.z / 2 - padding;

light.shadow.bias = -0.004;//-0,001
light.shadow.normalBias = 0.01;//0,01

// 3. Target
const target = new THREE.Object3D();
target.receiveShadow = false;
target.castShadow = false;
target.position.copy(center);
scene.add(target);
target.updateMatrixWorld();
light.target = target;
target.updateMatrixWorld();

func.directionalLight = light;
scene.add(light);

// Optional: helper
const helper = new THREE.CameraHelper(light.shadow.camera);
scene.add(helper);

const helperLight = new THREE.DirectionalLightHelper(light, 10, 0xff0000);
scene.add(helperLight);

// 4. Обробка мешів
if (meshShadowl) {
for (const mesh of meshShadowl) {
if (!mesh || !mesh.geometry) continue;

if (
mesh.type === "LineSegments" ||
mesh.type === "AxesHelper" ||
mesh.type === "Line" ||
mesh.type === "Points" ||
mesh.type === "Line2" ||
mesh.type === "LineLoop" ||
mesh.name === "planeClipping" ||
mesh.name.includes("axis_side_") ||
mesh.name.includes("floor_mesh") ||
mesh.name.includes("crane_floor") ||
mesh.name.includes("planeClipped") ||
mesh.name.includes("mesh_cr_area") ||
mesh.name.includes("mesh_zone_") ||
mesh.name.includes("objModel") ||
mesh.name.includes("planeLabelCircle")
) continue;

if (mesh.name === "floorImg") {
mesh.material = func.floorTexture ?
new THREE.MeshStandardMaterial({ map: func.floorMap, side: THREE.DoubleSide }) :
new THREE.MeshStandardMaterial({ color: "#636362", side: THREE.DoubleSide });
} else {
if (mesh.name.includes('mesh_crane')) {
//mesh.geometry.computeVertexNormals();
//mesh.material = new THREE.MeshStandardMaterial({
// color: mesh.material.color,
// roughness: 0.75,
// metalness: 0.25,
// side: THREE.DoubleSide
//});
} else {
//mesh.material.dispose();
if (mesh.material) mesh.material.dispose();
mesh.material = new THREE.MeshStandardMaterial({
vertexColors: true,
roughness: 0.7,
metalness: 0.3,
side: THREE.DoubleSide,
clippingPlanes: mesh.material?.clippingPlanes,
});
}
}

mesh.castShadow = true;
mesh.receiveShadow = true;
mesh.material.needsUpdate = true;
mesh.geometry.computeVertexNormals();
}
}

// 5. Налаштування рендерера
renderer.shadowMap.enabled = true;
renderer.shadowMap.autoUpdate = true;
renderer.shadowMap.needsUpdate = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

renderer.outputEncoding = THREE.sRGBEncoding;

func.three_win.update();

};< /code>
< /code>
< /div>
< /div>
< /p>
Я уже пытался регулировать значения металлической и шероховатости деталей, добавила нормальную нормализацию и изменил настройки смещения и нормального биаса. Я подозреваю, что проблема может быть связана с самим светом, потому что, когда я его отключаю, все части кажутся равномерно затененными без каких -либо темных пятен.
Введите описание изображения здесь < /p>

Подробнее здесь: https://stackoverflow.com/questions/796 ... -on-detail