Как выровнять и предотвратить растяжение изображения при загрузке изображения 3D сцены? - PullRequest
Новая
       142

Как выровнять и предотвратить растяжение изображения при загрузке изображения 3D сцены?

0 голосов
/ 07 августа 2020

У меня есть холст размером 600x900 на моей веб-странице с трехмерной сценой внутри. Часть, которую можно просмотреть внутри холста, можно загрузить в форме изображения.

Каждый раз, когда я нажимаю кнопку Загрузить изображение , диалоговое окно принимает значения высоты и ширины изображения, а затем мы можем щелкнуть Загрузить , чтобы окончательно загрузить изображение.

Однако есть 2 сцены, инициализированные, одна из которых действует как Heads-up Display. По умолчанию я добавляю plane к sceneHUD, который будет отображением на лобовом стекле.

Код добавления плоскости выглядит так: 

// img is an Image 
let plane = new THREE.Mesh(new THREE.PlaneGeometry(100, 100), img);
plane.overdraw = true;
plane.position.set(150,50,200);
sceneHUD.add(plane);

Теперь это - это код, который устанавливает изображение, которое необходимо загрузить: 

camera.left = -cam_width / 2;
camera.right = cam_width / 2;
camera.top = cam_height;
camera.bottom = 0;

fitCameraToObject(object_list['bg']);
renderer.setSize(req_image_width, req_image_height);
renderer.domElement.style.width = dom_width + 'px';
renderer.domElement.style.height = dom_height + 'px';

renderer.render(scene, camera);
renderer.render(sceneHUD, cameraHUD);

Затем renderer.domElement присваивается переменной, а затем загружается с HUD в правом нижнем углу.

Проблема в том, что если введено другое значение для высоты или ширины, HUD выравнивается по нижнему правому углу изображения, но растягивается по горизонтали и / или вертикали в зависимости от размеров. Как это можно решить?

...