1

У меня есть несколько моделей(геометрий) И все они разного размера и формата

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var materials = new THREE.MeshBasicMaterial({ color: "red"}) ;
var cube = new THREE.Mesh(geometry, materials);
scene.add(cube);


var topy = 'models/JSON/111.json';
    var loader = new THREE.ObjectLoader();
      loader.load(
        topy,
        function ( obj ) {           
         scene.add( obj ); 
      });

            var loader = new THREE.TextureLoader();
            var normal = loader.load( 'models/3ds/portalgun/textures/normal.jpg' );
            var loader = new THREE.TDSLoader( );
            loader.setResourcePath( 'models/3ds/portalgun/textures/' );
            loader.load( 'models/3ds/portalgun/portalgun.3ds', function ( object ) {
                object.traverse( function ( child ) {
                    if ( child instanceof THREE.Mesh ) {
                        child.material.normalMap = normal;
                    }
                } );
                scene.add( object );
            } );

            var loader = new THREE.ThreeMFLoader();
            loader.load( 'models/3MF/Mi-24.3mf', function ( object ) {
                scene.add( object );
            } );

Мне необходимо чо бы все модели выводились одного размера и в одном и том же месте

так как у меня есть пол на котором в центре должны выводится модели

var floor_gam = new THREE.PlaneBufferGeometry( 2000, 2000 ) ;
var floor_rotat = - Math.PI / 2;
var mat_standart = new  THREE.MeshStandardMaterial( { color: 0x808080, roughness: 0, metalness: 0 } ) ; 

var  object_floor_standart = new THREE.Mesh( floor_gam, mat_standart );
object_floor_standart.rotation.x = floor_rotat ;
object_floor_standart.receiveShadow = true;
scene.add(  object_floor_standart );

Кто не будь знает как можно это сделать? Я пробовал

 var center = obj.geometry.boundingSphere.center;
 controls.target.set( center.x, center.y, center.z );

Но это работает не со всеми моделями и просто подгоняет камеру к модели а нужно наоборот

2
  • Имеется в виду одинаковыми по высоте? Commented 25 янв. 2019 в 13:05
  • @prisoner849 Да можно и по высоте. В идеале что-то на подобие width: 300px; height: 300px; object-fit: contain; только для three.js
    – zeni1agent
    Commented 25 янв. 2019 в 13:19

1 ответ 1

2

Вот, функция для умещения объекта в заданные размеры (scaleToFit()). В данном случае, максимальный размер утенка по оси x.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 3, 8);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

scene.add(new THREE.AmbientLight(0xffffff, 1.0));

var sizeBound = new THREE.Vector3(4, 4, 4);

var b = new THREE.Mesh(new THREE.BoxBufferGeometry(sizeBound.x, sizeBound.y, sizeBound.z), new THREE.MeshBasicMaterial());
var boxHelper = new THREE.BoxHelper(b);
scene.add(boxHelper);

var loader = new THREE.GLTFLoader();
loader.load("https://threejs.org/examples/models/gltf/Duck/glTF/Duck.gltf", (gltf) => {

  scaleToFit(gltf.scene, sizeBound); // умещаем в заданные размеры

  let b = new THREE.Box3().setFromObject(gltf.scene);
  gltf.scene.position.sub(b.getCenter()); // центрируем
  gltf.scene.position.y -= (sizeBound.y - b.getSize().y) * 0.5; // опускаем к "полу"
  
  scene.add(gltf.scene); // добавляем в сцену
});

function scaleToFit(obj, bound) {
  let box = new THREE.Box3().setFromObject(obj);
  let size = new THREE.Vector3();
  box.getSize(size);
  let vScale = new THREE.Vector3().copy(bound).divide(size);
  let scale = Math.min(vScale.x, Math.min(vScale.y, vScale.z));
  obj.scale.setScalar(scale);
}

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera)
});
body {
  overflow: hidden;
  margin: 0;
}
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>

11
  • scaleToFit() у меня работает только с GLTF форматом я попытался адаптировать его под разные форматы но не получилось var loader = new THREE.AWDLoader();loader.load("./models/AWD/simple.awd", (gltf) =>{ scaleToFit(gltf.scene, sizeBound); gltf.scene.position.sub(new THREE.Box3().setFromObject(gltf.scene).getCenter());scene.add(gltf.scene); }); var loader = new THREE.AWDLoader(); loader.load( 'models/AWD/simple.awd', function (trunk ) { scaleToFit(trunk.scene, sizeBound); trunk.scene.position.sub(new THREE.Box3().setFromObject(trunk.scene).getCenter()); scene.add(trunk.scene); });
    – zeni1agent
    Commented 25 янв. 2019 в 14:49
  • ошибка ncaught TypeError: Cannot read property 'updateMatrixWorld' of undefined
    – zeni1agent
    Commented 25 янв. 2019 в 14:53
  • 1
    Разные лоадеры возвращают разные объекты. Функция принимает в первом параметре объект, наследованный от THREE.Object3D(). Поэтому надо смотреть, что передаете в функцию - можно передать меш, либо сцену целиком, но передать геометрию - нельзя. Commented 25 янв. 2019 в 15:01
  • 1
    Все вроде бы разобрался ` var loader = new THREE.AWDLoader(); loader.load( 'models/AWD/simple.awd', function (trunk ) { scaleToFit(trunk, sizeBound); // умещаем в заданные размеры trunk.position.sub(new THREE.Box3().setFromObject(trunk).getCenter()); // центрируем scene.add(trunk); } );`
    – zeni1agent
    Commented 25 янв. 2019 в 15:24
  • 1
    @zeni1agent обновил сниппет в ответе :) Commented 25 янв. 2019 в 15:36

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.