将我的 FBX 文件转换为 .gltf 后，模型非常小，为什么? [英] After converting my FBX file to a .gltf, the model is incredibly small, why?
本文介绍了将我的 FBX 文件转换为 .gltf 后，模型非常小，为什么?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问题:
将我的 FBX 文件转换为 .gltf 后，模型非常小，为什么?
我尝试使用 frontObject.scale.set( 1000, 1000, 1000 ); 缩放模型，但出现以下错误:
TypeError: 无法读取未定义的属性set"此外，在
function ( xhr ) {progressBar.style.display = "block";progressBar.style.width = ( xhr.loaded/xhr.total * 100 ) + '%';loadingText.innerHTML = '加载中...'+xhr.loaded+"/"+xhr.total;//由于某种原因，xhr.total = 0，所以我不能使用它设置超时(函数(){frontObject.scale.set( 1000, 1000, 1000 );}, 3000);},xhr.total 总是等于 0 而 xhr.loaded 等于一个大得离谱的数字.
我所做的只是将我的文件从 .fbx 转换为 .gltf 并将纹理的大小从 2048x2048 更改为 1024x1024.
这是我现在看到的截图:
以前，模型会采用整个垂直高度.
<小时>代码:
if (!Detector.webgl) Detector.addGetWebGLMessage();var 容器、统计信息、控件；var 相机、场景、渲染器、灯光；var clock = new THREE.Clock();var frontObject;在里面();动画()；函数初始化(){container = document.createElement('div');document.body.appendChild(容器);camera = new THREE.PerspectiveCamera( 45, window.innerWidth/window.innerHeight, 1, 2000 );相机位置设置( 100, 200, 300 );camera.lookAt(new THREE.Vector3(0,0,0));控件 = 新的 THREE.OrbitControls( 相机 );control.target.set( 0, 100, 0 );控制更新()；场景 = 新的 THREE.Scene();场景背景=新三色(0xa0a0a0)；Scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );光 = 新的 THREE.HemisphereLight(0xffffff, 0x444444);light.position.set( 0, 200, 0 );场景添加(光)；光 = 新的 THREE.DirectionalLight( 0xffffff );light.position.set( 0, 200, 100 );light.castShadow = true;light.shadow.camera.top = 180;light.shadow.camera.bottom = -100;light.shadow.camera.left = -120;light.shadow.camera.right = 120;场景添加(光)；光 = 新的 THREE.DirectionalLight( 0xffffff );light.position.set( 0, 0, -50 );light.castShadow = true;light.shadow.camera.top = 180;light.shadow.camera.bottom = -100;light.shadow.camera.left = -120;light.shadow.camera.right = 120;场景添加(光)；//scene.add(new THREE.CameraHelper(light.shadow.camera));//地面var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );mesh.rotation.x = - Math.PI/2;mesh.receiveShadow = true;场景添加(网格)；var grid = new THREE.GridHelper(2000, 20, 0x000000, 0x000000);grid.material.opacity = 0.2;grid.material.transparent = true;场景添加(网格)；加载();renderer = new THREE.WebGLRenderer( { antialias: true } );renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( window.innerWidth, window.innerHeight );renderer.shadowMap.enabled = true;container.appendChild(renderer.domElement);renderer.setSize( window.innerWidth, window.innerHeight );}函数加载(){//实例化一个加载器var loader = new THREE.GLTFLoader();//可选:提供一个 DRACOLoader 实例来解码压缩的网格数据三.DRACOLoader.setDecoderPath('../path/');THREE.DRACOLoader.setDecoderConfig( { type: 'js' } );loader.setDRACOLoader(new THREE.DRACOLoader());//加载 glTF 资源loader.load(//资源地址'../path/file.gltf',//加载资源时调用功能(gltf){场景.添加( gltf.scene );gltf.animations;//数组gltf.scene;//三.场景gltf.scenes;//数组gltf.cameras;//数组<三个.Camera>gltf.资产;//目的frontObject = gltf.asset;},//在加载过程中调用函数 ( xhr ) {progressBar.style.display = "block";progressBar.style.width = ( xhr.loaded/xhr.total * 100 ) + '%';loadingText.innerHTML = '加载中...'+xhr.loaded+"/"+xhr.total;//由于某种原因，xhr.total = 0，所以我不能使用它设置超时(函数(){frontObject.scale.set( 1000, 1000, 1000 );}, 3000);},//加载出错时调用功能(错误){console.log( '发生错误:'+error );});}函数动画(){requestAnimationFrame( 动画 );如果(mixers.length > 0){for ( var i = 0; i <小时>
小提琴:
https://jsfiddle.net/Username100/y54kpe1h/64我能够以正确的尺寸加载模型！但似乎默认加载管理器错误地指示一切都已加载，这怎么可能?
解决方案
有时在 GLTF 文件中，对象的最终大小由应用变换的父节点决定.
在你的代码中，我不确定
gltf.asset;//目的frontObject = gltf.asset;确实是您的对象.
真实对象是 gltf.scene 的子对象，可以使用 gltf.scene.traverse 或 .getObjectByName(
我修复了你的光线投射问题:
https://jsfiddle.net/manthrax/8evurmyx/44/>
QUESTION:
After converting my FBX file to a .gltf, the model is incredibly small, why ?
I tried scaling the model with frontObject.scale.set( 1000, 1000, 1000 ); but I get the following error:
TypeError: Cannot read property 'set' of undefined
Furthermore, in
function ( xhr ) {
progressBar.style.display = "block";
progressBar.style.width = ( xhr.loaded / xhr.total * 100 ) + '%';
loadingText.innerHTML = 'Loading... '+xhr.loaded+"/"+xhr.total;
// For some reason, xhr.total = 0, so I can't use it
setTimeout(function () {
frontObject.scale.set( 1000, 1000, 1000 );
}, 3000);
},
xhr.total is always equal to 0 and xhr.loaded is equal to an absurdly large number.
All I did was convert my file from .fbx to .gltf and change the size of the textures from 2048x2048 to 1024x1024.
Here is a screenshot of what I am now seeing:
Before, the model would take the whole vertical height.
CODE:
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats, controls;
var camera, scene, renderer, light;
var clock = new THREE.Clock();
var frontObject;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.set( 100, 200, 300 );
camera.lookAt(new THREE.Vector3(0,0,0));
controls = new THREE.OrbitControls( camera );
controls.target.set( 0, 100, 0 );
controls.update();
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xa0a0a0 );
scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );
light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
light.position.set( 0, 200, 0 );
scene.add( light );
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 200, 100 );
light.castShadow = true;
light.shadow.camera.top = 180;
light.shadow.camera.bottom = -100;
light.shadow.camera.left = -120;
light.shadow.camera.right = 120;
scene.add( light );
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 0, -50 );
light.castShadow = true;
light.shadow.camera.top = 180;
light.shadow.camera.bottom = -100;
light.shadow.camera.left = -120;
light.shadow.camera.right = 120;
scene.add( light );
// scene.add( new THREE.CameraHelper( light.shadow.camera ) );
// ground
var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
mesh.rotation.x = - Math.PI / 2;
mesh.receiveShadow = true;
scene.add( mesh );
var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
grid.material.opacity = 0.2;
grid.material.transparent = true;
scene.add( grid );
load();
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
container.appendChild( renderer.domElement );
renderer.setSize( window.innerWidth, window.innerHeight );
}
function load() {
// Instantiate a loader
var loader = new THREE.GLTFLoader();
// Optional: Provide a DRACOLoader instance to decode compressed mesh data
THREE.DRACOLoader.setDecoderPath( '../path/' );
THREE.DRACOLoader.setDecoderConfig( { type: 'js' } );
loader.setDRACOLoader( new THREE.DRACOLoader() );
// Load a glTF resource
loader.load(
// resource URL
'../path/file.gltf',
// called when the resource is loaded
function ( gltf ) {
scene.add( gltf.scene );
gltf.animations; // Array<THREE.AnimationClip>
gltf.scene; // THREE.Scene
gltf.scenes; // Array<THREE.Scene>
gltf.cameras; // Array<THREE.Camera>
gltf.asset; // Object
frontObject = gltf.asset;
},
// called while loading is progressing
function ( xhr ) {
progressBar.style.display = "block";
progressBar.style.width = ( xhr.loaded / xhr.total * 100 ) + '%';
loadingText.innerHTML = 'Loading... '+xhr.loaded+"/"+xhr.total;
// For some reason, xhr.total = 0, so I can't use it
setTimeout(function () {
frontObject.scale.set( 1000, 1000, 1000 );
}, 3000);
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened: '+error );
}
);
}
function animate() {
requestAnimationFrame( animate );
if ( mixers.length > 0 ) {
for ( var i = 0; i < mixers.length; i ++ ) {
mixers[ i ].update( clock.getDelta() );
}
}
renderer.render( scene, camera );
}
FIDDLE:
https://jsfiddle.net/Username100/y54kpe1h/64 I was able to load the model at the correct size ! But it seems that the default loading manager was incorrectly indicating that everything had loaded, how could that be ?
解决方案
Sometimes in GLTF files the final size of the object is dictated by parent nodes that apply transforms.
In your code, i'm not sure that
gltf.asset; // Object
frontObject = gltf.asset;
is really your object.
The real object is a child of the gltf.scene and can be found using gltf.scene.traverse or .getObjectByName(
I fixed up your raycasting thing:
https://jsfiddle.net/manthrax/8evurmyx/44/
这篇关于将我的 FBX 文件转换为 .gltf 后，模型非常小，为什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
