在 Three.js 中自动居中和调整 GLTF 模型的大小答案

【问题标题】：Centering and Resizing GLTF models automatically in Three.js在 Three.js 中自动居中和调整 GLTF 模型的大小
【发布时间】：2019-02-15 16:35:33
【问题描述】：

从 sketchfab.com 下载 3D 模型并将其导入到 Three.js 场景中后，它们大多不居中且尺寸很大。

有没有一种方法可以使用脚本或软件（在 Linux 上工作）自动居中和缩放 gltf 模型，或者在 Three.js 中即时进行，并使用 OrbitControls 让相机在对象周围移动.

【问题讨论】：

标签： three.js gltf

【解决方案1】：

是的。这段代码获取一个节点并找到它的大小和中心点，然后重新调整它，使其最大范围为 1，其中心为 0,0,0，并在 y 轴上高于地面。

    var mroot = yourScene;
    var bbox = new THREE.Box3().setFromObject(mroot);
    var cent = bbox.getCenter(new THREE.Vector3());
    var size = bbox.getSize(new THREE.Vector3());

    //Rescale the object to normalized space
    var maxAxis = Math.max(size.x, size.y, size.z);
    mroot.scale.multiplyScalar(1.0 / maxAxis);
    bbox.setFromObject(mroot);
    bbox.getCenter(cent);
    bbox.getSize(size);
    //Reposition to 0,halfY,0
    mroot.position.copy(cent).multiplyScalar(-1);
    mroot.position.y-= (size.y * 0.5);

【讨论】：

yourScene 是指向场景对象还是实际对象的路径？您能否为您的解决方案提供更多背景信息？
yourScene 将是您想要获得边界的任何场景/对象。在您的 GLTF 加载示例的情况下，您可以让 mroot = gltf.scene。 hth！

【解决方案2】：

var loader = new THREE.GLTFLoader();
loader.load( 'models/yourmodel.gltf', 
function ( gltf ) {
    gltf.scene.traverse( function ( child ) {
        if ( child.isMesh ) {
            child.geometry.center(); // center here
        }
    });
    gltf.scene.scale.set(10,10,10) // scale here
    scene.add( gltf.scene );
}, (xhr) => xhr, ( err ) => console.error( e ));

要在对象周围移动，请使用 controls.target() https://threejs.org/docs/#examples/controls/OrbitControls.target

【讨论】：

我不确定这如何解决我的问题。对象仍然偏移。你的提议中的缩放参数不是自动的。

【解决方案3】：

其他建议的解决方案对我来说效果不佳。但是，我在要加载到我的场景中的几个模型上测试了下面的简单方法，并且效果很好。

const loader = new GLTFLoader();
loader.load("assets/model_path/scene.gltf",
      (gltf) => {
        gltf.scene.scale.multiplyScalar(1 / 100); // adjust scalar factor to match your scene scale
        gltf.scene.position.x = 20; // once rescaled, position the model where needed
        gltf.scene.position.z = -20;

        scene.add(gltf.scene);
        render();
      },
      (err) => {
        console.error(err);
      }
    );

【讨论】：

【解决方案4】：

我像这样在 REACT 中调整了大小！

import React, { useState, useRef, useEffect } from "react";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
const Earth = () => {
const [model, setModel] = useState();
useEffect(() => {
    new GLTFLoader().load("scene.gltf", (model) => {
      model.scene.scale.set(0.03, 0.03, 0.03);
      setModel(model);
    });
  });
  return model ? <primitive object={model.scene} /> : null;
};

只需拨打<Earth />

【讨论】：