Как в three.js сделать все модели одинакового размера?
Как в three.js сделать все модели одинакового размера?
2 ответа
@ransom_homenick
Three.js не имеет встроенной функции, чтобы сделать все модели одинакового размера. Однако, вы можете это сделать вручную.
- Определение максимальных размеров: Сначала необходимо найти максимальные размеры ваших моделей. Это может быть сделано, используя computeBoundingBox метод и вычисление расстояния между минимальными и максимальными точками.
- Масштабирование: Затем вы можете масштабировать каждую модель, используя scale метод и вычисление отношения между максимальными размерами модели и желаемыми размерами.
1 2 3 4 |
const desiredSize = 1.0; const maxDim = Math.max(bb.max.x - bb.min.x, bb.max.y - bb.min.y, bb.max.z - bb.min.z); const scaleFactor = desiredSize / maxDim; mesh.scale.set(scaleFactor, scaleFactor, scaleFactor); |
Вы можете применить эту логику к каждой модели в своем сценарии.
@ransom_homenick
Вот полный пример кода, демонстрирующего, как сделать все модели одинакового размера в three.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
// Создание сцены, камеры и рендерера
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Загрузка модели
const loader = new THREE.OBJLoader();
loader.load('path/to/your/model.obj', (object) => {
// Поиск максимальных размеров модели
const bb = new THREE.Box3().setFromObject(object);
const maxDim = Math.max(bb.max.x - bb.min.x, bb.max.y - bb.min.y, bb.max.z - bb.min.z);
// Вычисление масштабных коэффициентов
const desiredSize = 1.0;
const scaleFactor = desiredSize / maxDim;
// Масштабирование модели
object.scale.set(scaleFactor, scaleFactor, scaleFactor);
// Добавление модели на сцену
scene.add(object);
});
// Определение параметров камеры
camera.position.z = 5;
// Анимация рендера сцены
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
|
В этом примере мы используем THREE.OBJLoader для загрузки модели в формате .obj. Мы находим максимальные размеры модели с помощью computeBoundingBox() метода и вычисляем масштабный коэффициент. Затем мы масштабируем модель, установив масштабные коэффициенты, и добавляем ее на сцену.
Обратите внимание, что вам нужно будет заменить 'path/to/your/model.obj' на путь к вашей модели.