主页 / 问题 / 936644
Accepted
zeni1agent
Asked:2020-01-25 21:00:02 +0800 CST2020-01-25 21:00:02 +0800 CST

如何在three.js中使所有模型大小相同？

  • 772

我有几个模型（几何），它们都是不同的尺寸和格式

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 );

但这并不适用于所有模型，只是将相机调整为模型，反之亦然

three.js

1 个回答

  1. Best Answer

    这是一个用于将对象拟合到给定尺寸 ( 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>

    • 2

相关问题