美文网首页
three.js导入fbx模型加载与克隆

three.js导入fbx模型加载与克隆

作者: 小张宝 | 来源:发表于2021-07-26 14:38 被阅读0次

小编最近根据项目需求需要加载FBX模型,刚开始呢只需要部分模型,于是小编就每个模型加载一次,随着模型数据越来越多,开始后面发现电脑开始嗡嗡的想,手机也是加载一会就闪退了,于是呢就开始小编的研究之路啦~
1、首先这是官网给出的导入fbx模型的例子

var loader = new THREE.FBXLoader();
  loader.load( '../model/fbx/Samba Dancing.fbx', function ( object ) {
      //动画
      mixers=object.mixer = new THREE.AnimationMixer( object );
      var action = object.mixer.clipAction( object.animations[0]);
      action.play();
      object.traverse( function ( child ) {
          if ( child.isMesh ) {
              child.castShadow = true;
              child.receiveShadow = true;
          }
      } );
      //缩放
      object.scale.set(0.5,0.5,0.5);
      //位置
      object.position.set(0,0,0);
      scene.add( object ); 
  } );

2、开始克隆fbx模型,由于找不到资料,我只能去github上找,然后发现上面说可以使用js的一个库SkeletonUtils。

import { SkeletonUtils } from 'three/examples/jsm/utils/SkeletonUtils.js'
var loader = new THREE.FBXLoader();
  loader.load( '../model/fbx/Samba Dancing.fbx', function ( object ) {
      //动画
      mixers=object.mixer = new THREE.AnimationMixer( object );
      var action = object.mixer.clipAction( object.animations[0]);
      action.play();
      object.traverse( function ( child ) {
          if ( child.isMesh ) {
              child.castShadow = true;
              child.receiveShadow = true;
          }
      } );
      //缩放
      object.scale.set(0.5,0.5,0.5);
      //位置
      object.position.set(0,0,0);
      scene.add( object ); 
       //模型复制,如果需要大量复制,刻在下面进行循环
        let meshBox = SkeletonUtils.clone(object)
        meshBox.animations = object.animations
        meshBox.mixer = new THREE.AnimationMixer(meshBox)
        const action2 = meshBox.mixer.clipAction(meshBox.animations[0])
        action2.play()
        meshBox.position.set(0, 20, 0)
        meshBox.scale.set(0.5, 0.5, 0.5)
        sceneFish.add(meshBox)
  } );

至此,小编学习fbx模型的加载和克隆就完毕啦~

相关文章

网友评论

      本文标题:three.js导入fbx模型加载与克隆

      本文链接:https://www.haomeiwen.com/subject/ulqgmltx.html