загрузить модель FBX в код THREEJS с массивом скелета и костей для манипулирования вручную в коде js - PullRequest
Новая
       80

загрузить модель FBX в код THREEJS с массивом скелета и костей для манипулирования вручную в коде js

0 голосов
/ 27 июня 2019

Я работаю над проектом, который требует создания простой видеоигры, в которой вы должны взаимодействовать с окружением и персонажами игры.Мы можем импортировать 3D-модели, текстуры, физический движок, но анимации ДОЛЖНЫ быть реализованы вручную в коде JS.Для этого я использую библиотеку Threejs и создаю простую сцену, чтобы проверить, все ли работает так, как должно.Никаких проблем не возникало, когда я добавлял на сцену простую геометрию в виде куба, сфер, тора и даже текстур, более сложных, таких как отражение зеркал и т. Д. Наконец, я загрузил 3d-модель из Интернета в формате .fbx, следуя документации библиотеки ThreeJS,модель добавляется в сцену как объект, но есть две проблемы:

  • Я не знаю, как получить доступ к структуре модели скелета, такой как голова, шея, крылья, хвост и тд и тп.Мне нужно решить эту проблему, потому что я не могу импортировать анимацию, поэтому в коде JS я должен вручную написать анимацию ключевого кадра или что-то в этом роде, явно изменяя относительное положение / вращение узла (костей) структуры.Поэтому мне нужно знать, как устроена эта иерархическая структура, чтобы получить к ней доступ вручную.

  • Текстуры не загружаются, или, скорее всего, я не могу их загрузить.

'' 'javascript 

//TEXTURE
var loader = new THREE.TGALoader();
// load a resource
    var texture = loader.load(
// resource URL
   'loader/24-smaug/Smaug/textures/Skin-a.tga')

var material_smaug = new THREE.MeshPhongMaterial( {
    color: 0xffffff,
    map: texture
    } );
//MODEL 
var loader = new THREE.FBXLoader();
loader.load( 'loader/24-smaug/Smaug/smaug.fbx', function( object )  {

                                    object.position.z= 200.0;
                object.position.y= 100.0;
                object.position.x= 100.0;
                object.scale.set(10.0,10.0,10.0);
            object.traverse( function ( child ) {
                    if ( child.isMesh ) child.material.map = texture;
                } );
                scene.add(object);
                });

Окно хорошо отображает любой объект, свет, текстуру и даже модель "smaug.fbx".Текстура не появляется.

//Errors from Firefox Console:

THREE.MeshLambertMaterial: 'normalMap' is not a property of this material.
three.min.js:597:68
THREE.FBXLoader: SpecularFactor map is not supported in three.js, skipping texture. FBXLoader.js:646:15
THREE.FBXLoader: EmissiveFactor map is not supported in three.js, skipping texture. FBXLoader.js:646:15
THREE.WebGLRenderer: Texture has been resized from (1000x667) to (512x512).


//including previous errors that don't appear to affect visualization:


SyntaxError: export declarations may only appear at top level of a module constants.js:1
SyntaxError: import declarations may only appear at top level of a module

Я принимаю любое предложение для решения этой проблемы, даже если есть более простые способы придумать его.Основная проблема заключается в том, что я не могу оживить модель, так как не могу получить доступ к области ее физической структуры.Я застрял, пытаясь определить геометрию из загруженного объекта (см. Код), с намерением передать ее в качестве аргумента функции SkinnedMesh, определенной в threejs, я не понял метод.

...