Three.js - Настроить тени, освещение, материалы 3D моделей в сцене

Данный модуль используется в приложении для примерки автомобильных дисков по фотографии. Пользователь загружает фото своего автомобиля, с помощью машинного зрения мы вычисляем положение диска и на его месте отображаем 3D модель выбранного диска из каталога. Необходимо доработать модуль визуализации так, что бы отображаемая сцена выглядела максимально реалистично и приближенно к исходному изображению. Подобранные настройки должны хорошо работать с другими исходными изображениями, путем изменения параметров, но никак не добавлением новых объектов на сцену. Прикрепляю изображение сцены и исходное изображение. Ссылка на модуль находится в открытом доступе в codesandbox (https://codesandbox.io/p/sandbox/rimrenderer-pz8696?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cm01pal5q00062v6nmc5k7eid%2522%252C%2522sizes%2522%253A%255B100%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cm01pal5q00022v6nbjc3044o%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cm01pal5q00032v6n2zb4hov2%2522%257D%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cm01pal5q00052v6n5auagt6c%2522%257D%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cm01pal5q00022v6nbjc3044o%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm01pal5p00012v6nasugm46j%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522cm01pal5q00022v6nbjc3044o%2522%252C%2522activeTabId%2522%253A%2522cm01pal5p00012v6nasugm46j%2522%257D%252C%2522cm01pal5q00052v6n5auagt6c%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm01pal5q00042v6nt28rorwf%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%257D%255D%252C%2522id%2522%253A%2522cm01pal5q00052v6n5auagt6c%2522%252C%2522activeTabId%2522%253A%2522cm01pal5q00042v6nt28rorwf%2522%257D%252C%2522cm01pal5q00032v6n2zb4hov2%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522cm01pal5q00032v6n2zb4hov2%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D)

Читайте на 123ru.net