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

Question

从 sketchfab.com 下载3D模型并将它们导入Three.js场景后，它们大多数时候不居中，而且尺寸非常大。

有没有办法使用脚本或软件(在 Linux 上工作(自动居中和缩放 gltf 模型，或者在 Three.js 中即时完成，并使用 OrbitControls 让相机在物体周围移动。

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

Answer 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

Answer 3

我在 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 />

Answer 4

其他提出的解决方案对我来说效果不佳。 但是，我在几个模型上测试了下面的简单方法，以加载到我的场景中，它运行良好。

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