three.js导入fbx模型文件

1、引入three模块，npm install three --save

2、把模块加载到你加载FBX文件的js中

        import * as THREE from '../build/three.module.js';

        import { OrbitControls } from './jsm/controls/OrbitControls.js';

        import { FBXLoader } from './jsm/loaders/FBXLoader.js';

3、创建容器、相机、场景、灯光、加载模型、动画、渲染

//容器

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 );//位置

//场景

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

 // model 模型

var loader = new FBXLoader();

loader.load( 'models/fbx/ball.fbx', function ( object ) {

//获取动画

mixer = new THREE.AnimationMixer( object );

var action = mixer.clipAction( object.animations[ 0 ] );

action.play();//播放

object.traverse( function ( child ) {

if ( child.isMesh ) {//材质

child.castShadow = true;

child.receiveShadow = true;

}

} );

scene.add( object );

} );

//渲染

renderer = new THREE.WebGLRenderer( { antialias: true } );

renderer.setPixelRatio( window.devicePixelRatio );

renderer.setSize( window.innerWidth, window.innerHeight );

renderer.shadowMap.enabled = true;

container.appendChild( renderer.domElement );

controls = new OrbitControls( camera, renderer.domElement );

controls.target.set( 0, 100, 0 );

controls.update();

4、最后注意的有两点，1、代码要跑在服务器中；2、引入的文件需要放在最外层的public文件夹中